@charset "UTF-8";

/*
  1. Font Face Declarations
*/
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}


/*
  2. Base CSS
*/
:root {
  --primary-color: #d4af37;
  --primary-color2: #b18819;
  --secondary-color:#00a86b;
  --secondary-color2:#008553;
  --yellow-color: #ffc107;
  --text-gray-color: #606060;
  --white-color: #ffffff;
  --ofwhite-color: #f2f2f2;
  --black-color: #000000;
  --light-color: #fcfcfc;
  --light-color2: #aaaaaa;
  --dark-color: #242424;
  --dark-theme-color: #121212;
  --dark-theme-lighter-color: #1f1f1f;
  --dark-theme-lighter2-color: #2c2c2c;
  --sky-color: #647589;
  --border-color: #e7e7e7;
  --border-color2: #e4e4e4;
  --border-color3: #dddddd;
  --border-dark: #383434;
  --bg-gray-color: #fcfcfc;
  --bg-light-color: #FCFCFC;
  --gray-color: #fafbfe;
  --gray-color2: #f5f5f5;
  --font-jost: "Poppins", sans-serif;
  --body-font-size: 1.4rem;
  --body-font-weight: 400;
  --body-line-height: 2.8rem;
  --headings-weight: 600;
  --transition: all 0.3s ease 0s;
  --container-fluid-offset: 19rem;
  --bg-color: #fff;
  --comment-border-color:#E7E7E7;
  --light-font-color: #848484;
  --light-font-color2:#6e6e6e;
  --success-color: #198754;
  --success-color2:#198766;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --danger-color2: #ed2d2d;
  --content-margin: 5px;
  --content-padding: 20px;
  --content-container-margin: 15px auto;
  --content-border-radius: 12px;
  --content-background:#fff;
  --content-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  --outline-bg-color: #f8f8f8;
  --btn-border-radius:25px;
  --btn-lg-border-radius:24px;
  --section-gap:10px;
  --container-border-radius: 12px;
  --modal-border-radius: 12px;
  --container-border: 1px solid #e9ecef;
  --container-border2: 1px solid #e3e3e3;
  --container-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  --container-margin: 5px;
  --container-padding: 20px;
  --container-bg:#fff;
  --btn-box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
  --btn-bg: linear-gradient(135deg, #b18819 0%, #d4af37 100%);
  --btn-color: #fff;
  --btn-border: 1px solid #d4af37;
  --btn-outline-bg: rgba(255, 255, 255, 0.2);
  --btn-outline-color: #b18819;
  --btn-transition: all 0.3s ease;
  --link-color: #007bff;
  --header-margin-bottom: 20px;
  --header-bg-color: #F8F4E9;
  --input-border-color: #dee2e6;
  --input-focus-border-color: #a0a0a0;
  --tagline-color: #d4edda;
  --dark-theme-label-color: #a5a5a5;
  --dark-theme-value-color: #d2d2d2;
  --card-bg-hover: #f5f5f5;
  --card-bg-dark-hover: #181818;
  --card-border-dark: #202122;
}

.color-scheme-1 {
  --secondary-color:#cda40a;
}

.color-scheme-2 {
  --secondary-color: #b79e8c;
}

/* Common Style */
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Base font size for rem calculations (1rem = 10px) */
  font-size: 62.5%;
}

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-jost) !important;
  font-size: var(--body-font-size, 1.6rem);
  font-weight: var(--body-font-weight);
  font-style: normal;
  line-height: var(--body-line-height, 1.8rem);
  position: relative;
  visibility: visible;
  overflow-x: hidden;
  color: var(--black-color);
  background-color: var(--bg-color) !important;
}

/*
   Mobile styles - increase font size for screens smaller than 768px
   Base rem is already 62.5% (10px) on desktop, so 1.6rem = 16px
   On mobile we set base to 75% (12px) for better readability
*/
@media (max-width: 768px) {
  html {
    font-size: 75%; /* 75% of 16px = 12px base (1rem = 12px) */
  }

  body {
    font-size: var(--body-font-size, 1.6rem);
    line-height: var(--body-line-height, 1.9rem);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--headings-weight);
  margin: 0;
}

h1,
.h1 {
  font-size: 2.4rem;
  line-height: 3.2rem;
}

@media only screen and (min-width: 576px) {
  h1,
  .h1 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
  .c-header__sub--menu{
    display: block;
  }
}

@media only screen and (min-width: 768px) {
  h1,
  .h1 {
    font-size: 3.2rem;
    line-height: 3.8rem;
  }
}

@media only screen and (min-width: 992px) {
  h1,
  .h1 {
    font-size: 3.8rem;
    line-height: 4.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 4.2rem;
    line-height: 5rem;
  }
}

@media only screen and (min-width: 1366px) {
  h1,
  .h1 {
    font-size: 4.5rem;
    line-height: 5.3rem;
  }
}

@media only screen and (min-width: 1600px) {
  h1,
  .h1 {
    font-size: 5.5rem;
    line-height: 6.5rem;
  }
}

h2,
.h2 {
  font-size: 2.2rem;
  line-height: 2.8rem;
  font-weight: 700;
}

@media only screen and (min-width: 768px) {
  h2,
  .h2 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  h2,
  .h2 {
    font-size: 3.5rem;
    line-height: 4rem;
  }
}

h3,
.h3 {
  font-size: 1.8rem;
  line-height: 2.5rem;
}

@media only screen and (min-width: 768px) {
  h3,
  .h3 {
    font-size: 1.9rem;
    line-height: 2.6rem;
  }
}

@media only screen and (min-width: 992px) {
  h3,
  .h3 {
    font-size: 2.1rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  h3,
  .h3 {
    font-size: 2.3rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  h3,
  .h3 {
    font-size: 2.5rem;
    line-height: 3.2rem;
  }
}

h4,
.h4 {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.4rem;
}

@media only screen and (min-width: 992px) {
  h4,
  .h4 {
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
}

h5,
.h5 {
  font-size: 1.5rem;
  line-height: 2.4rem;
  font-weight: 400;
}

@media only screen and (min-width: 768px) {
  h5,
  .h5 {
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
}

h6,
.h6 {
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 400;
}

@media only screen and (min-width: 768px) {
  h6,
  .h6 {
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
}

p {
  margin-top: 0;
  margin-bottom: 1.8rem;
  color: var(--text-gray-color);
  font-size: 1.5rem;
  line-height: 2.5rem;
}

@media only screen and (max-width: 767px) {
  p {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

p:last-child {
  margin-bottom: 0;
}

a,
button {
  display: inline-block;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

a,
button,
img,
input,
textarea {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

*:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

a:focus {
  text-decoration: none;
  outline: none;
}

a:hover {
  text-decoration: none !important;
  color: var(--primary-color) !important;
}

button,
input[type="submit"] {
  cursor: pointer;
  font-family: var(--font-jost) !important;
  font-size: 1.5rem;
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

input[type="number"] {
  -moz-appearance: textfield;
}

img {
  max-width: 100%;
  height: auto;
}

span {
  display: inline-block;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
}

ul {
  margin: 0;
  padding: 0;
}

ul:last-child {
  margin-bottom: 0;
}

li {
  list-style: none;
  line-height: 1;
}

hr {
  border-top-width: 2px;
}

.container,
.container-fluid {
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

.container-fluid {
  --offset-fluid: 1.5rem;
  padding-right: var(--offset-fluid);
  padding-left: var(--offset-fluid);
}

@media only screen and (min-width: 992px) {
  .container-fluid {
    --offset-fluid: 3rem;
  }
}

@media only screen and (min-width: 1366px) {
  .container-fluid {
    --offset-fluid: calc(var(--container-fluid-offset) / 4.5);
  }
}

@media only screen and (min-width: 1600px) {
  .container-fluid {
    --offset-fluid: calc(var(--container-fluid-offset) / 2.5);
  }
}

@media only screen and (min-width: 1800px) {
  .container-fluid {
    --offset-fluid: var(--container-fluid-offset);
  }
}

.container-fluid-2 {
  --offset-fluid: 1.5rem;
  padding-right: var(--offset-fluid);
  padding-left: var(--offset-fluid);
}

@media only screen and (min-width: 992px) {
  .container-fluid-2 {
    --offset-fluid: 3rem;
  }
}

@media only screen and (min-width: 1366px) {
  .container-fluid-2 {
    --offset-fluid: 4.5rem;
  }
}

@media only screen and (min-width: 1500px) {
  .container-fluid-2 {
    --offset-fluid: 5rem;
  }
}

@media only screen and (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media only screen and (min-width: 992px) {
  .container {
    max-width: 960px;
  }

  .c-logo{
    font-size:3.6rem !important;
   }
}

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }

  .c-logo{
    font-size:3.6rem !important;
   }
}

@media only screen and (min-width: 1400px) {
  .container {
    max-width: 1200px;
  }

  .c-logo{
    font-size:3.6rem !important;
   }
}

/* row col */

.row-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

@media only screen and (max-width: 991px) {
  .row-md-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.d-none {
  display: none !important;
}

.display-block {
  display: block;
}

@media only screen and (min-width: 1200px) {
  .d-xl-block {
    display: block !important;
  }
  .d-xl-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media only screen and (min-width: 992px) {
  .d-lg-block {
    display: block !important;
  }
  .d-lg-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}

@media only screen and (min-width: 768px) {
  .d-md-block {
    display: block !important;
  }
  .d-md-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media only screen and (max-width: 1199px) {
  .d-xl-none {
    display: none;
  }
  .col-md-order {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}

@media only screen and (max-width: 991px) {
  .d-md-2-none {
    display: none;
  }
  .d-md-2-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .col-md-2-order {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}

@media only screen and (max-width: 767px) {
  .d-sm-none {
    display: none;
  }
  .d-sm-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .col-sm-order {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}

@media only screen and (max-width: 575px) {
  .d-sm-2-none {
    display: none;
  }
  .d-sm-2-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .col-sm-2-order {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}

.header__transparent {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
}

.section__heading--maintitle {
  position: relative;
  padding-bottom: 2rem;
}

.section__heading--maintitle::before {
  position: absolute;
  content: "";
  background: url(../img/other/heading-shape.png);
  width: 174px;
  height: 5px;
  bottom: 0;
  left: 50%;
  -webkit-transform: translatex(-50%);
          transform: translatex(-50%);
}

.section__heading--maintitle.style2::before {
  width: 13rem;
  height: 0.2rem;
  background: var(--secondary-color);
}

.primary__btn,
.cancel-btn {
  font-size: 1.4rem !important;
  font-weight: var(--body-line-height);
  line-height: 3.5rem;
  display: inline-block;
  height: 3.5rem;
  padding: 0 1.8rem;
  letter-spacing: 0.2px;
  border-radius: var(--btn-border-radius) !important;
  background: var(--primary-color);
  color: var(--white-color);
  border: 0;
}

.primary__btn:hover {
  background: var(--primary-color);
  color: var(--white-color);
  opacity: 0.9;
}

@media only screen and (min-width: 768px) {
  .primary__btn, .cancel-btn {
    font-size: 1.5rem;
    line-height: 4rem;
    height: 4rem;
    padding: 0 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .primary__btn, .cancel-btn {
    font-size: 1.6rem;
    line-height: 4.5rem;
    height: 4.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .primary__btn, .cancel-btn {
    font-size: 1.7rem;
    line-height: 4.8rem;
    height: 4.8rem;
    padding: 0 2.3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .primary__btn, .cancel-btn {
    font-size: 1.8rem;
    line-height: 5.2rem;
    height: 5.2rem;
    padding: 0 2.5rem;
  }
}

.cancel-btn,
button.cancel-btn {
  background: #ccc !important;
  border:1px solid #ccc !important;
  text-align: center !important;
  color: #fff !important;
}

a.cancel-btn:hover{
  color: #fff !important;
  opacity: 0.9;
}

.c-cancel {
  background-color:#606060 !important;
  color: var(--white-color) !important;
}

button.primary__btn{
  border-radius: 25px !important;
}

.contact__form--btn{
  border-radius: 25px !important;
}

.c-btn-margin-right{
  margin-right: 0.8rem !important;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.swiper__nav--btn {
  width: 4rem;
  height: 4rem;
  background: var(--secondary-color);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (max-width: 767px) {
  .swiper__nav--btn {
    width: 3.5rem;
    height: 3.5rem;
  }
}

.swiper__nav--btn:hover {
  background: var(--primary-color);
}

.swiper__nav--btn::after {
  background: url(../img/icon/left-arrow-angle.png);
  width: 9px;
  height: 17px;
  font-size: 0;
}

.swiper__nav--btn.swiper-button-prev {
  left: 0;
}

.swiper__nav--btn.swiper-button-next {
  right: 0;
}

.swiper__nav--btn.swiper-button-next::after {
  background: url(../img/icon/right-arrow-angle.png);
}

.swiper-pagination {
  bottom: 0 !important;
}

.swiper-pagination-bullet {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--secondary-color);
  background: var(--white-color);
  opacity: 1;
  vertical-align: middle;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--secondary-color);
  width: 1.8rem;
  height: 1.8rem;
}

label {
  display: block;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

select {
  word-wrap: normal;
  font-family: var(--font-jost) !important;
  font-size: 1.5rem;
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

#scroll__top {
  position: fixed;
  bottom: 80px;
  right: 25px;
  z-index: 99;
  outline: none;
  background-color: var(--primary-color);
  color: var(--white-color);
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  line-height: 1;
  width: 4.3rem;
  height: 4.3rem;
  line-height: 1;
  border-radius: 50%;
  border: 0;
}

#scroll__top:hover {
  background: var(--primary-color2);
}

#scroll__top.active {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#scroll__top svg {
  width: 25px;
  line-height: 1;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right;
}

.overflow-hidden {
  overflow: hidden;
}

.break {
  word-break: break-word;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.text-white {
  color: var(--white-color) !important;
}

.text-ofwhite {
  color: var(--ofwhite-color);
}

.text-black {
  color: var(--black-color);
}

.body__background {
  background: var(----gray-color);
}

.bg__primary {
  background: var(--primary-color);
}

.bg__secondary {
  background: var(--secondary-color);
}

.bg__gray--color {
  background: var(--bg-gray-color);
}

.bg__white {
  background: var(--white-color);
}

.bg__black {
  background: #1d1c1c;
}

.text__primary {
  color: var(--primary-color);
}

.text__secondary {
  color: var(--secondary-color);
}

.text__secondary2 {
  color: var(--secondary-color);
}

.position__relative {
  position: relative;
}

.border-bottom {
  border-bottom: 1px solid var(--border-color);
}

.border {
  border: 1px solid var(--border-color);
}

.border-0 {
  border: none;
}

.border-radius-5 {
  border-radius: 0.5rem;
}

.border-radius-10 {
  border-radius: 1rem;
}

.border-radius-50 {
  border-radius: 50%;
}

.width-100 {
  width: 100%;
}

@media only screen and (max-width: 991px) {
  .md-width-100 {
    width: 100%;
  }
}

/* Tab */
.tab_content {
  display: block;
}

.tab_pane {
  display: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.tab_pane:not(.show) {
  opacity: 0;
}

.tab_pane.show {
  opacity: 1;
}

.tab_pane.active {
  display: block;
}

body.overlay__active,
.mobile_menu_open,
.predictive__search--box_active,
.offCanvas__minicart_active,
.offcanvas__filter--sidebar_active {
  overflow-y: hidden;
}

body.overlay__active::before,
.predictive__search--box_active::before,
.mobile_menu_open::before,
.offCanvas__minicart_active::before,
.offcanvas__filter--sidebar_active::before {
  position: absolute;
  content: "";
  background: #000;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0.5;
  cursor: crosshair;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate-fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/* Section padding */
.section--padding {
  padding-top: 1.1rem;
  padding-bottom: 6rem;
}

@media only screen and (min-width: 768px) {
  .section--padding {
    padding-top: 1.1rem;
    padding-bottom: 7rem;
  }
}

@media only screen and (min-width: 992px) {
  .section--padding {
    padding-top: 1.1rem;
    padding-bottom: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .section--padding {
    padding-top: 1.1rem;
    padding-bottom: 9rem;
  }
}

/* Section margin */
.section--nargin {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

@media only screen and (min-width: 768px) {
  .section--nargin {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
}

@media only screen and (min-width: 992px) {
  .section--nargin {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .section--nargin {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
}

/* Padding */
.p-0 {
  padding: 0px !important;
}

.pt-0 {
  padding-top: 0;
}

.pb-0 {
  padding-bottom: 0;
}

/* Margin */
.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-1 {
  margin-top: 0.1rem !important;
}

.mt-2 {
  margin-top: 0.2rem !important;
}

.mt-3 {
  margin-top: 0.3rem !important;
}

.mt-4 {
  margin-top: 0.4rem !important;
}

.mt-5 {
  margin-top: 0.5rem !important;
}

.mt-10 {
  margin-top: 1rem !important;
}

.mt-20 {
  margin-top: 2rem !important;
}

.mb-60 {
  margin-bottom: 3.5rem;
}

.m-20{
  margin: 2rem !important;
}

@media only screen and (min-width: 768px) {
  .mb-60 {
    margin-bottom: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .mb-60 {
    margin-bottom: 6rem;
  }
}

.mb-55 {
  margin-bottom: 3.5rem;
}

@media only screen and (min-width: 992px) {
  .mb-55 {
    margin-bottom: 5.5rem;
  }
}

.mb-50 {
  margin-bottom: 2.8rem;
}

@media only screen and (min-width: 768px) {
  .mb-50 {
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mb-50 {
    margin-bottom: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mb-50 {
    margin-bottom: 5rem;
  }
}

.mb-40 {
  margin-bottom: 2.5rem;
}

@media only screen and (min-width: 992px) {
  .mb-40 {
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mb-40 {
    margin-bottom: 4rem;
  }
}

.mb--n40 {
  margin-bottom: -2.5rem;
}

@media only screen and (min-width: 992px) {
  .mb--n40 {
    margin-bottom: -2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mb--n40 {
    margin-bottom: -4rem;
  }
}

.mb-35 {
  margin-bottom: 2rem;
}

@media only screen and (min-width: 1200px) {
  .mb-35 {
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mb-35 {
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mb-35 {
    margin-bottom: 3.5rem;
  }
}

.mb-30 {
  margin-bottom: 2.5rem;
}

@media only screen and (min-width: 1366px) {
  .mb-30 {
    margin-bottom: 3rem;
  }
}

.mb--n30 {
  margin-bottom: -2.5rem;
}

@media only screen and (min-width: 1366px) {
  .mb--n30 {
    margin-bottom: -3rem;
  }
}

.mb-28 {
  margin-bottom: 2.8rem;
}

.mb--n28 {
  margin-bottom: -2.8rem;
}

.mb-25 {
  margin-bottom: 1.8rem;
}

@media only screen and (min-width: 992px) {
  .mb-25 {
    margin-bottom: 2.5rem;
  }
}

.mb-20 {
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .mb-20 {
    margin-bottom: 2rem;
  }
}

.mb-15 {
  margin-bottom: 1rem;
}

@media only screen and (min-width: 1200px) {
  .mb-15 {
    margin-bottom: 1.5rem;
  }
}

.mb-12 {
  margin-bottom: 1rem;
}

@media only screen and (min-width: 992px) {
  .mb-12 {
    margin-bottom: 1.2rem;
  }
}

.mb-10 {
  margin-bottom: 0.8rem;
}

@media only screen and (min-width: 992px) {
  .mb-10 {
    margin-bottom: 1rem;
  }
}

.mb-8 {
  margin-bottom: 0.8rem;
}

.mb-5 {
  margin-bottom: 0.5rem;
}

.mr-30 {
  margin-right: 3rem;
}

.mr-5 {
  margin-right: 0.5rem;
}

.mr-6 {
  margin-right: 0.6rem;
}

.mr-7 {
  margin-right: 0.7rem;
}

.mr-8 {
  margin-right: 0.8rem;
}

.select {
  position: relative;
}

.select::before {
  border-bottom: 2px solid var(--black-color);
  border-right: 2px solid var(--black-color);
  content: "";
  display: block;
  height: 7px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  -webkit-transform-origin: 66% 66%;
          transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 0.7;
}

/*
  9. Footer css
*/
@media only screen and (max-width: 991px) {
  .footer__section {
    padding-bottom: 7rem;
  }
}

.main__footer {
  border-bottom: 1px solid #dddddd;
  padding: 6rem 0 2rem;
}

@media only screen and (min-width: 992px) {
  .main__footer {
    padding: 6.5rem 0 3rem;
  }
}

@media only screen and (min-width: 1366px) {
  .main__footer {
    padding: 7rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .main__footer {
    padding: 8rem 0;
  }
}

@media only screen and (max-width: 1365px) {
  .main__footer {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

@media only screen and (max-width: 767px) {
  .main__footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 6rem 0 3.5rem;
  }
}

@media only screen and (min-width: 1366px) and (max-width: 1449px) {
  .footer__widget--width {
    width: 25%;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .footer__widget--width {
    width: 31.5%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__widget--width {
    width: 31%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget--width {
    width: 47%;
  }
}

.social__title {
  font-size: 1.8rem;
  font-weight: 400;
}

.social__shear--list {
  margin-right: 1.3rem;
}

.social__shear--list:last-child {
  margin-right: 0;
}

.social__shear--list__icon {
  color: var(--ofwhite-color);
}

.footer__widget {
  margin-right: 3rem;
}

@media only screen and (max-width: 1365px) {
  .footer__widget {
    margin-bottom: 4rem;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget {
    margin-bottom: 0;
    margin-right: 0;
  }
}

.footer__widget:last-child {
  margin-right: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__widget:nth-child(3) {
    margin-right: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget:nth-child(2) {
    margin-right: 0;
  }
}

.footer__widget--title {
  /* margin-bottom: 1.2rem; */
  font-weight: 400;
  position: relative;
  /* padding-bottom: 0.3rem; */
}

@media only screen and (min-width: 992px) {
  .footer__widget--title {
    margin-bottom: 3rem;
    padding-bottom: 1rem;
  }
}

@media only screen and (max-width: 1199px) {
  .footer__widget--title {
    font-size: 1.2rem !important;
    margin-bottom: 2.2rem;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget--title {
    padding-bottom: 0;
    font-size: 1.2rem !important;
  }
}

.footer__widget--title::before {
  position: absolute;
  content: "";
  height: 0.2rem;
  width: 6rem;
  /* background: #909090; */
  left: 0;
  bottom: 0;
}

@media only screen and (max-width: 767px) {
  .footer__widget--title::before {
    display: none;
  }
}

.footer__widget--title__arrowdown--icon {
  position: absolute;
  right: 0;
  top: 38%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: none;
}

@media only screen and (max-width: 767px) {
  .footer__widget--title__arrowdown--icon {
    display: block;
  }
}

.footer__widget.active {
  padding-bottom: 3.5rem;
}

.footer__widget.active .footer__widget--title__arrowdown--icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.footer__widget--menu__text {
  color: var(--ofwhite-color);
  line-height: 3rem;
  font-size:1.1rem !important;
}

.footer__widget--menu__wrapper .footer__widget {
  margin-right: 3rem;
}

@media only screen and (min-width: 1600px) {
  .footer__widget--menu__wrapper .footer__widget {
    margin-right: 6rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget--menu__wrapper .footer__widget {
    margin-right: 4rem;
  }
}

.footer__widget--menu__wrapper .footer__widget:last-child {
  margin-right: 3rem;
}

@media only screen and (max-width: 767px) {
  .footer__widget--menu__wrapper .footer__widget:last-child {
    margin-right: 0;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget--menu__wrapper .footer__widget {
    margin-right: 0;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget--menu__wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.footer__widget--button {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  content: "";
  color: transparent;
  border: 0;
  background-color: transparent;
  color: var(--white-color);
}

.footer__widget--button > * {
  pointer-events: none;
}

@media only screen and (max-width: 767px) {
  .footer__widget--button {
    visibility: visible;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget--inner {
    display: none;
  }
}

.footer__bottom {
  padding: 2rem 0;
}

@media only screen and (min-width: 768px) {
  .footer__bottom {
    padding: 2.5rem 0;
  }
}

@media only screen and (max-width: 991px) {
  .footer__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.footer__instagram--list {
  margin-bottom: 1rem;
}

.footer__instagram--list:last-child {
  margin-bottom: 0;
}

.instagram__thumbnail {
  margin-right: 1rem;
}

.instagram__thumbnail:last-child {
  margin-bottom: 0;
}

.instagram__thumbnail a {
  display: block;
}

.instagram__thumbnail a img {
  display: block;
  width: 8rem;
}

@media only screen and (max-width: 991px) {
  .copyright__content {
    margin-bottom: 2rem !important;
  }
}

@media only screen and (max-width: 767px) {
  .copyright__content {
    text-align: center;
    margin-bottom: 1.5rem !important;
  }
}

.copyright__content--link:hover {
  text-decoration: underline;
}

.footer__payment {
  line-height: 1;
}

.footer__dropdown--language {
  position: absolute;
  z-index: 9;
  width: 100px;
  -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  top: auto;
  bottom: 100%;
  left: 0;
  margin-top: 0;
  margin-bottom: 2.8rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background: var(--white-color);
  opacity: 0;
  visibility: hidden;
}

.footer__dropdown--language.active {
  opacity: 1;
  visibility: visible;
  margin-bottom: 1.5rem;
}

.footer__dropdown--currency {
  position: absolute;
  z-index: 9;
  width: 100px;
  -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  top: auto;
  bottom: 100%;
  left: 0;
  margin-top: 0;
  margin-bottom: 2.8rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background: var(--white-color);
  opacity: 0;
  visibility: hidden;
}

.footer__dropdown--currency.active {
  opacity: 1;
  visibility: visible;
  margin-bottom: 1.5rem;
}

.footer__currency--link > * {
  pointer-events: none;
}

.footer__currency--link:hover {
  color: var(--secondary-color);
}

.footer__currency--link:hover span {
  color: var(--secondary-color);
}

.footer__social--style3 .social__shear--list__icon {
  color: var(--black-color);
  font-size: 1.2rem !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer__social--style3 .social__shear--list__icon:hover {
  color: var(--primary-color);
}

.footer__social--style3 .social__shear--list__icon:hover span {
  color: var(--primary-color);
}

.footer__social--style3 .social__shear--list {
  margin-right: 0;
  margin-bottom: 1.5rem;
}

.footer__social--style3 .social__shear--list:last-child {
  margin-right: 0;
}

.footer__social--icon__svg {
  width: 2.5rem;
  margin-right: 1rem;
}

.footer__social--icon {
  width: 2rem;
  margin-right: 1rem;
}

.footer__menu--style3 .footer__widget--menu__text {
  color: var(--black-color);
}

.footer__menu--style3 .footer__widget--menu__text:hover {
  color: var(--secondary-color);
}

.copyright__content.style3 {
  text-align: center;
  margin-bottom: 2rem;
}

@media only screen and (min-width: 1366px) {
  .footer__widget--desc.style3 {
    padding-right: 4rem;
  }
}

.footer__widget--button.style3 {
  color: var(--primary-color);
}

.quickview__main--wrapper {
  position: relative;
  max-width: 880px;
  max-height: 80vh;
  border-radius: 10px;
  background: #fff;
  overflow: auto;
  cursor: default;
  padding: 20px;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  pointer-events: inherit;
}

@media only screen and (max-width: 767px) {
  .quickview__main--wrapper {
    max-width: 550px;
  }

  .footer__menu--style3 .footer__widget--menu__text {
    font-size: 1.05rem !important;
  }
}

@media only screen and (max-width: 575px) {
  .quickview__main--wrapper {
    padding: 25px 15px;
  }
}

.quickview__header {
  position: absolute;
  padding: 0;
  top: 16px;
  right: 16px;
  z-index: 9;
}

@media only screen and (max-width: 767px) {
  .quickview__header {
    top: 10px;
    right: 10px;
  }
}

.quickview__close--btn {
  font-size: 1.8rem;
  padding: 0;
  width: 3.2rem;
  height: 3.2rem;
  line-height: 2.6rem;
  border-radius: 50%;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: var(--white-color);
}

.quickview__close--btn:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
}

/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .modal-dialog {
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15);
  transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

[data-animation].is-visible .modal-dialog {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

@media only screen and (max-width: 767px) {
  .quickview__product--media.product__details--media {
    margin-bottom: 3rem;
  }
}

.quickview__info--review__text {
  color: var(--text-gray-color);
  font-weight: 500;
  margin-left: 15px;
}

@media only screen and (max-width: 767px) {
  .quickview__gallery {
    margin-bottom: 20px;
  }
}

.quickview__thumb {
  position: relative;
  line-height: 1;
}

.quickview__thumb--link {
  width: 100%;
  border-radius: 8px;
}

.quickview__thumb--img {
  width: 100%;
  border-radius: 8px;
}

/*
    14. Breadcrumb css
*/
.breadcrumb__bg {
  background: url(/images/bg.jfif);
  background-repeat: no-repeat;
  height: 130px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  /* object-fit: cover; */
}

@media only screen and (min-width: 480px) {
  .breadcrumb__bg {
    height: 150px;
  }
}

@media only screen and (min-width: 576px) {
  .breadcrumb__bg {
    height: 170px;
  }
}

@media only screen and (min-width: 768px) {
  .breadcrumb__bg {
    height: 190px;
  }
}

@media only screen and (min-width: 992px) {
  .breadcrumb__bg {
    height: 220px;
  }
}

@media only screen and (min-width: 1200px) {
  .breadcrumb__bg {
    height: 270px;
  }
}

@media only screen and (min-width: 1600px) {
  .breadcrumb__bg {
    height: 300px;
  }
}

@media only screen and (max-width: 1600px) {
  .breadcrumb__bg {
    background-position: center center;
    background-size: cover;
  }
}

.breadcrumb__content {
  position: relative;
}

.breadcrumb__content--title.mb-25 {
  margin-bottom: 12px;
}

@media only screen and (min-width: 768px) {
  .breadcrumb__content--title.mb-25 {
    margin-bottom: 18px;
  }
}

@media only screen and (min-width: 992px) {
  .breadcrumb__content--title.mb-25 {
    margin-bottom: 20px;
  }
}

.breadcrumb__content--menu__items {
  position: relative;
  margin-right: 20px;
  padding-right: 22px;
  font-size: 1.6rem;
  line-height: 2.4rem;
}

@media only screen and (min-width: 768px) {
  .breadcrumb__content--menu__items {
    font-size: 1.8rem;
  }
}

.breadcrumb__content--menu__items:last-child {
  margin-right: 0;
  padding-right: 0;
}

.breadcrumb__content--menu__items:last-child::before {
  display: none;
}

.breadcrumb__content--menu__items::before {
  position: absolute;
  content: "";
  width: 3px;
  height: 20px;
  background: var(--secondary-color);
  right: 0;
  top: 4px;
  border-radius: 5px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

/*
    22. My account page css
*/
.my__account--section__inner {
  background: var(--bg-color);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  padding: 3rem 2rem;
}

.c-my__account--section__inner {
  background: var(--bg-color) !important;
  -webkit-box-shadow:none !important;
  box-shadow: none !important;
}

.c-panel .my__account--section__inner {
  background: var(--bg-color) !important;
  -webkit-box-shadow:none !important;
  box-shadow: none !important;
}

.c-account__wrapper {
  padding: 0.1rem 0.5rem 2rem 0.5rem !important;
  border-radius: 0.5rem !important;
}


@media only screen and (min-width: 1199px) {
  .my__account--section__inner {
    padding: 5rem 4rem;
  }
}

@media only screen and (max-width: 991px) {
  .my__account--section__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.account__left--sidebar {
  border-right: 1px solid var(--border-color2);
  padding-right: 3rem;
  margin-right: 3rem;
  width: 18rem;
}

@media only screen and (min-width: 1199px) {
  .account__left--sidebar {
    padding-right: 5rem;
    margin-right: 5rem;
    width: 23rem;
  }
}

@media only screen and (max-width: 991px) {
  .account__left--sidebar {
    width: 100%;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-color2);
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.account__wrapper {
  width: calc(100% - 18rem);
}

@media only screen and (min-width: 1199px) {
  .account__wrapper {
    width: calc(100% - 23rem);
  }
}

@media only screen and (max-width: 991px) {
  .account__wrapper {
    width: 100%;
  }
}

@media only screen and (max-width: 991px) {
  .account__menu {
    width: 250px;
    margin-right: 3rem;
  }
}

@media only screen and (max-width: 479px) {
  .account__menu {
    margin-right: 0;
  }
}

.account__menu--list {
  font-size: 1.4rem;
  line-height: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-bottom: 1.5rem;
}

.account__menu--list:last-child {
  margin-bottom: 0;
}

.account__menu--list:hover {
  color: var(--secondary-color);
}

.account__menu--list.active {
  color: var(--secondary-color);
}

@media only screen and (min-width: 992px) {
  .account__menu--list {
    font-size: 1.6rem;
  }
}

.account__details.two {
  padding-top: 0;
}

@media only screen and (min-width: 992px) {
  .account__details {
    padding-top: 3rem;
  }
}

@media only screen and (max-width: 479px) {
  .account__details {
    padding-top: 3rem;
  }
}

.account__details--title {
  margin-bottom: 1rem;
}

.account__details--desc {
  color: var(--text-gray-color);
  line-height: 3rem;
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.account__details--link {
  color: var(--secondary-color);
  border-bottom: 1px solid var(--secondary-color);
  font-size: 1.5rem;
}

ul.account__menu.c-account__menu li.account__menu--list a{
  font-size: 1.4rem !important;
  font-weight: 600 !important;
}

.account__details--link:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.new__address--btn {
  padding: 0 2.5rem;
}

@media only screen and (min-width: 992px) {
  .new__address--btn {
    font-size: 1.5rem;
  }
}

.account__details--footer {
  margin-top: 2rem;
}

.account__details--footer__btn {
  background: var(--white-color);
  border: 1px solid var(--black-color);
  padding: 0 2.5rem;
  height: 4rem;
  line-height: 3.8rem;
  border-radius: 2.5rem;
  margin-right: 1rem;
  font-size: 1.5rem;
}

.account__details--footer__btn:last-child {
  margin-right: 0;
}

.account__details--footer__btn:hover {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.account__welcome--text {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

@media only screen and (min-width: 992px) {
  .account__welcome--text {
    font-size: 1.8rem;
    margin-bottom: 3rem;
  }
}

.account__content--title {
  font-weight: 600;
  font-size: 1.8rem !important;
}

.account__table {
  width: 100%;
  border: 1px solid var(--border-color2);
  border-spacing: 0;
  border-bottom: 0;
}

@media only screen and (max-width: 479px) {
  .account__table {
    border: 0;
  }
}

@media only screen and (max-width: 767px) {
  .account__table--header {
    display: none;
  }
}

.account__table--header__child--items {
  text-align: left;
  border-bottom: 1px solid var(--border-color2);
  padding: 0.5rem 0.8rem !important;
  font-size: 1.5rem;
  background-color: var(--bg-light-color) !important;
}

.account__table--header__child--items:last-child {
  text-align: left;
}

@media only screen and (min-width: 1200px) {
  .account__table--header__child--items {
    font-size: 1.6rem;
    padding: 1.7rem 1.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .account__table--body.mobile__none {
    display: none;
  }
}

.account__table--body.mobile__block {
  display: none;
}

@media only screen and (max-width: 767px) {
  .account__table--body.mobile__block {
    display: block;
  }
}

@media only screen and (max-width: 767px) {
  .account__table--body__child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 2rem;
    /* border-bottom: 1px solid #ddd; */
    padding-bottom: 2rem;
  }
  .account__table--body__child:last-child {
    margin-bottom: 0;
  }
}

.account__table--body__child--items, .c-account__table--body__child--items {
  border-bottom: 1px solid var(--border-color2);
  padding:0.4rem 0.8rem !important;
  font-weight: 500 !important;
}

.account__table--body__child--items.c-account__table--body__child--items{
  padding: 0.8rem 0.6rem !important;
}

.account__table--body__child--items:last-child {
  text-align: left;
}

@media only screen and (max-width: 767px) {
  .account__table--body__child--items {
    padding: 0.5rem 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border: 0;
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 479px) {
  .account__table--body__child--items {
    padding: 0.5rem 0;
  }
}

/*
    23. 404 page css
*/
@media only screen and (max-width: 1199px) {
  .error__content--img {
    max-width: 600px;
  }
}

@media only screen and (max-width: 767px) {
  .error__content--img {
    max-width: 450px;
  }
}

@media only screen and (max-width: 575px) {
  .error__content--img {
    max-width: 100%;
    padding: 0 3rem;
  }
}

.error__content--title {
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  line-height: 3rem;
}

@media only screen and (min-width: 576px) {
  .error__content--title {
    margin-bottom: 1.5rem;
    font-size: 2.4rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 768px) {
  .error__content--title {
    margin-bottom: 1.8rem;
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .error__content--title {
    font-size: 3.5rem;
    line-height: 4rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .error__content--title {
    font-size: 3.8rem;
    line-height: 4.3rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .error__content--title {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}

.error__content--desc {
  font-size: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .error__content--desc {
    font-size: 1.6rem;
    line-height: 2.2rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .error__content--desc {
    font-size: 1.7rem;
    line-height: 2.2rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .error__content--desc {
    font-size: 1.8rem;
    line-height: 2.3rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .error__content--btn {
    font-size: 1.6rem;
  }
}

/*
    24. Login page css
*/

.account__login {
  background: #fff;
  padding: 1.4rem !important;
  border-radius: 1.4rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 768px) {
  .account__login {
    padding: 0.75rem !important;
  }
}

@media only screen and (min-width: 992px) {
  .account__login {
    padding: 3rem;
  }
}

.account__login--header__title {
  font-weight: 600;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.8rem;
}

.account__login--header__desc {
  font-size: 1.5rem;
  font-weight: 600;
}

.account__login--input {
  width: 100%;
  height: 4.8rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
}

.phone-input-group {
   border-radius: 0.5rem;
}

.country-code-select {
  height: 4.8rem;
  padding: 0 1.5rem;
  border-radius: 0.5rem 0 0 0.5rem;
}

@media only screen and (min-width: 768px) {
  .phone-input-group,
  .account__login--input,
  .country-code-select {
    height: 5.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .phone-input-group,
  .account__login--input,
  .country-code-select {
    font-size: 1.5rem;
  }
}

.account__login--input:focus {
  border-color: var(--primary-color);
}

.account__login--btn {
  width: 100%;
  border-radius: var(--btn-border-radius) !important;
  font-size: 1.3rem;
}

@media only screen and (min-width: 992px) {
  .account__login--btn {
    font-size: 1.5rem;
  }
}

.account__login--signup__text {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-gray-color);
}

.account__login--signup__text button {
  padding: 0;
  background: inherit;
  border: 0;
  font-weight: 600;
}

.account__login--signup__text button:hover {
  color: var(--primary-color);
}

.account__login--forgot {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 1.5rem;
  padding: 0;
  background: inherit;
  border: 0;
  margin:auto !important;
}

@media only screen and (max-width: 575px) {
  .account__login--forgot {
    margin-top: 0.6rem;
  }
}

.account__login--forgot:hover {
  color: var(--primary-color);
}

@media only screen and (max-width: 767px) {
  .account__login.register {
    margin-top: 6rem;
  }
}

@media only screen and (max-width: 575px) {
  .account__login--remember__forgot {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

@media only screen and (max-width: 575px) {
  .account__login--remember .checkout__checkbox--checkmark {
    top: 0;
    top: 5px;
    -webkit-transform: inherit;
            transform: inherit;
  }
}

.login__remember--label {
  font-size: 1.3rem;
  font-weight: 500;
}

@media only screen and (min-width: 992px) {
  .login__remember--label {
    font-size: 1.5rem;
  }
}

.account__login--divide {
  text-align: center;
  position: relative;
  padding: 1rem 0;
}

.account__login--divide::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.1rem;
  background: var(--border-color2);
  top: 50%;
  left: 0;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

.account__login--divide__text {
  padding: 0 0.8rem;
  background: var(--white-color);
  position: relative;
  font-weight: 500;
  color: var(--light-color);
}

@media only screen and (min-width: 992px) {
  .account__login--divide__text {
    font-size: 1.5rem;
  }
}

.account__social--link {
  height: 4.2rem;
  line-height: 4.2rem;
  padding: 0 2.5rem;
  color: var(--white-color);
  border-radius: 0.5rem;
  font-weight: 600;
  margin-right: 1rem;
}

.account__social--link.facebook {
  background: #4867aa;
}

.account__social--link.facebook:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

.account__social--link.google {
  background: #e94235;
}

.account__social--link.google:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

.account__social--link.twitter {
  background: #55adee;
}

.account__social--link.twitter:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

.account__social--link:last-child {
  margin-right: 0;
}

@media only screen and (min-width: 768px) {
  .account__social--link {
    padding: 0 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .account__social--link {
    padding: 0 3.2rem;
    margin-right: 1.2rem;
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .account__social--link {
    padding: 0 4.5rem;
    margin-right: 2rem;
  }
}

@media only screen and (max-width: 575px) {
  .account__social--link {
    height: 3.5rem;
    line-height: 3.5rem;
    padding: 0 1.3rem;
    font-size: 1.4rem;
  }
}


/* Logo section */

.login-logo-container {
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}


/* LOGO */

.strivl-logo,
.strivl-logo-mobile {
  display: inline-flex;
  align-items: center;
  gap: 3px !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #b18819;
  text-decoration: none;
  user-select: none;
}

.strivl-logo .text,
.strivl-logo .text.text-lg,
.strivl-logo-mobile .text {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
  background: linear-gradient(135deg, #b18819 0%, #d4af37 45%, #b18819 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.strivl-logo .text.text-lg {
   font-size: 32px;
}

.strivl-logo-mobile .text {
  font-size: 24px;
}

.mn-mobile-logo,
.strivl-logo-mobile {
    display: flex;
    cursor: pointer;
    margin-right: 8px;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .strivl-logo,
  .strivl-logo-mobile {
    color: #b18819;
  }
}



/*
    25. Preloader css
*/

.ctn-preloader {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
}

.ctn-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}

.ctn-preloader .animation-preloader .spinner {
  -webkit-animation: spinner 1s infinite linear;
          animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 3px solid #cd853f;
  border-top-color: #f8f8f8;
  height: 2.5em;
  margin: 0 auto 1.5em auto;
  width: 2.5em;
}

.ctn-preloader .loader-section {
  background: var(--white-color);
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.ctn-preloader .loader-section.section-left {
  left: 0;
}

.ctn-preloader .loader-section.section-right {
  right: 0;
}

.loaded .animation-preloader {
  opacity: 0;
  transition: 0.5s ease-out;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -ms-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
}

.loaded .loader-section.section-left {
  -webkit-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  -webkit-transform: translateX(-101%);
          transform: translateX(-101%);
}

.loaded .loader-section.section-right {
  -webkit-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  -webkit-transform: translateX(101%);
          transform: translateX(101%);
}

/* Animación del preloader */
@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

/* Tamaño de portatil hacia atras (portatil, tablet, celular) */
@media screen and (max-width: 767px) {
  /* Preloader */
  /* Spinner cargando */
  .ctn-preloader .animation-preloader .spinner {
    height: 2em;
    width: 2em;
  }
}

@media screen and (max-width: 500px) {
  .ctn-preloader .animation-preloader .spinner {
    height: 3em;
    width: 3em;
  }
}

/*
    28. Privacy policy page css
*/
.privacy__policy--content {
  margin-bottom: 2rem;
}

.privacy__policy--content:last-child {
  margin-bottom: 0;
}

.privacy__policy--content__title {
  font-size: 2rem;
  line-height: 3.5rem;
  margin-bottom: 3rem;
  color:#484848;
}

@media only screen and (min-width: 768px) {
  .privacy__policy--content__title {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .privacy__policy--content__title {
    font-size: 2.5rem;
    line-height: 2.8rem;
    margin-bottom: 1.2rem;
  }
}

.privacy__policy--content__subtitle {
  font-size: 1.6rem;
  line-height: 2.2rem;
  margin-bottom: 1.1rem;
  color:#404040;
}

@media only screen and (min-width: 1600px) {
  .privacy__policy--content__subtitle {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }
}

.privacy__policy--content__desc {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 1200px) {
  .privacy__policy--content__desc {
    font-size: 1.6rem;
  }
}

/* CUSTOM CSS */
.c-login__remember--label{
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text-gray-color);
  margin-bottom: 7px;
  margin-left: 0px;
  line-height: 1.4em;
  padding: 0px;
}

.c-login__section{
  margin-top: 40px;
  background-color: var(--bg-color) !important;
}

.c-error-message{
  color: red;
  line-height: 1em;
  font-weight: 500 !important;
}

.c-border{
  border: 1px solid red !important;
}

/* Custom SweetAlert2 styles */
.swal2-title {
  font-size: 2em !important; /* Adjust the title font size */
}

.swal2-content {
  font-size: 1.5em !important; /* Adjust the content font size */
}

/* Custom class for SweetAlert2 confirm button */
.swal2-confirm {
  font-size:  1.5em !important; /* Adjust the font size as needed */
  padding: 5px 20px; /* Adjust the padding as needed */
  background-color: #3085d6; /* Custom background color */
  color: white; /* Text color */
  border-radius: 5px; /* Rounded corners */
}

/* Custom class for SweetAlert2 cancel button */
.swal2-cancel {
  font-size: 1.5em !important; /* Adjust the font size as needed */
  padding: 5px 20px; /* Adjust the padding as needed */
  background-color: #aaa; /* Custom background color */
  color: white; /* Text color */
  border-radius: 5px; /* Rounded corners */
}

.c-order-history ul li.product__details--tab__list, table.account__table tr th.account__table--header__child--items, table.account__table tr td{
  font-size: 1.3rem !important;
}

.c-error{
  font-size: 1.5rem;
}

 tr.c-a-table td{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 40ch;
}

.c-a-account__content--title{
  font-size: 1.4rem !important;
}

.text-right{
  float:right !important;
  margin-right:2rem;
}

h2.c-a-account__content--title{
  font-size: 1.6rem !important;
}

.c-a-stats-cards .card-title.c-a-stat{
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color:#505050 !important;
}

.c-a-stats-cards .card-title.c-a-desc{
  font-size: 1.4rem !important;
}

.c-a-stat-box{
  border-radius:1rem;
  border: 1px solid #f1f1f1;
}

.c-discount-pc{
  color: var(--secondary-color);
  margin-left: 5px;
  background-color: #f8f8f8;
  padding-left: 4px;
  padding-right: 4px;
}

.c-units-left{
  color:var(--secondary-color);
  font-size: 1.4rem !important;
}

.c-availability{
  font-size: 1.4rem !important;
  color:#808080;
}

.c-promotion-info{
  font-size: 1.3rem !important;
}

.c-current-price{
  font-weight: 600 !important;
  color:#000 !important;
  font-size: 2.2rem !important;
}

.c-product-details-info{
  font-weight: 500 !important;
  font-size: 2rem !important;
}

.section__heading.c-section-heading{
  font-size: 2rem !important;
  color:#383838 !important;
}

.contact__form--label{
  font-weight: 600 !important;
  font-size: 1.4rem;
}

.c-address-box{
  border:1px solid #ccc;
  border-radius:0.5rem;
}

.c-copyright__content, .copyright__content {
  font-size: 1.1rem !important;
}

/* Photo CSS */
.upload-container {
  max-width: 600px;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.upload-area {
  border: 1px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  background-color: #f8f8f8;
}

.drop-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

#preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.preview-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

.submit-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.submit-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Multiple Upload */
.drop-zone {
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
}
.drop-zone.dragover {
  background-color: #e9e9e9;
}
.file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.file-preview div {
  position: relative;
  display: inline-block;
}
.file-preview img, .file-preview video {
  max-width: 100px;
  max-height: 100px;
}
.remove-button {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 0, 0, 0.7);
  color: white;
  border: none;
  cursor: pointer;
  padding: 2px 5px;
  font-size: 12px;
}

.c-secondary-color{
  color:#ee2761;
}

.c-secondary-bgcolor{
  color:#ee2761;
}

.c-amount-to-pay{
  font-size:1.6rem;
  font-weight:600;
  color:#ee2761;
}

.c-view{
  color:#ee2761;
}

.c-view:hover{
  color:#ee2761;
  background-color: #f8f8f8;
}

.wishlist__cart--btn{
  border-radius: 10px;
}

.c-footer__widget--title{
  font-size: 1.3rem !important;
  font-weight: 600;
  padding-bottom: 0px;
  margin-bottom: 5px;
}

.c-bluish{
  color:#2680EB;
}

.c-buy--now__btn, .c-back-to-payments{
  font-size:1.5rem;
  border-radius:5rem;
  opacity: 0.9;
}

.c-buy--now__btn:hover, .c-back-to-payments:hover{
  border-radius:5rem;
  background-color:#ee2761;
  opacity: 1;
}

.c-success{
  color:green;
}

.c-error{
  color:red;
}

.c-checkout-order-number{
  font-weight: 600;
  font-size: 1.6rem;
}

.c-checkout-subtotal-title{
  font-size: 1.5rem;
  color:#000;
}

.c-payment-address{
  font-size: 1.4rem;
}

.c-checkout-total-footer{
  font-size: 1.6rem;
  font-weight: 600;
}

.c-checkout-discount{
  font-size: 1.5rem;
}

.c-header{
  margin-top: 20px;
}

.c-payment-message{
  font-weight: 600;
  font-size: 2.4rem;
}

.c-bg-color{
  background-color:#fff !important;
}

.c-bg-color-2{
  background-color: #F1F2F6 !important;
}

.c-bg-container,
.single__widget.c-bg-container,
.product__grid--inner.c-bg-container {
  background-color: inherit !important;
  padding: 0 !important;
}

.c-bg-container-p-0{
  padding: 0px 0px 14px 0px !important;
}

.c-bg-white-container{
  background-color:#fff;
  padding:1rem;
  border-radius:1rem;
}

.c-product__details--tab__inner{
  background-color:var(--light-color) !important;
}

.product3__section--container, .c-container-bg{
  border:1px solid #F0F0F0 !important;
  background-color: #fff !important;
  padding: 1rem 2rem !important;
  border-radius: 1rem !important;
}

.product__section--style3{
  margin-top: 10px;
  margin-bottom: 10px;
}

.c-section--padding {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.c-bg-white{
  background-color: #fff !important;
}

.c-cart-items{
  padding: 2rem !important;
  border-radius: 1.5rem !important;
  background-color: #fff;
}

.c-subtotal{
  font-size: 1.5rem;
  font-weight: 600;
  color: #505050;
}

.c-grandtotal{
  font-size: 1.8rem;
  font-weight: 600;
}

.c-description{
  color:#808080;
}

.c-a-description{
  color:#808080;
  font-size: 1.4rem;
}

.c-c-container {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.c-a-row{
  padding-top:3rem;
}

.c-a-view-items{
  font-size: 1.5rem !important;
  text-decoration: underline;
}

.c-reviews__comment--content__title{
  font-weight: 500;
  font-size: 1.4rem;
}

.c-user-thumbnail{
  width:6.4rem;
  height:6.4rem;
  object-fit: cover;
  border-radius:10rem;
}

.c-a-border{
  border: 1px solid #f1f1f1;
}

.c-btn-cancel{
  border: 1px solid #ccc !important;
  border-radius: 0.5rem !important;
  background-color: #ccc !important;
}

.c-btn-cancel:hover{
  opacity: 0.9 !important;
}

.c-settings select{
  padding: 0.6rem !important;
}

.c-svg-setting-edit{
  float: right !important;
}

.c-account__details--desc {
  color: var(--text-gray-color);
  line-height: 3rem;
  margin-bottom: 2rem;
  font-size: 1.6rem;
}

.c-setting-value{
  margin-left: 20px;
}

ul.c-list-policy li{
  list-style-type:disc !important;
}

ul.c-list-policy li{
  line-height:3.5rem;
  font-size: 1.4rem;
  margin-left: 30px;
}

ul.c-list-policy li strong{
  color:#383838;
}

svg.c-edit-address{
  fill:#505050;
}

svg.c-edit-address:hover{
  fill:#2680EB;
}

.show {
  display: flex;
}

.hidden {
  display: none;
}

.c-header{
  text-transform: uppercase !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding-bottom: 0.6rem !important;
  font-size: 1.4rem !important;
  background-color: #fff !important;
}

/* Start Prediction List CSS */
.scroll-list {
  width: 100%;
  margin: 0 auto !important;
  display: flex;
  flex-direction: column !important;
  gap: 5px;
  /* padding: 15px 10px 80px !important; */
  background-color: inherit !important;
  border-radius: 10px;
  height: 500px !important;
  overflow-y: auto !important;
  position: relative !important;
  scroll-behavior: smooth !important;
  overflow-anchor: none !important;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  border: none !important;
  padding-bottom: 200px;
}

.scroll-list::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

.prediction-stats-list {
  width: 100%;
  max-width: 600px;
  margin: 0 auto !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 1.5rem 1rem !important;
  background-color: #fff !important;
  border-radius: 10px;
}

.c-bet-actions{
  margin-bottom: 0.4rem !important;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.prediction-info {
  flex-grow: 1;
}

.jp-name {
  font-size: 1.4rem !important;
  display: block;
  color: var(--text-gray-color) !important;
}

a.jp-name:hover{
  text-decoration: underline;
}

span.jp-name,
.prediction-info span.jp,
.prediction-info .c-prediction-date {
  cursor: default;
}

.bet {
  font-size: 1.6rem;
  color: #333;
  font-weight: 600;
  cursor: pointer;
}

.bettor {
  font-size: 1.2rem;
  color: #181818;
  font-weight: 600;
  /* margin-top: 5px; */
  /* display: block; */
  /* padding: 0px !important; */
  line-height: 1.1rem !important;
}

.c-date{
  font-size: 1.1rem;
  font-weight: 500;
  color: #303030 !important;
}

.betting-actions {
  display: flex;
  align-items: center;
  /* gap: 10px; */
  /* margin-left: auto; */
  margin-top: 0px;
}

.icon-btn {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #555;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .prediction-item {
      flex-direction: column;
      align-items: flex-start;
  }

  .betting-actions {
      width: 100%;
      justify-content: space-between;
      margin-top: 10px;
  }

  .icon-btn {
      width: 48%;
      justify-content: center;
  }
}
/* End Prediction List CSS */

.textbox,
.textarea,
.selectbox {
  width: 100%;
  padding: 10px;
  margin: 0px 0px 10px 0px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 1.6rem;
}

.textbox:focus,
.textarea:focus {
  opacity: 0.9 !important;
  outline: none !important;
}

.modal-actions {
  display: flex;
  justify-content:right;
  margin-top: 20px;
}

.save-btn-jp {
  background: linear-gradient(135deg, #00a86b 0%, #008553 100%);
  color: white;
  padding: 5px 15px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.3rem;
}

.save-btn-jp{
  padding: 6px 20px;
  font-size: 1.4rem;
  margin-top: 10px !important;
}

.save-btn:hover {
  opacity: 0.9;
}

.close-btn {
  background-color: #ccc;
  color: white;
  padding: 5px 15px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.3rem;
  margin-right: 3px;
}

.c-modal-form{
  margin-top: 20px !important;
}

.c-modal-form label{
  font-size: 1.3rem !important;
}
/* End Modal CSS */

.related__post--items {
  height: 1.8rem !important;
  line-height: 1.8rem !important;
  font-size: 1.1rem !important;
}

.c-not-found, .c-not-found-2{
  font-size: 1.4rem !important;
  padding:4rem 3rem !important;
  text-align:center !important;
  background-color: inherit !important;
}

.c-not-found-2{
  background-color:inherit !important;
}

.c-published{
  color:green;
  font-size: 1.2rem;
}

.c-not-published{
  color:red;
  font-size: 1.2rem;
}

.c-trending, .c-top-week{
  color: #f0ad4e;
  font-size:1.2rem;
}

.c-bg-green{
  background-color: #d2fba4;
}

.c-bg-pink{
  background-color: #ffcbc4 !important;
}

.c-bg-gold{
  background-color: #f0ad4e !important;
}

.c-text-gold{
  color: #f0ad4e !important;
}

.account__table--body__child--items h2{
  font-size: 1.8rem !important;
}

.c-post-date{
  font-size:1.1rem;
  color:#808080;
}

.account__table--body__child, .account__table--body__child.c-account__table--body__child{
  /* border-bottom: 1px solid #F0F0F0; */
  border-radius: 0px !important;
  padding: 0px !important;
}

.hstack .fa {
  color: #A0A0A0 !important;
}

.ps-2, a.link-info{
  color:#55adee !important;
  font-size: 1.4rem !important;
}

main.main__content_wrapper.c-panel .btn{
  margin-bottom: 0.5rem !important;
}

select.form-control {
  font-size: 1.4rem !important;
}

.c-stat-desc{
  font-size: 1.4rem !important;
}

.c-stat-val{
  font-size: 2.8rem !important;
}

.c-avatar{
  object-fit: cover;
  border: 1px solid #F0F0F0;
  background-color: #f8f8f8;
}

/* Social Share CSS */
ul.dropdown-menu.c-dropdown-menu{
  border-radius: 0.7rem !important;
  z-index: 9999 !important;
}

ul.dropdown-menu.c-dropdown-menu li{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

ul.dropdown-menu.c-dropdown-menu li a.dropdown-item{
  font-size: 1.2rem !important;
  gap: 1rem !important;
}

ul.dropdown-menu.c-dropdown-menu li a.dropdown-item svg {
  width: 1.4rem !important;
  height:1.4rem !important;
}

.c-game{
  font-size: 1.4rem !important;
  color:#000 !important;
}

/* Matches */
.list-group span{
  border: none !important;
  color:#000 !important;
  text-transform: capitalize !important;
}

.list-group small{
  color:#000 !important;
}

.c-group-list{
  margin-bottom:0.1rem !important;
  background-color:var(--bg-color) !important;
  padding:0.1rem !important;
  margin-bottom:0px !important;
  margin-top:0px !important;
  border-bottom: 1px dashed #B8B8B8 !important;
}

.list-group-item-action{
  background-color: #fff !important;
  padding:0.5rem !important;
  padding-bottom:0px !important;
}

.c-list-group-item-action-bg{
  padding:0.5rem !important;
  padding-bottom:0px !important;
  margin-bottom:0px !important;
  background-color: inherit !important;
  line-height: 1.0em;
}

.c-bg-add{
  background-color: orange !important;
  border: 0px solid #fff !important;
  color:#000 !important;
  font-weight: 500 !important;
}

.c-no-underline{
  text-decoration: none !important;
}

.c-no-underline:hover{
  text-decoration: none !important;
}

ul.c-list-group{
  padding: 0px !important;
  margin: 0px !important;
  /* border: 1px solid #383838 !important; */
  border-radius: 1rem !important;
}

ul.c-list-group-about li {
 color:#000 !important;
  font-size: 1.5rem !important;
}

.c-no-matches {
  color:#333 !important;
  font-size: 1.3rem !important;
  margin:1rem !important;
  padding-bottom:2rem !important;
}

 .c-text-overflow{
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.list-group-item.c-list-group-item{
  border: none !important;
}

.c-badge-likes{
  color:#888888 !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
}

span.c-pick{
  font-size: 1.2rem !important;
  color:#282828 !important;
  text-transform:capitalize !important;
  font-weight: 600 !important;
  text-align: left !important;
}

.c-card-rounded{
  border-radius: 2.5rem !important;
}

.c-stats-card{
  background-color: #fff;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: none !important;
}

.c-view-prediction{
  margin-left: 0.2rem !important;
  font-size: 1.5rem !important;
  color: #808080 !important;
}

.c-btn-bg,
.c-btn-bg-light{
  background: var(--secondary-color);
  color:#fff !important;
  border-radius: 2.5rem !important;
}

.c-btn-bg-light{
  background-color: #E8E8E8 !important;
  color: #282828 !important;
}

form.c-modal-form label,
form.c-modal-form .selectbox,
form.c-modal-form .textarea {
  font-size: 1.3rem !important;
}

.breadcrumb__text.c-breadcrumb__text{
  margin-left: 0.1rem !important;
  font-size: 1.5rem !important;
}

.main__content_wrapper.c-panel .my__account--section{
  background-color: #fff !important;
}

.main__content_wrapper{
  /* background-color:#F3F4F8 !important; */
  background-color:var(--bg-color) !important;
}

.main__content_wrapper.c-panel .my__account--section{
  padding-top: 0px !important;
}

.account__table--body__child svg{
  cursor: pointer !important;
}

.c-border-radius{
  border-radius: 2.5rem !important;
}

.pd-header-content .badge {
  padding: 0.6rem 1.2rem !important;
  font-weight: 600 !important;
}

.badge.text-bg-success, .badge.text-bg-secondary{
  background-color: #4F7942;
  color:#fff;
  font-size: 1.1rem !important;
  border-radius: 30px;
  font-weight: 600 !important;
}

.badge.text-bg-secondary{
  background-color: #909090;
}

.badge.text-bg-danger{
  background-color: #989898;
  color:#fff;
  font-size: 1.2rem !important;
  border-radius: 30px;
  opacity: 0.9;
  font-weight: 500 !important;
}

.c-header__select--inner{
  background-color: #f8f8f8 !important;
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

/* Start FAQ CSS */
.c-container-about,
.c-container-contact,
.c-container-ad {
  /* max-width: 800px; */
  margin: 0 auto;
  background-color: var(--bg-color);
  padding: 20px;
  border-radius: 15px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  font-family: var(--font-jost) !important;
}
.c-container-about h1,
.c-container-about h2,
.c-container-about h3 {
  color: #333;
}
.c-container-about h1,
.c-container-ad h1{
  font-size: 2em;
  margin-bottom: 20px;
}
.c-container-about h2,
.c-container-ad h2 {
  font-size: 1.5em;
  margin-top: 30px;
}
.c-container-about h3,
.c-container-ad h3 {
  font-size: 1.2em;
  margin-top: 20px;
}
.c-container-about p {
  margin: 10px 0;
  font-size: 1.4rem !important;
}

.c-container-about ul li{
  font-size: 1.4rem !important;
  list-style-type:disc !important;
  margin-left: 20px !important;
  line-height: 2.0rem !important;
}
/* End FAQ CSS */

/* Start Ad */
.c-container-ad {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-size: 1.4rem;
}
.c-container-ad h1 {
  color: #333;
}
.c-container-ad h2 {
  color: #555;
  font-size: 2rem;
}
.c-container-ad p {
  color: #555;
}
.c-container-ad .ad-options {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}
.c-container-ad .ad-box {
  background-color: var(--bg-color);
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  width: 33.333%;
  text-align: center;
  margin-right: 10px !important;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}
.c-container-ad .ad-box h3 {
  margin-bottom: 15px;
  color: #333;
}
.c-container-ad .ad-box p {
  color: #666;
  font-size: 1.4rem !important;
}
.c-container-ad .cta {
  text-align: center;
  margin-top: 30px;
}
.c-container-ad .cta a {
  display: inline-block;
  background-color:var(--secondary-color);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}
.c-container-ad .cta a:hover {
  background-color:var(--secondary-color);
}

.c-container-ad ul li {
  padding: 5px 4px;
}
/* End Ad */

/* Start About Us CSS */
.c-container-about {
  max-width: 800px;
  margin: 20px auto;
  background-color: var(--bg-color);
  padding: 0 20px 20px 20px;
  border-radius: 15px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  font-family: var(--font-jost) !important;
}

.c-container-about .mission, .c-container-about .services {
  margin-top: 40px;
}

.team-member h3 {
  margin: 0 0 5px;
  font-size: 1.2em;
}

.team-member p {
  margin: 5px 0;
  font-size: 1.4rem !important;
}

.c-container-about ul li a {
  font-size: 1.4rem !important;
  line-height: 2.2rem;
  color:#282828;
}

.c-container-about ul li a:hover,
.c-container-about ul li a svg path:hover {
  fill:var(--secondary-color) !important;
}

.c-container-about svg {
  color:#282828 !important;
}
/* End About Us CSS */

.c-product__view--search__btn {
  background: var(--secondary-color);
  color: var(--white-color);
  height: 60px;
  width: 4rem;
  border-radius: 0 0.5rem 0.5rem 0;
  line-height: 4.8rem;
}

.c-product__view--search__btn:hover {
  background: var(--primary-color);
}

.c-search{
  background: var(--secondary-color);
  border: none;
  border-radius: 5px;
  padding: 8px 10px;
}

/* Container for image and edit icon */
.image-container {
  position: relative;
  border-radius: 100%;
}

/* Image styling */
.image-container img {
    width: 100%;
    height: 100%;
    min-width: 150px;
    min-height: 150px;
    display: block;
    object-fit: cover;
    border-radius: 10px;
}

/* Edit icon in the center */
.edit-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 2.0em;
    /* background-color: rgba(0, 0, 0, 0.5); */
    padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}

#fileInputContainer{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* File input styling */
.file-input-container {
    display: none;
    margin-top: 10px;
    text-align: center;
}

/* Style file input button */
.file-input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

/* Custom label styling for file input */
.file-input-label {
    padding: 10px;
    background-color: #000;
    border-radius: 100%;
    cursor: pointer;
    opacity: 0.7;
    width: 50px;
    height: 50px;
    text-align: center;
}

/* File name display styling */
.file-name {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

.large-textarea {
  width: 100%; /* Make the textarea full width */
  height: 160px; /* Set the desired height */
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.page__title, .page__title-h{
  font-size: 2rem;
}

@media only screen and (max-width: 575px) {
  .page__title, .page__title-h {
    text-align: center;
  }
}

.page__title-h{
  text-transform: capitalize !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding-bottom: 0.6rem !important;
  font-size: 1.5rem !important;
  /* background-color: #fff !important; */
}

.c-page__title-h{
  /* padding-left: 13px !important; */
  text-align: left !important;
  font-size: 1.6rem !important;
}

.c-notification-title{
  font-size: 1.8rem !important;
}

.pull-right{
  float: right !important;
}

.pull-left{
  float: left !important;
}

.c-form{
  font-size: 1.4rem !important;
}

.c-primary__btn{
  font-weight: var(--body-line-height);
  display: inline-block;
  padding: 5px;
  letter-spacing: 0.2px;
  border-radius: var(--btn-border-radius) !important;
  background: var(--primary-color);
  color: var(--white-color);
  border: 0;
  font-size: 1.3rem;
  text-align: center;
  margin-top: 5px;
  font-weight: 600 !important;
}

.c-primary__btn:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

.c-btn-buy,
.c-btn{
  background-color:var(--secondary-color);
  border-radius:var(--btn-border-radius) !important;
  text-align: center;
  padding: 10px;
  font-size: 1.4rem;
  font-weight: 500 !important;
}

.c-btn{
  background-color: #A8A8A8 !important;
  border: none !important;
  color:#fff;
}

.c-btn-buy:hover,
.c-btn:hover{
  background: var(--primary-color);
  border-radius:25px;
  color:#fff;
}

.c-btn:hover{
  opacity: 0.9;
}

.c-alert-status{
  text-align: center !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  padding: 50px;
  background-color: #f8f8f8;
  border: none;
  border-radius: 15px;
}

@-webkit-keyframes f {
	0% {
		background-position: 40px 0;
	}

	to {
		background-position: 0 0;
	}
}

@keyframes f {
	0% {
		background-position: 40px 0;
	}

	to {
		background-position: 0 0;
	}
}

.c-banner-img{
  height: 100px;
  object-fit: cover;
  width: 50%;
}

svg.c-ad-info path:hover{
  fill:var(--primary-color) !important;
}

.c-alert-danger{
  font-weight: 500 !important;
  font-size: 1.4rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.c-ad-plan-amount{
  font-size: 2.4rem !important;
  font-weight: 600 !important;
}

.c-ad-show{
  margin-left: 0.5rem !important;
}

.center{
  text-align: center !important;
}

/* Ads CSS */
.ads-container {
  /* width: 300px;
  height: 400px; */
  overflow-y: hidden;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.ads-container small{
  margin-left: 10px;
  margin-right: 10px;
}

.ads-container .fa-times{
  float: right;
  margin-right: 10px;
  margin-top: 5px;
  font-size: 14px;
  cursor: pointer;
}

.ad-promo {
  text-align: left;
  padding: 0px;
}

.ad-promo img {
  width: 100%;
  height: 150px;
  object-fit: cover !important;
  border-radius: 0px;
}

.ads-container h3 {
  margin-top: 10px;
  font-size: 1.2em;
  padding-left: 10px;
  padding-right: 10px;
}

.ads-container p {
  font-size: 1.0em;
  color: #555;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.9rem;
  margin-bottom: 8px;
}

.c-ad-btn{
  margin:0px 5px 5px 5px;
  padding:5px 20px;
  font-size:1.3rem;
  border-radius:2.5rem;
  background-color: #F0F0F0;
  color:#606060;
  text-align: center;
  border: none;
}

.c-ad-btn:hover{
  color: var(--primary-color);
  text-decoration: underline;
}

.fas.c-fa-external-link-alt{
  margin-top: 6px;
  float: right;
  font-size: 12px;
}

.c-ad-seach-box{
  border: 1px solid #f1f1f1 !important;
  border-radius: 10px;
}

.cursor{
  cursor: pointer !important;
}

.c-tab_content{
  background-color: #fff !important;
  padding: 10px !important;
  border-radius: 15px !important;
  border: 1px solid #E8E8E8 !important;
}

.primary__btn{
  border-radius: var(--btn-border-radius) !important;
}

.error {
  display: none;
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  padding-top:0.1rem !important;
  padding-bottom:0.1rem !important;
}

.c-container{
  background-color: #FCFCFC;
  padding: 10px;
  border-radius: 15px;
  border:1px solid #f8f8f8;
}

.border-none{
  border: none !important;
}

#error_message{
  color:red;
}

#text_num{
  font-size: 12px;
  color:var(--secondary-color);
  padding-left: 70px;
}

.c-unfollow{
  background-color: #fff !important;
  color:#555 !important;
  border: 1px solid #555 !important;
  font-weight: 600 !important;
}

.c-unfollow:hover{
  color:var(--secondary-color);
}

button.c-follow-btn{
  border: 1px solid #0C141A;
  padding:0.5rem 1.5rem !important;
  font-size:1.5rem !important;
  border-radius: 2.5rem !important;
  font-weight: 600 !important;
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  /* width: 100px; */
  text-align: center;
}

button.c-follow-btn:hover{
  opacity: 0.9;
}

button.c-unfollow:hover{
  color: red !important;
}

button.c-unfollow:hover::before {
  content: "Unfollow";
}

button.c-unfollow:hover span {
  display: none;
}

.c-follow{
  background-color:#0C141A !important;
  color:#fff !important;
  border: 1px solid var(--secondary-color);
}

.c-back-arrow{
  padding:0.7rem 0.8rem !important;
  border-radius:10rem !important;
  background-color: #F0F0F0 !important;
}

.c-back-arrow:hover{
  background-color: #E0E0E0 !important;
  padding:0.7rem 0.8rem !important;
  border-radius:100% !important;
}

.m-10{
  margin: 10px !important;
}

.c-follow-thumbnail{
  border-radius: 100%;
  width: 4.8rem !important;
  height: 4.8rem !important;
  object-fit: cover;
}

.c-follow-btn.c-list-follow-btn{
  padding: 0 0.6rem;
  height: 3.8rem;
}

.c-flex-center{
  justify-content: center !important;
  align-items: center !important;
}

.c-last-prediction{
  font-weight: 600 !important;
}

.container-filter-mobile{
  display: none;
}

@media only screen and (max-width: 576px) {
  .container-filter-mobile{
    display: block;
  }

 .header__menu--items {
   margin-right: 1rem !important;
   position: relative;
  }

  .scroll-list{
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
  }
}

/* Tooltip */
.tooltip-content {
  display: none;
  position: absolute;
  background-color: #fff;
  color: #282828;
  padding: 15px;
  border-radius: 8px;
  z-index: 1000;
  box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.3);
  font-size: 1.4rem;
  text-align: left;
  width: 250px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.tooltip-content.top::after, .tooltip-content.bottom::after {
  content: '';
  position: absolute;
  left: 20px;
  border-style: solid;
}

.tooltip-content.top::after {
  bottom: -10px;
  border-width: 10px 10px 0;
  border-color: #333 transparent transparent transparent;
}

.tooltip-content.bottom::after {
  top: -10px;
  border-width: 0 10px 10px;
  border-color: transparent transparent #333 transparent;
}

.tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tooltip-body {
  margin-top: 10px;
}

.username {
  color: #808080;
  font-size: 1.2rem;
  display: block;
  padding: 0px;
  line-height: 1.6rem;
  margin-bottom: 3px;
}

.followers-link, .following-link {
  font-size: 1.2rem;
  color:#000;
  text-decoration: none;
}

.tooltip-content .description {
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 1.9rem;
}

.name{
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.8rem;
  display: block;
  margin-bottom:2px;
  padding: 2px;
}

.tooltip-content .description {
  margin-top: 3px !important;
}

.count {
  font-size: 1.3rem;
}

.c-follower, .c-following{
  font-size: 1.4rem !important;
}

.w-100{
  width: 100% !important;
}

.modal-header h5.modal-title {
  font-weight: 600 !important;
  color:#000 !important;
  font-size: 1.6rem !important;
}

.modal-footer .btn.c-close-btn{
  padding: 0.7rem 1.4rem !important;
  border-radius: 2.5rem !important;
  font-size: 1.3rem !important;
  background-color: #808080 !important;
  border: 1px solid #808080 !important;
}

.c-modal-footer{
  border: none !important;

}

.c-heading-container{
  align-self: center !important;
}

.heading-container{
  margin-bottom: 0.7rem !important;
}

.c-content-heading {
  font-size: 2.2rem !important;
  margin-bottom: 0.7rem !important;
  line-height: 2.5rem !important;
}

.c-content-heading.c-content-heading-mb{
  margin-bottom:1.5rem !important;
}

.c-content-subheading{
  font-size: 1.6rem !important;
  color: #000 !important;
  margin-top: 0px !important;
  line-height: 2.5rem !important;
}

.c-back-arrow-to-feed{
  padding:0.7rem 0.8rem !important;
  border-radius:10rem !important;
  background-color: #F0F0F0 !important;
}

.c-back-arrow-to-feed:hover{
  background-color: #E0E0E0 !important;
  padding:0.7rem 0.8rem !important;
  border-radius:100% !important;
}

table thead{
  border-bottom: 1px solid #F0F0F0 !important;
}

.c-ad-content{
  font-size:1.2rem !important;
  font-weight:500 !important;
  color:#505050 !important;
  line-height: 1.9rem !important;
}

a.c-ad-content:hover{
  text-decoration: none !important;
}

.c-ad-actions a {
  background-color: #f8f8f8 !important;
  padding:0.1rem 0.6rem !important;
  border-radius: 0.5rem !important;
}

.c-ad-actions a:hover {
  background-color: #F5F5F5 !important;
}

.c-container-fixed {
  height: 500px !important; /* Adjust the height to fit within the screen */
  overflow-y: auto !important; /* Enable vertical scrolling */
  background-color: var(--bg-color);
}

.c-page-container {
  height: 100vh !important; /* 100% of the viewport height */
}

.c-btn-border-radius{
  border-radius: 2.5rem !important;
}

.c-btn-add-ad {
  border-radius: 2.5rem !important;
  background-color: #808080 !important;
  border: 1px solid #808080 !important;
  color: #fff !important;
  white-space: nowrap !important;
}

.c-btn-add-ad span{
  font-size: 1.3rem !important;
  border-radius: 2.5rem !important;
  padding: 0.3rem 1rem !important;
  font-weight: 600 !important;
}

.c-btn-add-ad:hover{
  opacity: 0.9;
}

.c-table-container-border{
  border: 1px solid #F0F0F0 !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem !important;
  background-color: #fff !important;
}

.c-content-spacer{
  margin-top:2.5rem !important;
  margin-bottom:2.5rem !important;
  background-color:inherit !important;
}

.c-hr{
  background-color:inherit !important;
  margin-top:1rem !important;
  margin-bottom:1rem !important;
}

h2.account__content--title{
  margin-bottom: 2rem !important;
}

/*  */
.scrollable-container {
  overflow-y: auto !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
  max-height: 450px !important;
  padding: 10px !important;
  border-radius: 6px !important;
}

/* Webkit scrollbar for dark theme */
.scrollable-container::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.scrollable-container::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 4px !important;
}

.scrollable-container::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

/* Show dark scrollbar on hover */
.scrollable-container:hover {
  scrollbar-width: thin !important; /* Firefox */
  scrollbar-color: #C0C0C0 var(--bg-color) !important; /* thumb and track color */
}

.scrollable-container:hover::-webkit-scrollbar-thumb {
  background: var(--bg-color) !important; /* gray-600 */
}

.scrollable-container:hover::-webkit-scrollbar-thumb:hover {
  background: var(--bg-color) !important; /* gray-500 */
}

.scrollable-container:hover::-webkit-scrollbar-track {
  background: var(--bg-color) !important; /* gray-900 */
}

.bold{
  font-weight: 600 !important;
}

@media only screen and (max-width: 576px) {
  .chart-container {
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
}

.account__content button.c-btn-close{
  background-color:#F0F0F0 !important;
}

.account__content button.c-btn-close:hover{
  background-color: #E8E8E8 !important;
}

.c-see-more a:hover svg g {
  fill: var(--secondary-color) !important;
  stroke:var(--secondary-color) !important;
  color: var(--secondary-color) !important;
}

ul.c-services-list li a:hover svg {
  fill: var(--secondary-color) !important;
  stroke:var(--secondary-color) !important;
  color: var(--secondary-color) !important;
}

.c-content-heading-container{
  margin-bottom: 20px !important;
}


/* ========== DARK THEME ========== */

/* Dark Theme Styles */
body.dark-theme,
body.dark-theme .main__content_wrapper,
body.dark-theme header.header__section ul.header__mega--menu,
body.dark-theme ul.header__sub--menu,
body.dark-theme ul.header__sub--menu li.header__sub--menu__items a,
body.dark-theme .container-fluid,
body.dark-theme .product__details--tab__section,
body.dark-theme .widget__bg,
body.dark-theme .my__account--section,
body.dark-theme .main__content_wrapper .login__section.c-login__section,
body.dark-theme .c-account__content,
body.dark-theme .scroll-list,
body.dark-theme .mn-left-sidebar,
body.dark-theme .mn-right-sidebar,
body.dark-theme .mn-sidebar-item,
body.dark-theme .sidebar-leaderboard,
body.dark-theme .empty-state,
body.dark-theme .state-container,
body.dark-theme .sideboard-tabs,
body.dark-theme .hm-container,
body.dark-theme .hero,
body.dark-theme .features-section,
body.dark-theme .stat-item,
body.dark-theme .pf-tabs,
body.dark-theme .pf-tab-content-area,
body.dark-theme .pf-tab-content,
body.dark-theme .predictions-section {
  background-color: var(--dark-theme-color) !important;
  color: var(--white-color) !important;
}

body.dark-theme .ctn-preloader .loader-section,
body.dark-theme .c-offcanvas__stikcy--toolbar {
  background-color: var(--dark-theme-color);
  color: var(--white-color) !important;
}

body.dark-theme .c-container-fixed {
  background-color: var(--dark-theme-color);
}

body.dark-theme .product__details--tab__inner {
  background-color: var(--dark-theme-lighter-color) !important;
}

body.dark-theme .c-logo {
  background-color: var(--dark-theme-color) !important;
  color: var(--white-color) !important;
}

body.dark-theme .ctn-preloader .animation-preloader .spinner {
  border-top-color: var(--dark-theme-color);
}

body.dark-theme .ctn-preloader .animation-preloader .txt-loading .letters-loading {
  color: rgba(248,248,248, 0.6);
}

/*  */
body.dark-theme .custom-modal-content,
body.dark-theme .matches-modal-content,
body.dark-theme .pd-matches-container,
body.dark-theme .modal-content,
body.dark-theme .modal-content,
body.dark-theme .selectbox,
body.dark-theme .c-bg-container,
body.dark-theme .tab_content,
body.dark-theme .dropend ul.dropdown-menu li a,
body.dark-theme .c-container-bg,
body.dark-theme .contact-box,
body.dark-theme .ad-box,
body.dark-theme .contact__form--input,
body.dark-theme .mn-mobile-menu,
body.dark-theme .char-counter,
body.dark-theme .matches-list-section,
body.dark-theme .mdl-modal,
body.dark-theme .mdl-modal-body,
body.dark-theme .payment-summary,
body.dark-theme .mdl-modal-header,
body.dark-theme .mn-dropdown-header,
body.dark-theme .mdl-modal-footer,
body.dark-theme .adv-modal-content,
body.dark-theme .adv-modal-header,
body.dark-theme .dropdown-menu-top,
body.dark-theme .adv-modal-footer,
body.dark-theme .modal-body,
body.dark-theme .lb-modal-container,
body.dark-theme .lb-modal-header,
body.dark-theme .prediction-modal-content,
body.dark-theme .modal-content,
body.dark-theme .action-dropdown-menu,
body.dark-theme .payment-modal-content,
body.dark-theme .drawer-header,
body.dark-theme .drawer-body,
body.dark-theme .drawer-footer,
body.dark-theme .prd-share-modal-content,
body.dark-theme .ad-feedback-modal,
body.dark-theme .ad-feedback-modal-body,
body.dark-theme .ad-feedback-modal-footer,
body.dark-theme .share-popup,
body.dark-theme .share-popup-header,
body.dark-theme .adv-modal-content,
body.dark-theme .prd-dropdown-menu,
body.dark-theme .edt-modal-container,
body.dark-theme .edt-modal-container,
body.dark-theme .trn-modal-content,
body.dark-theme .trn-modal-header,
body.dark-theme .trn-modal-footer,
body.dark-theme .c-prediction-box,
body.dark-theme .c-prediction-box input[type='text'],
body.dark-theme .ft-bg-container,
body.dark-theme .ft-newsletter,
body.dark-theme .ft-matches-container,
body.dark-theme .tp-bg-container,
body.dark-theme .dropdown-menu,
body.dark-theme .ad-feedback-option,
body.dark-theme .ntp-dropdown-menu,
body.dark-theme .ib-filters,
body.dark-theme .ib-error,
body.dark-theme .success-navigation-content,
body.dark-theme .success-navigation-header,
body.dark-theme .success-card,
body.dark-theme .success-card-header,
body.dark-theme .success-jackpot-info,
body.dark-theme .trn-table-container,
body.dark-theme .trn-transactions-grid,
body.dark-theme .mn-search-predictions,
body.dark-theme .mn-search-section-title,
body.dark-theme .trn-empty-state,
body.dark-theme .mn-mobile-search-modal-header,
body.dark-theme .mn-mobile-search-body,
body.dark-theme .pl-empty-state,
body.dark-theme .predictions-empty-state,
body.dark-theme .pl-loading-spinner,
body.dark-theme .header-container,
body.dark-theme .pf-error-state,
body.dark-theme .cta-section,
body.dark-theme .feature-card,
body.dark-theme .jackpot-card,
body.dark-theme .floating-card,
body.dark-theme .st-modal-header,
body.dark-theme .st-modal-body,
body.dark-theme .st-modal-actions,
body.dark-theme .st-confirm-content,
body.dark-theme .mb-modal__content,
body.dark-theme .mb-modal__body,
body.dark-theme .mb-message-card,
body.dark-theme .mb-message,
body.dark-theme .mb-filters__header,
body.dark-theme .message-detail-card,
body.dark-theme .message-content,
body.dark-theme .mb-filters__body,
body.dark-theme .trn-detail-grid,
body.dark-theme .trn-mobile-card,
body.dark-theme .trn-card-icon,
body.dark-theme .mn-dropdown-menu,
body.dark-theme .mn-dropdown-footer,
body.dark-theme .mn-message-item,
body.dark-theme .mn-notification-item,
body.dark-theme .ib-message-card,
body.dark-theme .matches-list-section .prd-match-item,
body.dark-theme .pd-matches-container,
body.dark-theme .pd-matches-section {
  background-color: var(--dark-theme-color) !important;
  color: #f8f8f8 !important;
}

body.dark-theme .lb-container,
body.dark-theme .pf-container,
body.dark-theme .pd-container,
body.dark-theme .tp-preview,
body.dark-theme .tp-preview__container,
body.dark-theme .tp-selection--fullwidth,
body.dark-theme .tp-container,
body.dark-theme .tp-support,
body.dark-theme .tp-support__card,
body.dark-theme .lb-user-card.top-3,
body.dark-theme .lb-user-card,
body.dark-theme .lb-header,
body.dark-theme .lb-footer,
body.dark-theme .lb-empty,
body.dark-theme .no-matches-state,
body.dark-theme .sideboard-user-card,
body.dark-theme .sidebar-poll,
body.dark-theme .sbe-sidebar-header,
body.dark-theme .sbe-bettor-item {
  background-color: var(--dark-theme-color) !important;
}

body.dark-theme .lb-container,
body.dark-theme .pf-container,
body.dark-theme .tp-container,
body.dark-theme .mn-dropdown-menu,
body.dark-theme .mdl-modal-header,
body.dark-theme .mn-dropdown-footer,
body.dark-theme .mn-message-item,
body.dark-theme .mn-notification-item,
body.dark-theme .ib-message-card,
body.dark-theme .pd-container {
  border: 1px solid #202020 !important;
}

body.dark-theme .lb-user-card.top-3,
body.dark-theme .lb-user-card {
   border-bottom: 1px solid var(--dark-theme-color) !important;
}

body.dark-theme .prd-match-item {
   background-color: var(--dark-theme-color) !important;
}

body.dark-theme .drawer-footer {
  border-top: 1px solid #262729;
}

body.dark-theme a.ntp-dropdown-item:hover,
body.dark-theme .mn-search-result-item:hover {
   background-color: var(--dark-theme-lighter-color) !important;
}

body.dark-theme .sideboard-user-card:hover,
body.dark-theme .pl-poll-card:hover {
    background: var(--card-bg-dark-hover) !important;
}

body.dark-theme .ntp-dropdown-item.ntp-active {
  background-color: #3b3c3e;
}

body.dark-theme .success-card-header,
body.dark-theme .adv-modal-header,
body.dark-theme .share-popup-header,
body.dark-theme .trn-modal-header,
body.dark-theme .adv-modal-header,
body.dark-theme .adcr-plan-header,
body.dark-theme .mn-search-section-title,
body.dark-theme .mn-mobile-search-modal-header,
body.dark-theme .lb-modal-header,
body.dark-theme .modal-user-profile {
  border-bottom: 1px solid var(--card-border-dark) !important;
}

body.dark-theme .adv-modal-footer,
body.dark-theme .ad-feedback-modal-footer,
body.dark-theme .trn-modal-footer,
body.dark-theme .adv-modal-footer,
body.dark-theme .st-modal-actions,
body.dark-theme .modal-actions {
  border-top: 1px solid var(--card-border-dark) !important;
}

body.dark-theme .mdl-modal-footer {
    border-top: none;
}

body.dark-theme .tp-bg-container {
   border: 1px solid #262729 !important;
}

body.dark-theme .pl-empty-state,
body.dark-theme .pl-loading-spinner {
  border:none;
}

body.dark-theme .dropdown-toggle,
body.dark-theme .trn-mobile-card {
  border-color: #262729 !important;
}

body.dark-theme .payment-summary {
   border: 1px solid #262729 !important;
}

body.dark-theme .c-prediction-box {
   border: 2px solid #3b3c3e !important;
}

body.dark-theme .c-prediction-box input[type='text'] {
    border: none !important;
}

body.dark-theme .trn-mobile-card {
  border-color: #282828 !important;
}

body.dark-theme .cta-section h2,
body.dark-theme .feature-card h3,
body.dark-theme .floating-card strong,
body.dark-theme .section-header h2,
body.dark-theme .mb-filters__title,
body.dark-theme .lb-modal-header h3,
body.dark-theme .modal-achievements-list {
    color: #f8f8f8;
}

body.dark-theme .cta-section p,
body.dark-theme .feature-card p,
body.dark-theme .check-back,
body.dark-theme .section-header p,
body.dark-theme .modal-section-title {
    color: #ccc;
}

body.dark-theme .feature-card {
  border: 1px solid #262729 !important;
}

body.dark-theme .jackpot-meta {
    border-top: 1px solid #282828;
}

/*  */
body.dark-theme .product__items.product__items--grid,
body.dark-theme .offcanvas__header,
body.dark-theme .c-page__title-h,
body.dark-theme .account__login,
body.dark-theme .tooltip-content,
body.dark-theme .tooltip-body .followers-link,
body.dark-theme .tooltip-body .following-link,
body.dark-theme .tooltip-body .description,
body.dark-theme .account__content button,
body.dark-theme .c-scrollable-container-modal,
body.dark-theme .ad,
body.dark-theme .predictive__search--box,
body.dark-theme .ib-empty,
body.dark-theme .ib-message-card--important,
body.dark-theme .ib-error,
body.dark-theme .profile-header,
body.dark-theme .ab-value-card,
body.dark-theme .ab-about-image,
body.dark-theme .ab-match-prediction,
body.dark-theme .tp-advertising-platform,
body.dark-theme .adi-section,
body.dark-theme .adi-sidebar__card,
body.dark-theme .adgd-guide-section,
body.dark-theme .adgd-policies,
body.dark-theme .adpo-policies-nav,
body.dark-theme .adpo-policy-section,
body.dark-theme .adpo-policies-sidebar__card,
body.dark-theme .ntp-empty-state,
body.dark-theme .ntp-list,
body.dark-theme .ntp-loading-state,
body.dark-theme .pricing-card,
body.dark-theme .pricing-card__features-compact,
body.dark-theme .prd-card,
body.dark-theme .prediction-card,
body.dark-theme .ad-container,
body.dark-theme .ad-placeholder,
body.dark-theme .ad-hidden-message,
body.dark-theme .poll-card,
body.dark-theme .card,
body.dark-theme .card-header,
body.dark-theme .adcr-form-section,
body.dark-theme .top-bettor-section .card,
body.dark-theme .top-bettor-section .card-body,
body.dark-theme .card-body .stats,
body.dark-theme .stats .stat-item,
body.dark-theme .pl-poll-card-featured,
body.dark-theme .pl-voting-section {
  background-color: var(--dark-theme-lighter-color) !important;
}

body.dark-theme .pl-voting-section {
  border: 1px solid #292929 !important;
}

body.dark-theme .ad-hidden-message,
body.dark-theme .lb-modal-container {
  border-color: var(--dark-theme-lighter-color);
}

body.dark-theme .lb-username a,
body.dark-theme .mn-search-loading,
body.dark-theme .mn-search-section-title,
body.dark-theme .mn-search-result-item {
    color: #e8e8e8 !important;
}

body.dark-theme .lb-user-stats {
   background: linear-gradient(to right, #282828, #292929) !important;
   border-color: #333;
}

body.dark-theme .lb-stat-label-small,
body.dark-theme .lb-stat-label,
body.dark-theme .stat-card-minimal__label,
body.dark-theme .pl-stat-label {
   color: var(--dark-theme-label-color) !important;
}

body.dark-theme .lb-stat-value-small,
body.dark-theme .lb-stat-value,
body.dark-theme .stat-card-minimal__value,
body.dark-theme .pl-stat-number {
   color: var(--dark-theme-value-color) !important;
}

body.dark-theme .lb-stats,
body.dark-theme .stat-card-minimal,
body.dark-theme .adg-card,
body.dark-theme .adg-stats,
body.dark-theme .adv-progress-overview,
body.dark-theme .adv-stat-card,
body.dark-theme .adv-progress-details,
body.dark-theme .adv-progress-row,
body.dark-theme .pl-stat-card-small,
body.dark-theme .pl-stat-card,
body.dark-theme .adcr-plan-card,
body.dark-theme .stat-card,
body.dark-theme .engagement-card,
body.dark-theme .achievement-card,
body.dark-theme .achievement-card.locked,
body.dark-theme .achievement-card.unlocked,
body.dark-theme .success-badge,
body.dark-theme .top-bettors .view-profile,
body.dark-theme .lb-jackpot-banner,
body.dark-theme .engagement-stat {
 background-color: var(--dark-theme-lighter-color) !important;
}

/* Icon variants */
body.dark-theme .engagement-icon.likes {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

body.dark-theme .engagement-icon.favorites {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
}

body.dark-theme .engagement-icon.shares {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

body.dark-theme .engagement-icon.comments {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.25);
}

body.dark-theme .stat-card-accent .stat-icon {
    background-color: rgba(114, 9, 183, 0.1);
    color: #7209b7;
}

body.dark-theme .stat-card-success .stat-icon {
    background-color: rgba(46, 196, 182, 0.1);
    color: #2ec4b6;
}

body.dark-theme .stat-value .total-value {
    color: #4361ee;
}

body.dark-theme .stat-value .unique-value {
    color: #7209b7;
}

body.dark-theme .stat-divider {
    color: #adb5bd;
    margin: 0 0.5rem;
}

body.dark-theme .predictions-section .stat-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

body.dark-theme .pfl-stat-item {
  background-color: #282828 !important;
}

body.dark-theme .pfl-stat-item:hover {
  background-color: #303030 !important;
}

body.dark-theme .mn-mobile-search-trending-item {
  background-color: #282828 !important;
}

body.dark-theme .lb-distribution-label {
  background-color: #303030 !important;
  border: 1px solid #292929 !important;
}

body.dark-theme .mn-mobile-search-trending-item:active {
  background-color: #303030 !important;
}

body.dark-theme .mn-mobile-search-trending-item i {
    color:#ccc;
}

body.dark-theme .mn-mobile-search-trending-item span {
    color:#ccc;
}

body.dark-theme .stat-card-minimal,
body.dark-theme .adg-card,
body.dark-theme .adv-progress-overview,
body.dark-theme .adv-stat-card,
body.dark-theme .pfl-stat-item,
body.dark-theme .adv-progress-details,
body.dark-theme .pl-stat-card-small,
body.dark-theme .card,
body.dark-theme .pl-stat-card,
body.dark-theme .adcr-plan-card,
body.dark-theme .stat-card,
body.dark-theme .engagement-card,
body.dark-theme .achievement-card,
body.dark-theme .success-badge,
body.dark-theme .top-bettors .view-profile {
 border: 1px solid var(--dark-theme-lighter-color) !important;
}

body.dark-theme .achievement-card.unlocked {
    border-left: 4px solid #00a86b !important;
}

body.dark-theme .stats .stat-item {
    border-right: 1px solid #282828;
}

body.dark-theme .adv-progress-row,
body.dark-theme .poll-card .list-group .list-group-item,
body.dark-theme .related-poll-item,
body.dark-theme .dropdown-item {
  border: none !important;
}

body.dark-theme .adg-stats {
    border-top: 1px solid #303030;
    border-bottom: 1px solid #303030;
}

body.dark-theme .sideboard-user-card {
  border-bottom: 1px solid var(--dark-theme-lighter-color) !important;
}

body.dark-theme .ad-title,
body.dark-theme .mn-search-result-title strong {
   color: #f8f8f8 !important;
}

body.dark-theme .ad-description{
  color: #ccc !important;
}

body.dark-theme .ad-feedback-option:hover {
  background-color: #333 !important;
}

body.dark-theme .account__login--divide::before {
  background: #303030 !important;
}

body.dark-theme .lb-tabs,
body.dark-theme .lb-controls {
   border-bottom: 1px solid #303030;
}

/*  */

body.dark-theme .char-counter span {
  color: #808080 !important;
}

body.dark-theme .prd-match-team,
body.dark-theme .prd-match-date {
  color: #BEBEBE !important;
}

body.dark-theme .c-bg-container{
  border: 1px solid #282828 !important;
}

body.dark-theme .c-bet-list-container-border{
  border: 1px solid var(--dark-theme-lighter-color) !important;
}

 body.dark-theme .c-username-follow{
  color: #B8B8B8 !important;
 }

 body.dark-theme ul.c-services-list li a{
  color: #ccc !important;
 }

 body.dark-theme ul.c-services-list li a svg{
  fill:#ccc !important;
 }

body.dark-theme ul.c-services-list li a:hover svg,
body.dark-theme ul.c-services-list li a:hover {
  fill: var(--secondary-color) !important;
  stroke:var(--secondary-color) !important;
  color: var(--secondary-color) !important;
}

body.dark-theme .c-see-more svg g {
  fill: #B8B8B8 !important;
  stroke:#B8B8B8 !important;
  color:#B8B8B8 !important;
}

body.dark-theme .c-see-more a:hover svg g {
  fill: var(--secondary-color) !important;
  stroke:var(--secondary-color) !important;
  color: var(--secondary-color) !important;
}

 body.dark-theme .close-btn.close-modal,
 body.dark-theme .save-btn-jp {
  background-color: #303030;
}

body.dark-theme .c-settings .c-item {
  color: #fff;
}

body.dark-theme .c-settings .c-value{
  color: #f8f8f8;
}

body.dark-theme .c-content-heading-container p.c-content-subheading{
  color: #ccc !important;
}

body.dark-theme .c-terms-items-side a,
body.dark-theme .c-terms-items-side span {
  color: #B8B8B8 !important;
}

body.dark-theme .trn-items-per-page,
body.dark-theme .trn-pagination-info,
body.dark-theme .trn-summary-text {
  color: #9b9b9b !important;
}

body.dark-theme hr.modal-hr{
  border: none !important;
  color: var(--dark-theme-lighter-color) !important;
}

body.dark-theme p.c-or{
  color: #f8f8f8 !important;
}

body.dark-theme .c-ad-undo{
  border: 1px solid #303030;
  background-color: #303030;
  color:#ccc;
}

body.dark-theme ul.header__sub--menu li.header__sub--menu__items svg{
  fill:#f8f8f8 !important;
}

body.dark-theme .c-match,
body.dark-theme .c-ad-content{
  color: #f8f8f8 !important;
}

body.dark-theme .ad{
  border: 2px solid var(--dark-theme-lighter2-color) !important;
  background-color: var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .c-jp-select,
body.dark-theme .header__select--inner.c-header__select--inner,
body.dark-theme .c-bg-search,
body.dark-theme .header__select--categories,
body.dark-theme .scrollable-container {
  border:1px solid var(--dark-theme-color) !important;
  background-color: var(--dark-theme-color) !important;
 }

/*  */
body.dark-theme .scrollable-container {
  overflow: auto !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

/* Webkit scrollbar for dark theme */
body.dark-theme .scrollable-container::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

body.dark-theme .scrollable-container::-webkit-scrollbar-track,
body.dark-theme .matches-list::-webkit-scrollbar-track {
  background: #696969 !important;
}

body.dark-theme .scrollable-container::-webkit-scrollbar-thumb,
body.dark-theme .matches-list::-webkit-scrollbar-thumb {
  background: #333 !important;
}

/* Show dark scrollbar on hover */
body.dark-theme .scrollable-container:hover {
  scrollbar-width: thin !important; /* Firefox */
  scrollbar-color: #696969 var(--dark-theme-color) !important; /* thumb and track color */
}

body.dark-theme .scrollable-container:hover::-webkit-scrollbar-thumb {
  background: #4b5563 !important; /* gray-600 */
}

body.dark-theme .scrollable-container:hover::-webkit-scrollbar-thumb:hover {
  background: #6b7280 !important; /* gray-500 */
}

body.dark-theme .scrollable-container:hover::-webkit-scrollbar-track {
  background: #1f2937 !important; /* gray-900 */
}

body.dark-theme .c-bg-search{
  border:1px solid var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .ad .ad-label {
  color: #f8f8f8 !important;
}

body.dark-theme .ad-close{
  color:#B8B8B8 !important;
  border:1px solid #383838 !important;
  background-color: #383838 !important;
}

body.dark-theme .c-scrollable-container-modal{
  padding:0px;
  margin-bottom:30px;
  background-color:var(--dark-theme-lighter-color) !important;
  border:1px solid #333335 !important;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-theme .comment-section{
  background-color: var(--dark-theme-lighter-color) !important;
  color: #f8f8f8 !important;
}

body.dark-theme .header__search--input::-webkit-input-placeholder {
  color: #C8C8C8;
}

body.dark-theme .header__search--input::-moz-placeholder {
  color: #C8C8C8;
}

body.dark-theme .header__search--input:-ms-input-placeholder {
  color: #C8C8C8;
}

body.dark-theme .header__search--input:-moz-placeholder {
  color: #C8C8C8;
}

body.dark-theme .dropend.icon-btn.share-btn svg{
  fill:#C8C8C8 !important;
}

body.dark-theme a.header__account--btn__text,
body.dark-theme .c-no-notifications{
  color: #f8f8f8 !important;
}

body.dark-theme .replies-container {
  border-left: 2px solid var(--dark-theme-lighter-color);
}

body.dark-theme .icon-btn:hover {
  background:#333335 !important;
}

body.dark-theme .account__content button.c-btn-close,
body.dark-theme .close-modal-btn,
body.dark-theme .pf-modal-close {
  background-color: #303030 !important;
}

body.dark-theme .account__content button.c-btn-close:hover,
body.dark-theme .close-modal:hover,
body.dark-theme .pf-modal-close:hover,
body.dark-theme .dlt-close-btn,
body.dark-theme .dlt-icon-circle,
body.dark-theme .edt-close-btn,
body.dark-theme .trn-modal-close {
  background-color: #383838 !important;
  color: #A9A9A9;
}

body.dark-theme .ad-close:hover,
body.dark-theme .c-ad-undo:hover {
  background-color: #303030 !important;
  border: 1px solid #303030 !important;
}

body.dark-theme .trn-modal-close:hover {
   background-color: #383838 !important;
}

body.dark-theme .c-ad-undo{
  background-color: #383838 !important;
  border: 1px solid #383838 !important;
}

body.dark-theme .account__content button svg{
  fill:#f8f8f8 !important;
}

body.dark-theme .account__login--header__desc,
body.dark-theme .account__login--divide__text,
body.dark-theme .tooltip-body .username {
  color:#BEBEBE !important;
}

body.dark-theme .account__login--divide__text {
  background-color:var(--dark-theme-lighter-color) !important;
}

body.dark-theme .tooltip-content{
  border: 1px solid #404040;
}

body.dark-theme .c-page__title-h{
 border-bottom: none !important;
}

body.dark-theme input[type=text],
body.dark-theme select,
body.dark-theme .widget__tagcloud--link,
body.dark-theme textarea,
body.dark-theme input[type=number],
body.dark-theme input[type=date],
body.dark-theme input[type=password],
body.dark-theme .st-password-input,
body.dark-theme input[type=url],
body.dark-theme input[type=tel] {
  background-color: var(--dark-theme-lighter-color) !important;
  color: #f8f8f8 !important;
  border: 1px solid #484848 !important;
}

body.dark-theme .ads-container{
  background-color: var(--dark-theme-lighter-color) !important;
  color: #f8f8f8 !important;
  border: 1px solid #484848 !important;
}

body.dark-theme .ads-container .ad-promo a{
  background-color: var(--dark-theme-color) !important;
  color: var(--white-color) !important;
}

body.dark-theme .c-btn-cancel {
  background-color: var(--dark-theme-lighter-color) !important;
  color: #f8f8f8 !important;
  border: 1px solid #484848 !important;
}

body.dark-theme .dropend ul.dropdown-menu li a:hover{
  background-color: #303030 !important;
  color: #f8f8f8 !important;
}

body.dark-theme .c-not-found{
  background-color: var(--dark-theme-lighter-color) !important;
  color: #989898 !important;
}

body.dark-theme .c-not-found svg{
  fill: #989898 !important;
}

body.dark-theme .selectbox{
  border: 1px solid #484848 !important;
}

body.dark-theme .main__footer{
  border: none !important;
}

body.dark-theme .c-container-bg,
body.dark-theme .card-header,
body.dark-theme .ad-box{
  border: 1px solid var(--dark-theme-lighter-color) !important;
}

body.dark-theme .prediction-item .bet,
body.dark-theme h3.c-content-heading,
body.dark-theme small.form-text,
body.dark-theme .card-title span,
body.dark-theme .modal-title.c-modal-title,
body.dark-theme .pf-modal-title,
body.dark-theme .mdl-modal-title {
  color: #f8f8f8 !important;
}

body.dark-theme .card-text a,
body.dark-theme ul.product__details--tab li.product__details--tab__list,
body.dark-theme p.c-not-found{
  color: #E0E0E0 !important;
}

body.dark-theme svg,
body.dark-theme a.c-back-arrow-to-feed svg,
body.dark-theme a.c-back-arrow svg,
body.dark-theme .header__account--btn svg,
body.dark-theme ul li.header__menu--items a.header__account--btn svg path,
body.dark-theme p.c-not-found svg{
  fill:var(--white-color) !important;
}

body.dark-theme svg {
  fill:#282828 !important;
}

body.dark-theme .c-back-arrow-to-feed, body.dark-theme .c-dropdown-menu,
body.dark-theme ul.dropdown-menu.c-dropdown-menu li,
body.dark-theme ul.dropdown-menu.c-dropdown-menu li a,
body.dark-theme .dropdown-toggle {
  background-color: #383838 !important;
}

body.dark-theme .bettor,
body.dark-theme .color__variant,
body.dark-theme .adg-stat-value,
body.dark-theme .adv-stat-value {
  color:#D0D0D0 !important;
}

body.dark-theme .c-container-about,
body.dark-theme .c-container-contact,
body.dark-theme .c-container-ad {
  background-color: var(--dark-theme-color) !important;
  color: #f8f8f8 !important;
}

body.dark-theme .c-container-ad ul li svg{
  fill:#f8f8f8 !important;
}

body.dark-theme .c-container-contact p,
body.dark-theme .c-container-contact h1,
body.dark-theme .c-container-contact h2,
body.dark-theme .c-container-contact h3,
body.dark-theme h3.c-card-subtitle a,
body.dark-theme .header__account--btn span.header__account--btn__text {
  color: #f8f8f8 !important;
}

body.dark-theme .c-container-about p,
body.dark-theme .c-container-about h1,
body.dark-theme .c-container-about h2,
body.dark-theme .c-container-about h3,
body.dark-theme .c-container-ad h1,
body.dark-theme .c-container-ad h2,
body.dark-theme .c-container-ad h3,
body.dark-theme .c-container-ad p,
body.dark-theme .c-btn-buy{
  color: #f8f8f8 !important;
}

body.dark-theme .c-advertise-here{
  color: #f0f0f0 !important;
}

body.dark-theme .c-ad-contact-us{
   color:#c0c0c0 !important;
}

body.dark-theme .d-flex.c-list-notifications svg{
  border:1px solid #c0c0c0 !important;
  border-radius: 100% !important;
}

body.dark-theme .customer__information--step svg{
  fill: #f8f8f8 !important;
}

body.dark-theme footer.footer__section{
  background-color: #000 !important;
  color: #f8f8f8 !important;
}

body.dark-theme ul.footer__widget--menu li.footer__widget--menu__list a.footer__widget--menu__text,
body.dark-theme .footer__bottom p.copyright__content,
body.dark-theme ul.social__shear li.social__shear--list span {
  color: #989898 !important;
}

body.dark-theme ul.c-list-policy li strong{
  color: #ccc !important;
}

body.dark-theme .card.c-profile-card p.card-text,
body.dark-theme .card.c-profile-card p.card-text .fa-map-marker-alt{
  color: #ccc !important;
}

body.dark-theme h2.footer__widget--title{
  color: #B8B8B8 !important;
}

body.dark-theme svg.c-heart path{
  fill:var(--dark-theme-color) !important;
  stroke:#f8f8f8 !important;
}

body.dark-theme .c-back-arrow-to-feed{
  background-color: #303030 !important;
}

body.dark-theme .c-back-arrow-to-feed:hover{
  background-color: #383838 !important;
}

body.dark-theme .c-back-arrow {
  background-color: #303030 !important;
}

body.dark-theme .c-back-arrow:hover {
  background-color: #383838 !important;
}

body.dark-theme .dlt-cancel-btn,
body.dark-theme .trn-btn-secondary,
body.dark-theme .adv-btn-secondary,
body.dark-theme .flt-btn-secondary,
body.dark-theme button.mn-search-view-all,
body.dark-theme .mn-search-result-btn-secondary,
body.dark-theme .mb-modal__footer .mb-btn,
body.dark-theme .btn-action--secondary,
body.dark-theme .mobile-bottom-nav {
  background-color: #383838 !important;
  border:1px solid #383838 !important;
  color:#ebebeb !important;
}

body.dark-theme .mobile-bottom-nav .bottom-nav-item {
   color:#ebebeb !important;
}

body.dark-theme .mn-search-result-stats,
body.dark-theme .mn-search-result-username,
body.dark-theme .mn-search-result-description {
  color:#BEBEBE;
}

body.dark-theme .flt-btn-secondary {
  border:2px solid #383838 !important;
}

body.dark-theme button.mn-search-view-all,
body.dark-theme .mn-search-result-btn-secondary {
  border:1px solid #444444 !important;
}

body.dark-theme .dlt-cancel-btn:hover,
body.dark-theme .trn-btn-secondary:hover,
body.dark-theme .flt-btn-secondary:hover,
body.dark-theme .mn-search-view-all:hover,
body.dark-theme .mb-modal__footer .mb-btn:hover,
body.dark-theme .btn-action--secondary:hover {
  opacity: 0.9;
}

body.dark-theme .btn-action--primary:hover {
  color:#ebebeb !important;
}

body.dark-theme .jackpot-card {
  background-color: var(--dark-theme-lighter-color) !important;
}

body.dark-theme a.header__account--btn svg path{
  fill:#F0F0F0 !important;
}

body.dark-theme .bet-list-container::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height:140px !important;
}

body.dark-theme .c-edit-setting{
  padding: 5px 10px !important;
  border-radius: 50px !important;
  background-color: #383838 !important;
}

body.dark-theme .c-edit-setting:hover{
  opacity: 0.9 !important;
}

 body.dark-theme .following{
   color:#D0D0D0 !important;
 }

 body.dark-theme .unfollow-modal .modal-box {
  background-color: #383838 !important;
 }

body.dark-theme .view-prediction {
  border: 1px solid #303030 !important;
  background: #202020 !important;
}

 body.dark-theme .view-prediction:hover {
  border: 1px solid #303030 !important;
  background: #282828 !important;
}

body.dark-theme .bettor a,
body.dark-theme .comment-username {
 color: #ccc;
}

body.dark-theme a.jp-name {
  color: #BEBEBE !important;
}

body.dark-theme .c-prediction-date,
body.dark-theme .c-container-about p,
body.dark-theme .c-container-about ul li {
  color:#A9A9A9 !important;
}

body.dark-theme .comment-section {
    border: 1px solid #1C1C1E;
}

body.dark-theme .comment-thread {
  border-left: 1px solid #282828 !important;
}

body.dark-theme .comment {
  background: #282828 !important;
  border: 1px solid #383838 !important;
}

body.dark-theme .comment-body{
   color:#ccc !important;
}

body.dark-theme .jackpot-card {
    border: 1px solid #383838;
}

body.dark-theme .ad-alternative h4 {
    color: #ccc;
}

body.dark-theme .ad-alternative p,
body.dark-theme .dlt-warning-message {
    color:#808080;
}

body.dark-theme .mt-match-item,
body.dark-theme .user-item {
  background: inherit !important;
}

body.dark-theme .user-item:hover,
body.dark-theme .mt-match-item:hover {
  background: var(--card-bg-dark-hover) !important;
}

body.dark-theme .action-dropdown-menu {
  border:1px solid #282828 !important;
}

body.dark-theme .payment-summary > div {
  border-bottom: 1px dashed #333;
}

body.dark-theme .adv-modal-header h2 {
  color: #f8f8f8;
}

body.dark-theme .adv-modal-body p {
   color: #DCDCDC;
}

body.dark-theme .payment-modal-footer {
  border-top:1px solid #333 !important;
}

body.dark-theme .action-dropdown-menu button:hover {
  background: #333 !important;
  color:#c8c8c8;
}

body.dark-theme .chart-container {
  background: #333 !important;
}

body.dark-theme .sideboard-tab {
    border: none;
    background: transparent;
    color: #718096;
}

body.dark-theme .sideboard-tab.active {
    background: #383838;
    color: #ccc;
}

body.dark-theme .prediction-text-content,
body.dark-theme .edt-current-display,
body.dark-theme .prediction-code-display-modal,
body.dark-theme .user-name,
body.dark-theme .dlt-modal-title,
body.dark-theme .success-username,
body.dark-theme .view-profile .card-title,
body.dark-theme .card-body .small {
  color:#ccc !important;
}

body.dark-theme .view-profile .card-title {
  color:#f8f8f8 !important;
}

body.dark-theme .action-btn {
  background-color: #333;
}

body.dark-theme .ad-hide-icon {
  background: #333;
}

body.dark-theme .ad-feedback-close,
body.dark-theme .share-popup-close {
  background: #474747;
}

body.dark-theme .ad-feedback-close:hover,
body.dark-theme .share-popup-close:hover {
  background: #5b5b5b !important;
  color: #848484 !important;
}

body.dark-theme .adcr-practice-card,
body.dark-theme .adcr-targeting-card__header,
body.dark-theme .adcr-targeting-chip,
body.dark-theme .adcr-category-card,
body.dark-theme .adcr-warning-card,
body.dark-theme .adcr-category-card,
body.dark-theme .pd-header-container,
body.dark-theme .dlt-modal-container,
body.dark-theme .trn-detail-item {
  background: #333 !important;
  color: #ccc !important;
}

body.dark-theme .trn-detail-item,
body.dark-theme .trn-detail-item:hover {
  border: 1px solid #333;
}

body.dark-theme .trn-detail-label {
  color: #ccc !important;
}

body.dark-theme .trn-detail-value {
   color: #f8f8f8 !important;
}

body.dark-theme .trn-modal-header,
body.dark-theme .sbe-bettor-item,
body.dark-theme .sbe-sidebar-header {
   border-bottom: 1px solid #282828;
}

body.dark-theme .sbe-bettor-item:hover {
   background-color: #292929;
}

body.dark-theme .trn-modal-footer {
   border-top: 1px solid #282828;
}

body.dark-theme .trn-modal-header h3,
body.dark-theme .trn-modal-footer,
body.dark-theme .mdl-modal-header h3 {
   color: #f8f8f8 !important;
}

body.dark-theme .adcr-targeting-card,
body.dark-theme .adcr-warning-card {
  border: 1px solid #383838;
}

body.dark-theme .adcr-targeting-card__header {
  border-bottom: 1px solid #383838;
}

body.dark-theme .mn-search-result-item {
  border-bottom: none;
}

body.dark-theme .prd-dropdown-item {
  color: #A9A9A9;
}

body.dark-theme .prd-dropdown-item:hover {
  background: #383838 !important;
}

body.dark-theme .ad-feedback-option .ad-feedback-option-label,
body.dark-theme .adcr-guideline-content li {
  color: #ccc !important;
}

body.dark-theme .share-url-label,
body.dark-theme .edt-current-label,
body.dark-theme .edt-new-label {
  color: #d6d6d6 !important;
}

body.dark-theme .ad-feedback-modal-header,
body.dark-theme .success-navigation-header,
body.dark-theme .mb-filters {
  border-bottom: 1px solid #383838 !important;
}

body.dark-theme .ad-feedback-modal-header h3 {
  color: #fff !important;
}

body.dark-theme .ad-feedback-question,
body.dark-theme .adcr-guideline-content h5,
body.dark-theme .edt-modal-title,
body.dark-theme .success-navigation-header h3 {
  color: #f8f8f8 !important;
}

body.dark-theme .ad-feedback-modal-footer,
body.dark-theme .ed-header__actions,
body.dark-theme .mn-search-footer,
body.dark-theme .mb-filters__body,
body.dark-theme .mb-meta,
body.dark-theme .mb-modal__footer {
  border-top: 1px solid #383838 !important;
}

body.dark-theme .message-actions {
    border-top-color: #383838;
}

body.dark-theme input[type=text].share-url-input {
  background: #474747 !important;
  border: 1px solid #474747 !important;
  color: #848484 !important;
}

body.dark-theme .avatar-img,
body.dark-theme .user-avatar {
  border-color: #383838;
}

body.dark-theme .prediction-modal-header,
body.dark-theme .share-popup-header,
body.dark-theme .payment-modal-header {
  background: #333 !important;
  border-bottom: 1px solid #383838 !important;
}

body.dark-theme .prediction-modal-header h2,
body.dark-theme .st-modal-title,
body.dark-theme .share-popup-header h3,
body.dark-theme .adcr-targeting-card__header h5,
body.dark-theme .adcr-practice-card__content h5,
body.dark-theme .adcr-category-card__content h5,
body.dark-theme .adcr-info-card__content h6,
body.dark-theme .adcr-warning-card__content h6,
body.dark-theme .matches-modal-header h3,
body.dark-theme .payment-modal-header h3,
body.dark-theme .top-bettors h6,
body.dark-theme .mn-empty-state h6,
body.dark-theme .pl-empty-state h4,
body.dark-theme .lb-empty h4,
body.dark-theme .no-matches-state h4,
body.dark-theme .predictions-empty-state h3,
body.dark-theme .state-title,
body.dark-theme h3.drawer-title {
  color:#f8f8f8 !important;
}

body.dark-theme .section-label,
body.dark-theme .adcr-practice-card__content p,
body.dark-theme .adcr-policy-item,
body.dark-theme .adcr-category-list li,
body.dark-theme .top-bettors small.text-muted,
body.dark-theme .state-subtitle,
body.dark-theme .mb-message-card__content,
body.dark-theme .mb-meta p,
body.dark-theme .message-body__content,
body.dark-theme .lb-empty p,
body.dark-theme .no-matches-state p {
  color:#ccc !important;
}

body.dark-theme .mn-empty-state p,
body.dark-theme .mn-notifications-status {
  color:#808080 !important;
}

body.dark-theme .mt-team-row span {
  color:#f8f8f8 !important;
}

body.dark-theme .modal-header,
body.dark-theme .matches-modal-header {
    border-bottom: 1px solid #303030;
    background: #303030 !important;
    color: var(----gray-color) !important;
}

body.dark-theme .ta-container {
  background: #181818 !important;
}

body.dark-theme .ta-scroll-btn {
  background: #303030;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
}

body.dark-theme .ta-tag {
    background: #202020 !important;
    color: #A9A9A9 !important;
}

body.dark-theme .ta-tag:hover {
    background: #282828 !important;
    color: #A9A9A9 !important;
}

body.dark-theme .progress-bar-mini,
body.dark-theme .char-counter {
    background: #505050;
    color: #ccc;
}

body.dark-theme .mt-team-name-home,
body.dark-theme .mt-team-name-away {
    color: #f8f8f8;
}

body.dark-theme .mt-vs-text {
  color: #ccc;
}

body.dark-theme .quick-action-btn,
body.dark-theme .lb-retry-btn {
    border: 2px solid #333;
    background: #383838;
    color: #ccc;
}

body.dark-theme .quick-action-btn:hover,
body.dark-theme .lb-retry-btn:hover {
    border: 2px solid #333 !important;
    background: #383838 !important;
    color: #ccc !important;
    opacity: 0.9 !important;
}

/*  */
body.dark-theme .match-prediction-btn {
  background: inherit;
}

/* Home win button (1) */
body.dark-theme .home-win {
    color: #dc2626;
    border-color: #fecaca;
}

body.dark-theme .home-win:hover {
    background: inherit;
    border-color: #dc2626;
}

/* Draw button (X) */
body.dark-theme .draw {
    color: #d97706;
    border-color: #fed7aa;
}

body.dark-theme .draw:hover {
    background: inherit;
    border-color: #d97706;
}

/* Away win button (2) */
body.dark-theme .away-win {
    color: #2563eb;
    border-color: #dbeafe;
}

body.dark-theme .away-win:hover {
    background: inherit;
    border-color: #2563eb;
}

/* Selected state */
body.dark-theme .match-prediction-btn.selected {
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.dark-theme .home-win.selected {
    background: #dc2626;
    border-color: #dc2626;
}

body.dark-theme .draw.selected {
    background: #d97706;
    border-color: #d97706;
}

body.dark-theme .away-win.selected {
    background: #2563eb;
    border-color: #2563eb;
}
/*  */

body.dark-theme .ch-stat-card,
body.dark-theme .ed-header,
body.dark-theme .ed-status-card,
body.dark-theme .ed-card,
body.dark-theme .ed-card__header,
body.dark-theme .pmt-main {
  background: var(--dark-theme-lighter2-color);
  border: 1px solid var(--dark-theme-lighter2-color);
}

body.dark-theme .pmt-main__title {
  color:#f5f5f5;
}

body.dark-theme .pmt-main__subtitle {
  color:#D3D3D3;
}

body.dark-theme .st-confirm-label {
  color:#A9A9A9;
}

/* Dark Theme Checkbox Styles */
.dark-theme .st-confirm-label {
    color: #e5e7eb;
}

.dark-theme .st-confirm-label input[type="checkbox"] {
    accent-color: var(--primary-color);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Custom checkbox styling for dark theme (alternative to accent-color) */
.dark-theme .st-confirm-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #374151;
    border: 2px solid #6b7280;
}

.dark-theme .st-confirm-label input[type="checkbox"]:checked {
    background-color: var(--primary-color2);
    border-color: var(--primary-color2);
}

.dark-theme .st-confirm-label input[type="checkbox"]:hover {
    border-color: #9ca3af;
}

.dark-theme .st-confirm-label input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.dark-theme .st-confirm-label input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.dark-theme .divider {
 border: 1px solid var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .ch-pattern-analysis,
body.dark-theme .chart-placeholder {
  background: var(--dark-theme-lighter2-color);
}

body.dark-theme .ch-pattern-highlight {
 background: var(--dark-theme-lighter-color);
}

body.dark-theme .ch-pattern-highlight h4,
body.dark-theme .ed-header-title,
body.dark-theme .ed-status-card__title,
body.dark-theme .ed-card__title,
body.dark-theme .st-delete-consequences h4 {
  color: #D3D3D3 !important;
}

body.dark-theme .ch-pattern-highlight p,
body.dark-theme #ch-pattern-summary,
body.dark-theme .ed-header-subtitle,
body.dark-theme .st-delete-consequences ul li {
  color: #A9A9A9 !important;
}

body.dark-theme .ch-pattern-stat {
  background: var(--dark-theme-lighter2-color) !important;
  border: 1px solid #404040 !important;
}

body.dark-theme .ch-chart-btn {
 background: var(--dark-theme-lighter-color);
 color: #F5F5F5;
 border: 1px solid #404040 !important;
}

body.dark-theme .ch-chart-btn:hover,
body.dark-theme .ch-chart-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

body.dark-theme .ch-tabs {
  background: var(--dark-theme-lighter2-color);
}

body.dark-theme .ch-chart-card {
  background: var(--dark-theme-lighter2-color);
}

body.dark-theme .pf-tab:hover,
body.dark-theme .pf-tab:active {
  background: var(--dark-theme-lighter-color) !important;
  color: var(--primary-color);
}

body.dark-theme .pf-tab.active:hover {
    background: var(--primary-color2) !important;
    color: #f8f8f8 !important;
    opacity: 0.9;
}

body.dark-theme .ch-stat-value {
   color: #F5F5F5;
}

body.dark-theme .ch-stat-info p,
body.dark-theme .tp-hero__subtitle {
  color: #C0C0C0;
}

body.dark-theme .ed-upload-area {
    background-color: var(--dark-theme-lighter-color) !important;
}

body.dark-theme .ed-upload-area {
    border:1px solid var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .tp-hero__title,
body.dark-theme .tp-selection__label,
body.dark-theme .tp-preview__title,
body.dark-theme .dashboard-header h1 {
 color: #f8f8f8;
}

body.dark-theme .ad-text-content h3 {
 color: #D3D3D3 !important;
}

body.dark-theme .ad-text-content p,
body.dark-theme .dashboard-header p,
body.dark-theme .adcr-plan-description {
  color: #A9A9A9 !important;
}

body.dark-theme .ed-actions-sticky,
body.dark-theme .trn-filters {
  background-color: var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .ed-actions-sticky {
  border-top: var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .trn-filters {
  border-color: #333 !important;
}

body.dark-theme .tp-support__title,
body.dark-theme .adg-title,
body.dark-theme .trn-filter-group label {
 color: #DCDCDC;
}

body.dark-theme .adg-description,
body.dark-theme .stat-card-minimal__label {
 color: #A9A9A9 !important;
}

body.dark-theme .stat-card-minimal__value {
 color: #ccc !important;
}

body.dark-theme .adcr-step-content h6,
body.dark-theme .content-step h6 {
 color: #f8f8f8 !important;
}

body.dark-theme .pfl-stat-item {
  /* background: #292929 !important; */
  border: 1px solid #282828 !important;
}

body.dark-theme .stat-item .stat-value,
body.dark-theme .pfl-stat-item .stat-value,
body.dark-theme .engagement-value {
  color: #A9A9A9 !important;
}

body.dark-theme .engagement-value.active {
  color: #10b981 !important;
}

body.dark-theme .stat-item .stat-label,
body.dark-theme .pfl-stat-item .stat-label,
body.dark-theme .engagement-title h4 {
  color: #DCDCDC !important;
}

body.dark-theme .tp-support__text,
body.dark-theme .ft-form-label,
body.dark-theme .pf-achievement-locked,
body.dark-theme .engagement-subtitle,
body.dark-theme .mdl-form-label {
 color: #BEBEBE;
}

body.dark-theme .pf-header .pf-user-bio {
   color: #f0f0f0;
}

body.dark-theme .tl-header,
body.dark-theme .adtl-header,
body.dark-theme .adcr-header,
body.dark-theme .ft-matches-preview-section,
body.dark-theme .pf-header,
body.dark-theme .adcr-card,
body.dark-theme .accordion-item,
body.dark-theme .accordion-header,
body.dark-theme .accordion-button,
body.dark-theme .overflow-menu,
body.dark-theme .abt-container,
body.dark-theme .adcr-quick-nav,
body.dark-theme .adcr-section,
body.dark-theme .adcr-cta-section {
  background-color: var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .adcr-form-actions,
body.dark-theme .ad-actions,
body.dark-theme .adcr-card {
  border-top:1px solid #383838 !important;
}

body.dark-theme .abt-mission-row,
body.dark-theme .abt-feature-card,
body.dark-theme .abt-weekly-prediction,
body.dark-theme .abt-stats-card {
  background-color: #303030 !important;
}

body.dark-theme .stat-breakdown {
  border-top:1px solid #2c2c2c !important;
}

body.dark-theme .adcr-header {
  border-bottom:1px solid #383838 !important;
}

body.dark-theme .overflow-menu {
  border:1px solid #383838 !important;
}

body.dark-theme .adcr-form-label,
body.dark-theme .adcr-summary-label,
body.dark-theme .pmt-form-group .pmt-form-label {
  color:#BEBEBE;
}

body.dark-theme .adcr-ad-preview-container {
  background: var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .adcr-banner-placeholder p,
body.dark-theme .adcr-ad-content p,
body.dark-theme .adcr-summary-value,
body.dark-theme .lead,
body.dark-theme .text-muted,
body.dark-theme .adcr-ad-preview-container h5,
body.dark-theme .abt-description,
body.dark-theme .abt-weekly-left h4 small,
body.dark-theme .abt-contact a {
  color: #D3D3D3 !important;
}

body.dark-theme .accordion-button {
  color:#E8E8E8;
}

body.dark-theme .adcr-ad-content h3,
body.dark-theme .adcr-ad-details-summary h5,
body.dark-theme .abt-title,
body.dark-theme .card-header h5,
body.dark-theme .pf-error-state h3,
body.dark-theme .header-container p,
body.dark-theme .mb-empty__title {
  color: #F5F5F5 !important;
}

body.dark-theme .adcr-summary-item {
    border-bottom: 1px solid var(--dark-theme-lighter2-color);
}

body.dark-theme .pr-stat-card,
body.dark-theme .pf-stat-card,
body.dark-theme .stats-card,
body.dark-theme .performance-metric,
body.dark-theme .adcr-policy-item,
body.dark-theme .adcr-info-card,
body.dark-theme .adcr-banner-placeholder {
  background: #333 !important;
}

body.dark-theme .abt-stats-card {
  border: 1px solid #333;
}

body.dark-theme .abt-featured {
  color:#E8E8E8;
}

body.dark-theme .abt-stats-text {
  color: #ccc !important;
}

body.dark-theme .pf-tabs-controls {
  background: #282828 !important;
  border-top: 1px solid #333;
}

body.dark-theme .adcr-banner-placeholder {
  border: 2px dashed #696969;
}

body.dark-theme .filter-tab,
body.dark-theme .time-period-btn,
body.dark-theme .adv-period-btn,
body.dark-theme .tp-tag {
  background: var(--dark-theme-lighter2-color) !important;
  border: 1px solid #333 !important;
  color:#C0C0C0;
}

body.dark-theme .adv-period-btn:hover,
body.dark-theme .tp-tag:hover {
    border-color: #d4af37 !important;
    color: #d4af37 !important;
}

body.dark-theme .adv-period-btn.active,
body.dark-theme .tp-tag.active {
    background: #d4af37 !important;
    color: white !important;
    border-color: #d4af37 !important;
}

body.dark-theme .prd-card .prd-username a,
body.dark-theme .prd-prediction-text,
body.dark-theme .prediction-code-display-modal,
body.dark-theme .abt-mission-text,
body.dark-theme .abt-mission-highlight .abt-stat-item span,
body.dark-theme .abt-mission-text p,
body.dark-theme .abt-feature-card h3 {
  color:#f8f8f8 !important;
}

body.dark-theme .prd-prediction-text {
  background-color: #282828 !important;
  border-color: #333;
}

body.dark-theme .prediction-code-display-modal,
body.dark-theme .prediction-code-display-modal:hover {
  background-color: var(--dark-theme-lighter-color) !important;
  border:1px solid #333;
}

body.dark-theme .prd-prediction-text:hover {
  background-color: #333 !important;
}

body.dark-theme .prd-company-info,
body.dark-theme .abt-feature-card p {
  color: #D3D3D3;
}

body.dark-theme .filter-tab:hover {
  background-color: #333 !important;
}

body.dark-theme .filter-tab.active,
body.dark-theme .tp-tag.active {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
}

body.dark-theme .pf-stat-card,
body.dark-theme .tl-header,
body.dark-theme .ft-bg-container,
body.dark-theme .adtl-header,
body.dark-theme .abt-feature-card {
  border: 1px solid #333 !important;
}

body.dark-theme .pmt-method {
  border: 1px solid #696969 !important;
}

body.dark-theme .pmt-method--selected {
  background: #A9A9A9 !important;
}

body.dark-theme .pmt-method--selected .pmt-method__name {
    border-color: var(--primary-color) !important;
    color: #333 !important;
}

body.dark-theme .pmt-method--selected .pmt-method__description {
    color: #696969 !important;
}

body.dark-theme .pmt-success .pmt-success__title {
  color:#D3D3D3;
}

body.dark-theme .pmt-form h3 {
  color:#f5f5f5;
}

body.dark-theme .pmt-method--selected {
    border-color: var(--primary-color) !important;
}

body.dark-theme .pr-stat-value {
  color: #BEBEBE !important;
}

body.dark-theme .pr-stat-label,
body.dark-theme .pr-stat-label a,
body.dark-theme .metric-label,
body.dark-theme .ed-form-label,
body.dark-theme .st-form-label,
body.dark-theme .st-password-requirements ul li,
body.dark-theme .adv-stat-label,
body.dark-theme .st-setting-label,
body.dark-theme .st-radio-main-text {
  color: #A9A9A9 !important;
}

body.dark-theme .stat-card .stat-value,
body.dark-theme .stat-value .current-value {
  color: #D3D3D3 !important;
}

body.dark-theme .st-card-title {
  color: #F5F5F5 !important;
}

body.dark-theme ul.st-settings-list li div {
 color: #D3D3D3 !important;
}

body.dark-theme .stat-card .stat-label {
  color: #A9A9A9 !important;
}

body.dark-theme .active-indicator span {
  color: #878787 !important;
}

body.dark-theme .pf-modal,
body.dark-theme .stats-modal-content,
body.dark-theme .st-settings-card,
body.dark-theme .st-modal-content,
body.dark-theme .st-confirm-label,
body.dark-theme .st-delete-consequences,
body.dark-theme .pf-modal-footer,
body.dark-theme .pf-form-group,
body.dark-theme .matches-modal-body,
body.dark-theme .pd-matches-container,
body.dark-theme .matches-modal-content {
  background-color: var(--dark-theme-lighter-color) !important;
}

body.dark-theme .st-retention-notice,
body.dark-theme .st-warning-text {
   background: #333 !important;
}

body.dark-theme .st-retention-notice small,
body.dark-theme .st-retention-notice i {
   color: #a5b2df !important;
}

body.dark-theme .st-settings-card {
  border: var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .pf-modal-header,
body.dark-theme .stats-modal-header {
    border-bottom:1px solid #383838 !important;
}

body.dark-theme .prd-share-modal-content h3 {
  color: #f8f8f8;
}

body.dark-theme .pf-form-group .pf-form-label,
body.dark-theme .ed-header__subtitle,
body.dark-theme .prd-share-modal-content .prd-share-option {
  color: #A9A9A9;
}

body.dark-theme .prd-share-modal-content .prd-share-option:hover,
body.dark-theme .prediction-text,
body.dark-theme .edt-current-display,
body.dark-theme .code-display-wrapper,
body.dark-theme .code-display-wrapper:hover,
body.dark-theme .prediction-code-display-share {
  background: var(--dark-theme-color) !important;
}

body.dark-theme .code-display-wrapper {
  /* border: 1px solid #333; */
  color:#f8f8f8 !important;
}

body.dark-theme .edt-current-display {
  border-color: #333;
}

body.dark-theme .edt-current-display:hover {
  background: #383838 !important;
}

body.dark-theme .adcr-btn-back,
body.dark-theme .pmt-btn--secondary,
body.dark-theme .st-btn-secondary,
body.dark-theme .ed-btn--secondary,
body.dark-theme .st-confirm-btn-cancel,
body.dark-theme .mb-chip {
  background-color: #585858;
  border: 1px solid #585858;
  color: #A9A9A9;
}

body.dark-theme .mb-chip {
  border: none;
}

body.dark-theme .mb-chip--active {
    background-color: #b18819;
    color: white;
}

body.dark-theme .ed-btn--outline-light,
body.dark-theme .stat-card-minimal__icon,
body.dark-theme .adv-stat-icon,
body.dark-theme .action-btn,
body.dark-theme .overflow-action-btn,
body.dark-theme .btn-light,
body.dark-theme .btn-outline-light,
body.dark-theme .ad-undo-button {
  background-color: #282828 !important;
  border: 1px solid #282828 !important;
  color: #A9A9A9 !important;
}

body.dark-theme .btn-outline-light {
   border: 1px solid #5f5f5f !important;
}

body.dark-theme .ed-btn--outline-light:hover,
body.dark-theme .adcr-btn-back:hover,
body.dark-theme .pmt-btn--secondary:hover,
body.dark-theme .action-btn:hover,
body.dark-theme .ad-undo-button:hover,
body.dark-theme .st-confirm-btn-cancel:hover,
body.dark-theme .mb-chip:hover {
  opacity: 0.9 !important;
  color: #A9A9A9 !important;
}

body.dark-theme .adcr-banner-upload-area {
  border: 2px dashed #585858;
}

body.dark-theme .adcr-banner-upload-area {
  background: inherit;
}

body.dark-theme .adcr-banner-upload-area h5 {
  color: #A9A9A9 !important;
}

body.dark-theme .adcr-ad-preview,
body.dark-theme .adcr-ad-banner,
body.dark-theme .adcr-ad-details-summary,
body.dark-theme .pf-file-upload:hover {
  background: #383838 !important;
  border: 1px solid #383838;
}

body.dark-theme .copy-code-btn {
  background: #383838;
  border: 1px solid #383838;
}

body.dark-theme .trn-card-label,
body.dark-theme .trn-card-icon i {
  color: #A9A9A9;
}

body.dark-theme .trn-card-value,
body.dark-theme .modal-user-name {
  color:#f8f8f8 !important;
}

body.dark-theme .user-item .username,
body.dark-theme .user-item .user-name .name-text,
body.dark-theme .user-item .username .username-text,
body.dark-theme .btn-text,
body.dark-theme .modal-user-username {
  color:#ccc !important;
}

body.dark-theme .adcr-preview-header {
  border-bottom: 1px solid #505050 !important;
}

body.dark-theme .adcr-preview-header span,
body.dark-theme .pl-poll-stat {
  color: #A9A9A9 !important;
}

body.dark-theme .pf-modal-footer,
body.dark-theme .pmt-security {
 border-top: 1px solid #383838 !important;
}

body.dark-theme .time-period-btn.active {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
}

body.dark-theme .stats-section-title {
  border-bottom: 2px solid #383838;
}

body.dark-theme .adcr-ad-details-summary h5 {
    border-bottom: 1px solid #505050;
}

body.dark-theme .ed-header__meta {
  background: #383838 !important;
  border: 1px solid #383838;
}

body.dark-theme .pf-achievement-title,
body.dark-theme .achievement-title,
body.dark-theme .ed-header__title-text {
  color: #fcfcfc !important;
}

body.dark-theme .adcr-plan-features ul li,
body.dark-theme .ed-meta-value {
  color:#D3D3D3 !important;
}

body.dark-theme .pmt-form-input {
  background-color: var(--dark-theme-lighter-color) !important;
  color: #f8f8f8 !important;
  border: 1px solid #484848 !important;
}

body.dark-theme .user-item .pf-name,
body.dark-theme .pf-display-name {
   color: #f8f8f8 !important;
}

body.dark-theme .user-item .text-muted,
body.dark-theme .pf-achievement-description,
body.dark-theme .achievement-description {
   color: #D3D3D3 !important;
}

body.dark-theme .border-bottom {
  border-bottom: 1px solid var(--dark-theme-lighter-color) !important;
}

body.dark-theme .prediction-summary {
  border: none !important;
}

body.dark-theme .modal-header button.btn-close {
  background-color: #606060 !important;
  border-radius: 5px;
}

body.dark-theme .pt-stat-item {
    background-color: #333 !important;
    border-right: 1px solid #333 !important;
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
}

body.dark-theme .pd-prediction-header {
    background-color: #333 !important;
    border: 1px solid #333 !important;
}

body.dark-theme .st-card-header,
body.dark-theme .ad-image {
    border-bottom: 1px solid #333 !important;
}

body.dark-theme .st-password-requirements {
  background-color: #333 !important;
  border-left: 4px solid #404040;
}

body.dark-theme .st-radio-option {
    border: 2px solid #404040;
    background-color: #333 !important;
    color: #BEBEBE !important;
}

body.dark-theme .st-radio-option:has(input[type="radio"]:focus),
body.dark-theme .st-radio-option input[type="radio"]:checked::after {
    color: #f8f8f8 !important;
}

body.dark-theme .st-password-toggle:hover {
  background: var(--dark-theme-lighter-color) !important;
}

body.dark-theme .st-confirmation-section {
    border-top: 1px solid #383838;
}

body.dark-theme .st-modal-header {
    border-bottom: 1px solid #383838;
}

body.dark-theme .notification-dropdown {
    background: #333 !important;
    background: white;
    border: 1px solid #333;

}

body.dark-theme .notification-header {
    border-bottom: 1px solid #383838 !important;
    background: #333 !important;
}

body.dark-theme .notification-header h3,
body.dark-theme .section-heading,
body.dark-theme .modal-content .modal-header h5 {
    color: #f8f8f8 !important;
}

body.dark-theme .notification-footer {
    border-top: 1px solid #383838;
    background: #333;
}

body.dark-theme .empty,
body.dark-theme .adcr-plan-features p {
  color: #BEBEBE;
}

body.dark-theme .mark-all-read,
body.dark-theme .view-all {
    color: #909090;
}

body.dark-theme .mark-all-read:hover {
    background-color: #404040;
}

body.dark-theme .ntf-container,
body.dark-theme .ntf-empty {
  background: var(--dark-theme-lighter-color);
}

body.dark-theme .ntf-empty-title,
body.dark-theme .tp-advertising-platform__step h4,
body.dark-theme .tp-advertising-platform__header h2,
body.dark-theme .tp-advertising-platform__cta-content h3,
body.dark-theme .ab-about-text h3,
body.dark-theme .ab-section-title h2,
body.dark-theme .ab-value-card h3,
body.dark-theme .adi-section__header h2,
body.dark-theme .adi-step__content h4,
body.dark-theme .adi-sidebar__card h3,
body.dark-theme .adi-section__content h3,
body.dark-theme .adi-benefit__content h4,
body.dark-theme .adpo-policy-card .adpo-policy-card__title,
body.dark-theme ul.adpo-policies-quick-links li a {
    color: #D3D3D3;
}

body.dark-theme .tp-advertising-platform__steps h3,
body.dark-theme .ab-section-title p {
    color: #ccc;
}

body.dark-theme .jackpot-name,
body.dark-theme .ft-jp-heading,
body.dark-theme .profile-name {
    color: #f8f8f8;
}

body.dark-theme .tp-advertising-platform__header p,
body.dark-theme .ab-about-text p,
body.dark-theme .ab-value-card p,
body.dark-theme .adgd-stat-label,
body.dark-theme .adpo-policy-card .adpo-policy-card__content,
body.dark-theme .empty-state h3,
body.dark-theme .profile-bio {
  color: #BEBEBE;
}

body.dark-theme .mn-user-btn i {
  color: #808080;
}

body.dark-theme .btn-outline-secondary,
body.dark-theme .btn-secondary,
body.dark-theme .adgd-chip,
body.dark-theme .ad-feedback-cancel {
    border: 1px solid #383838;
    background: #333;
    color: #BEBEBE;
}

body.dark-theme .btn-outline-secondary:hover,
body.dark-theme .btn-secondary:hover,
body.dark-theme .ad-feedback-cancel:hover {
  opacity: 0.9;
  border: 1px solid #383838;
  background: #333;
  color: #BEBEBE;
}

body.dark-theme .ab-about-section,
body.dark-theme .ab-values-section,
body.dark-theme .ntp-page {
  background-color: var(--dark-theme-color) !important;
}

body.dark-theme .tp-advertising-platform__step,
body.dark-theme .adgd-advertiser-category,
body.dark-theme .adgd-stat-card,
body.dark-theme .adgd-targeting-category,
body.dark-theme .adgd-practice-card,
body.dark-theme .adgd-faq-question,
body.dark-theme .adgd-faq-item,
body.dark-theme .adpo-policy-card,
body.dark-theme .adpo-policies-nav__link,
body.dark-theme .adpo-policy-warning,
body.dark-theme .adpo-policy-info,
body.dark-theme .show-reply-form-btn:hover,
body.dark-theme .mn-dropdown-item:hover {
  background-color: var(--dark-theme-lighter-color) !important;
}

body.dark-theme .prd-card {
  border: 1px solid var(--dark-theme-lighter-color);
}

body.dark-theme .reply-form .card {
  border: 1px solid #333;
}

body.dark-theme .reply-form .form-control {
  border:none !important;
}

body.dark-theme .alert-info {
  background: #045453 !important;
  color:#f8f8f8;
}

body.dark-theme .pricing-card__features-compact .compact-feature {
    border-bottom: 1px solid #383838;
}

body.dark-theme .mn-left-sidebar {
  border-right: 1px solid var(--dark-theme-lighter-color);
}

body.dark-theme .mn-right-sidebar-header h5,
body.dark-theme .sbe-sidebar-header-content {
  color:#fff;
}

body.dark-theme .prd-ellipsis-btn {
  background: var(--dark-theme-lighter2-color);
  border-color: var(--dark-theme-lighter2-color);
}

body.dark-theme .lb-tab.active,
body.dark-theme .lb-refresh-btn {
 background: #333;
 color: #f8f8f8;
}

body.dark-theme .lb-refresh-btn:hover {
  opacity:0.8;
}

body.dark-theme .lb-tab:hover {
 background: #333 !important;
 color: #c0c0c0;
}

body.dark-theme .edt-cancel-btn,
body.dark-theme .payment-cancel-btn,
body.dark-theme .close-payment-modal,
body.dark-theme .stay-here-btn {
 background: #3f3f3f !important;
 border-color: #3f3f3f !important;
 color: #c0c0c0;
}

body.dark-theme .edt-cancel-btn:hover,
body.dark-theme .payment-cancel-btn:hover,
body.dark-theme .close-payment-modal:hover,
body.dark-theme .stay-here-btn:hover {
  background: #474747 !important;
  border-color: #474747 !important;
}

body.dark-theme .lb-refresh-btn,
body.dark-theme .lb-stats {
  border: 1px solid #333 !important;
}

body.dark-theme .prd-ellipsis-btn .fa-ellipsis-h {
  color: #f8f8f8;
}

body.dark-theme .lb-stats .lb-stat-value,
body.dark-theme .ib-error__title,
body.dark-theme .ib-filters__title,
body.dark-theme .ib-empty__title,
body.dark-theme .mn-dropdown-item {
  color: #BEBEBE;
}

body.dark-theme .ib-filters__row--chips {
  border-bottom: 1px solid #333;
}

body.dark-theme .lb-footer {
  border-top: 1px solid #282828 !important;
}

body.dark-theme .pl-poll-title {
  color: #F0F0F0;
}

body.dark-theme .ib-filters__toggle {
    background: #333;
    border: 1px solid #333;
}

body.dark-theme .ib-empty__icon {
  color: #333;
}

body.dark-theme .sideboard-username,
body.dark-theme .sbe-bettor-name {
 color: #ccc;
}

body.dark-theme .mn-right-sidebar-section,
body.dark-theme .sbe-sidebar {
  border: 1px solid #333;
}

body.dark-theme .mn-right-sidebar {
  border-left: 1px solid var(--dark-theme-lighter-color);
}

body.dark-theme .prd-filter-btn {
    background: var(--dark-theme-lighter-color) !important;
    border: 1px solid var(--dark-theme-lighter-color) !important;
    color:#ccc;
}

body.dark-theme .prd-filter-btn:hover {
    border-color: #333 !important;
}

body.dark-theme .mn-navbar,
body.dark-theme .about-menu {
    background: var(--dark-theme-lighter-color);
    border-bottom: 1px solid var(--dark-theme-lighter-color);
}

body.dark-theme .prd-filter-btn.active {
    background: #0066cc !important;
    color: white !important;
    border-color: #0066cc !important;
}

body.dark-theme .pricing-card,
body.dark-theme .pricing-card__features-compact,
body.dark-theme .pf-file-upload {
    border: 1px solid #383838 !important;
}

body.dark-theme .ntp-item:hover {
    background-color: #383838;
}

body.dark-theme .adpo-policies-nav__link {
  background: #333;
  color: #BEBEBE;
}

body.dark-theme .about-nav-link:hover {
    color: var(--primary-color);
    background-color: #333;
}

body.dark-theme .about-nav-link.active {
    color: var(--primary-color);
    background-color: #333;
}

body.dark-theme .adgd-faq-answer {
  background: #282828;
}

body.dark-theme a.dpo-policies-nav__link {
  background: #808080 !important;
}

body.dark-theme .tp-advertising-platform__cta-btn--secondary:hover,
body.dark-theme .adgd-chip {
    background: var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .adi-section__header,
body.dark-theme .adpo-policy-section__header {
    border-bottom: 2px solid #383838;
}

body.dark-theme .adgd-advertiser-list li,
body.dark-theme .adgd-policy-list li,
body.dark-theme .adpo-policy-table th,
body.dark-theme .adpo-policy-table td {
    border-bottom: 1px solid #383838;
}

body.dark-theme .notification-item.unread,
body.dark-theme .ntp-item.ntp-unread {
    background-color: #292929;
    border-left: 3px solid #383838;
}

body.dark-theme .notification-item,
body.dark-theme .ntp-item {
    border-bottom: 1px solid #383838;
}

body.dark-theme .notification-title,
body.dark-theme .ntp-item-title,
body.dark-theme .ntp-dropdown-item,
body.dark-theme .ntp-stat-value,
body.dark-theme #pr-total-predictions-breakdown {
    color: #ccc;
}

body.dark-theme .notification-message,
body.dark-theme .ntp-item-message,
body.dark-theme .ntp-stat-label,
body.dark-theme .pricing-card__features-compact .compact-feature,
body.dark-theme .adcr-policy-list li {
    color: #c1c1c1;
}

body.dark-theme .ntp-dropdown-item:hover {
  background-color: #5b5b5b;
}

body.dark-theme .ntp-btn,
body.dark-theme .pf-header {
    border: 1px solid #333333;
}

body.dark-theme .ntp-btn:hover {
    background-color: #1e1e1e;
}

body.dark-theme .ntp-item-icon {
  background: #333;
  color: #BEBEBE;
}

body.dark-theme .stat-icon,
body.dark-theme .engagement-icon {
  background: #383838;
  color: #BEBEBE;
}

body.dark-theme .tl-header__title-main,
body.dark-theme .tl-header__title,
body.dark-theme .adcr-header__title-main {
  color: #F5F5F5 !important;
}

body.dark-theme .tl-header__description,
body.dark-theme .adcr-header__description,
body.dark-theme .adcr-card-body p,
body.dark-theme p.adtl-header__description {
  color: #E8E8E8 !important;
}

body.dark-theme .prd-match-info {
 color: #BEBEBE;
}

body.dark-theme .adg-image {
    border-bottom: 1px solid #383838;
}

body.dark-theme .advertising-menu {
    background: var(--dark-theme-lighter2-color);
    border-top: 1px solid #383838;
    border-bottom: 1px solid #383838;
}

body.dark-theme .advertising-nav-link:hover {
    color: var(--primary-color);
    background-color: #383838;
}

body.dark-theme .advertising-nav-link.active {
    color: var(--primary-color);
    background-color: #383838;
    font-weight: 600;
}

body.dark-theme .adcr-form-step-indicator::before {
    background-color: #696969;
}

body.dark-theme .adcr-ad-badge,
body.dark-theme .adcr-nav-link {
    background: #333 !important;
    color: #6c757d !important;
}

body.dark-theme .adcr-nav-link {
  color: #ccc !important;
}

body.dark-theme .adcr-nav-link:hover {
  background: #333;
}

body.dark-theme .scroll-container::-webkit-scrollbar-track {
    background: var(--primary-color) !important;
    border-radius: 2px;
}

body.dark-theme .adcr-table th {
    background-color: #383838;
    border-bottom: 2px solid #383838 !important;
}

body.dark-theme .adcr-table td {
    border-bottom: 1px solid #383838 !important;
}

body.dark-theme .mn-dropdown-divider {
    background-color: #383838 !important;
}

body.dark-theme .modal-payment-content .modal-header h3 {
  color: #f8f8f8 !important;
}

body.dark-theme .modal-payment-content .modal-footer {
    border: 1px solid #282828 !important;
}

body.dark-theme .mn-notification-item {
    border: 1px solid #474747;
}

body.dark-theme .modal-payment-content .payment-summary h4,
body.dark-theme .payment-summary h4,
body.dark-theme .payment-summary span,
body.dark-theme .payment-summary strong#summary-amount {
  color: #ccc !important;
}

body.dark-theme .modal-payment-content .payment-summary span,
body.dark-theme .modal-payment-content .payment-summary strong {
  color: #ccc !important;
}

body.dark-theme .pd-header-container {
  border: 1px solid #333;
}

body.dark-theme .pd-main-title {
  color:#f8f8f8;
}

body.dark-theme .pd-meta-label {
  color: #ccc !important;
}

body.dark-theme .pd-meta-value {
  background: #383838;
  border: 1px solid #383838;
  color: #ccc !important;
}

body.dark-theme .action-icon svg {
  fill: #808080 !important;
}

body.dark-theme .mn-quick-btn,
body.dark-theme .mn-dropdown-action {
  background: #282828;
}

body.dark-theme .mn-dropdown-action {
  border-color: #282828;
}

body.dark-theme .mn-notification-text,
body.dark-theme .mn-notification-action-btn {
  color:#ccc;
}

body.dark-theme .mn-notification-action-btn {
    background-color: inherit;
}

body.dark-theme .mn-notification-mark-read:hover,
body.dark-theme .mn-notification-item:hover .mn-notification-mark-read,
body.dark-theme .ib-filter-btn,
body.dark-theme .trn-action-btn {
    background-color:  #333 !important;
    border-color:  #333 !important;
    color: #fff !important;
}

body.dark-theme .ib-filter-btn:hover,
body.dark-theme .trn-action-btn:hover {
    background:  #383838 !important;
    border-color:  #383838 !important;
    color: #fff;
}

body.dark-theme .ib-filter-btn--active {
    background: #667eea !important;
    color: white;
    border-color: #667eea;
}

body.dark-theme .ib-filter-btn--active i {
    color: white;
}

body.dark-theme .mn-dropdown-footer,
body.dark-theme .trn-pagination {
  border-top: 1px solid #383838;
}

body.dark-theme .mn-notifications-tabs,
body.dark-theme .mn-notifications-status {
    background: var(--dark-theme-lighter2-color);
    border-bottom: 1px solid #383838;
}

body.dark-theme .mn-messages-status {
    border: 1px solid #383838;
    background: #333;
}

body.dark-theme .engagement-active {
    border: 1px solid #383838;
    background: #383838;
}

body.dark-theme .mn-messages-search {
    border-bottom: 1px solid #383838;
}

body.dark-theme .mn-dropdown-header h6,
body.dark-theme .adv-progress-header h4 {
    color: #F0F0F0 !important;
}

body.dark-theme .mn-dropdown-text h6,
body.dark-theme .mn-message-name {
  color:#C0C0C0;
}

body.dark-theme .prd-action-btn.liked {
  background: var(--dark-theme-lighter2-color) !important;
}

body.dark-theme .prd-action-btn.liked:hover {
  background: rgba(249, 24, 128, 0.1) !important;
}

body.dark-theme .mn-notifications-tab {
    background: transparent;
    color: #D3D3D3;
}

body.dark-theme .mn-notifications-tab:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.dark-theme .mn-notifications-tab.active {
    background: #333;
    color: #DCDCDC;
}

body.dark-theme .pl-vote-btn-no {
    /* background: linear-gradient(145deg, var(--dark-theme-lighter-color), var(--dark-theme-lighter2-color)); */
    background: linear-gradient(145deg, #333, #282828);
}

body.dark-theme .pl-stat-card-small .pl-stat-number {
    color:#DCDCDC !important;
}

body.dark-theme .poll-context p,
body.dark-theme .comment-content p {
    color:#A9A9A9 !important;
}

body.dark-theme .pl-poll-title {
  color:#f8f8f8 !important;
}

body.dark-theme .poll-context,
body.dark-theme .poll-card .card-body .bg-light,
body.dark-theme .comment-content,
body.dark-theme .pl-list-group .list-group-item,
body.dark-theme .adsc-success-container,
body.dark-theme .adsc-payment-details-section,
body.dark-theme .adsc-help-section {
  background: var(--dark-theme-lighter-color) !important;
}

body.dark-theme .adsc-payment-details-section,
body.dark-theme .adsc-help-section {
  border: 1px solid #282828;
}

body.dark-theme .btn-outline-primary,
body.dark-theme .mn-message-icon,
body.dark-theme .mn-notification-icon {
 background-color: #282828 !important;
}

body.dark-theme .adsc-btn-print {
 background: #282828 !important;
 border: 1px solid #333;
 color: #DCDCDC;
}

body.dark-theme .pl-stat-card {
   background: #303030 !important;
   border: 1px solid #303030;
}

body.dark-theme .pl-stat-label {
  color:#f8f8f8;
}

body.dark-theme .pl-stat-icon,
body.dark-theme .mn-global-action-dropdown {
  background-color: #383838 !important;
}

body.dark-theme .adsc-payment-value {
  color:#C0C0C0;
}

body.dark-theme .btn-outline-primary:hover {
 opacity: 0.9;
}

body.dark-theme .related-poll-item {
    background-color: var(--dark-theme-lighter-color);
    color: #333;
    border-left: 4px solid transparent;
}

body.dark-theme .related-poll-question,
body.dark-theme .pl-list-group .list-group-item span {
   color:#A9A9A9 !important;
}

body.dark-theme .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--primary-color) !important;
}

body.dark-theme .pd-meta-value-wrapper .pd-meta-value {
 background: none !important;
 border:none !important;
 color:#F5F5F5 !important;
}

body.dark-theme .c-follow-user {
  border-color: #404040;
}

body.dark-theme .c-follow-user:hover {
  border-color: #404040;
  opacity:0.9;
}

body.dark-theme .mn-mobile-nav-link,
body.dark-theme .mn-mobile-nav-link i  {
    color: #ccc;
}

body.dark-theme .mn-mobile-menu-item,
body.dark-theme .mn-mobile-dark-mode-toggle span,
body.dark-theme .mn-mobile-menu-item i,
body.dark-theme .mn-mobile-user-info h6 {
    color: #ccc;
}

body.dark-theme .mn-mobile-footer,
body.dark-theme .engagement-stats {
    border-top: 1px solid #282828;
}

body.dark-theme .mn-dropdown-header {
  border-bottom: 1px solid #282828;
}

body.dark-theme .mn-mobile-header {
    border-bottom: 1px solid #282828;
}

body.dark-theme .trn-transactions-table,
body.dark-theme .adv-card,
body.dark-theme .adv-plan-card {
    background: #282828;
    border:1px solid #383838 !important;
}

body.dark-theme .adv-plan-row {
    border-bottom: 1px dashed #383838;
}

body.dark-theme .adv-meta-item {
    color: #f8f8f8;
    background-color: #383838;
    border: 1px solid #333;
}

body.dark-theme .adv-progress-bar {
    background-color: #909090;
}

body.dark-theme .adv-progress-fill-large {
   background: linear-gradient(90deg, #d4af37, #f5d742, #d4af37);
}

body.dark-theme .adv-dropdown-menu {
   background: #333;
}

body.dark-theme .adv-dropdown-item {
  color: #DCDCDC;
}

body.dark-theme .adv-metric-label {
  color: #DCDCDC;
}

body.dark-theme .adv-dropdown-item:hover {
  background: #383838;
}

body.dark-theme .trn-transactions-table thead {
    background: linear-gradient(135deg, #383838 0%, #333 100%);
}

body.dark-theme .trn-transactions-table tbody tr {
    border-bottom: 1px solid #383838;
    color:#fff !important;
}

body.dark-theme .trn-transactions-table tbody tr:hover {
    background: #292929;
}

body.dark-theme .trn-transactions-table th {
   color:#f2f2f2 !important;
}

body.dark-theme .trn-transactions-table td {
    color: #f0f0f0 !important;
    border-bottom: 1px solid #333;
}

body.dark-theme .trn-transactions-table .trn-amount,
body.dark-theme .trn-transactions-table .trn-reference {
    color: #f0f0f0 !important;
}

body.dark-theme .trn-card-header,
body.dark-theme .adv-metric-item,
body.dark-theme .adv-date-range,
body.dark-theme .adv-progress-section {
  background: #333 !important;
  border-color: #282828 !important;
}

body.dark-theme .adv-date-label,
body.dark-theme .adv-info-label {
   color: #ccc !important;
}

body.dark-theme .adv-date-value,
body.dark-theme .adv-info-value {
  color: #f2f2f2 !important;
}

body.dark-theme .trn-product-badge .trn-badge {
  background-color: #505050 !important;
  border-color: #505050 !important;
  color: #ccc;
}

body.dark-theme .adv-progress-header span {
  color: #f8f8f8;
  background: inherit;
}

body.dark-theme .adv-progress-footer span {
  background: #505050 !important;
  border-color: #505050 !important;
  color: #ccc;
}

body.dark-theme .trn-reference,
body.dark-theme .trn-value,
body.dark-theme .trn-amount-value,
body.dark-theme .abt-tagline,
body.dark-theme .adv-card-header h2 {
   color:#f8f8f8 !important;
}

body.dark-theme .adv-card-header {
    border-bottom: 2px solid #333;
}

body.dark-theme .trn-transaction-card {
    background: #282828 !important;
    border:1px solid #383838 !important;
}

body.dark-theme .adv-progress-label {
  color:#ccc;
}

body.dark-theme .adv-progress-value {
  background: #484848 !important;
  border: 1px solid #484848 !important;
}

body.dark-theme .adv-progress-number,
body.dark-theme .adcr-price {
   color: #DCDCDC;
}

body.dark-theme .adcr-price span,
body.dark-theme .adcr-plan-header h3 {
  color: #DCDCDC;
}

body.dark-theme .trn-amount-wrapper {
    background: #282828 !important;
}

body.dark-theme .adv-progress-subtitle {
    background: inherit !important;
}

body.dark-theme .trn-amount-label {
    color:#ccc;
}

body.dark-theme .adcr-table th {
    color: #ccc;
}

body.dark-theme .adcr-table td {
    color: #ccc;
}

body.dark-theme .adcr-table tr:hover {
    background-color: #282828;
}

/* Dark Theme Support */
body.dark-theme .st-confirm-header h3 {
    color: #f9fafb;
}

body.dark-theme .st-confirm-header p {
    color: #9ca3af;
}

body.dark-theme .st-confirm-warning {
    background-color: rgba(127, 29, 29, 0.3);
    border-left-color: #dc2626;
}

body.dark-theme .st-confirm-warning span {
    color: #fecaca;
}

body.dark-theme .st-confirm-details {
    background-color: #282828;
}

body.dark-theme .st-confirm-details p {
    color: #d1d5db;
}

/*  */
body.dark-theme .mb-message-card {
    background-color: #1f2937;
    border-color: #383838;
}

body.dark-theme .mb-message-card--unread {
    background-color: #422006;
}

body.dark-theme .mb-message-card__title {
    color: #e5e7eb;
}

body.dark-theme .mb-modal__content {
    background-color: #1f2937;
}

body.dark-theme .mb-modal__header {
    border-bottom-color: #374151;
}

body.dark-theme .mb-modal__title {
    color: #e5e7eb;
}

body.dark-theme .mb-modal__content {
    color: #9ca3af;
}

body.dark-theme .mb-modal__fullscreen {
  background-color: inherit;
}

body.dark-theme .mn-message-item,
body.dark-theme .mn-notification-item {
    border-bottom-color: #303030;
}

body.dark-theme .mn-message-item:hover,
body.dark-theme .mn-notification-item:hover {
    background-color: #333;
}

body.dark-theme .mn-message-item.unread {
    background-color: #422006;
}

body.dark-theme .mn-message-item.unread:hover {
    background-color: #451a03;
}

body.dark-theme .mn-message-title,
body.dark-theme .mn-notification-title {
    color: #e5e7eb;
}

body.dark-theme .mn-message-preview,
body.dark-theme .mn-notification-message {
    color: #9ca3af;
}

body.dark-theme .phone-input-group {
    background: #2d2d2d;
    border-color: #404040;
}

body.dark-theme .phone-input-group .country-code-select {
    background: #3d3d3d;
    border-right-color: #404040;
    color: #e0e0e0;
}

body.dark-theme .phone-input-group .phone-input {
    color: #e0e0e0;
}

body.dark-theme .phone-input-group .phone-input::placeholder,
body.dark-theme .lb-distribution-count,
body.dark-theme .lb-jackpot-banner .lb-jackpot-count {
    color: #888;
}

body.dark-theme .phone-helper-text {
    color: #adb5bd;
}

body.dark-theme .mb-messages::-webkit-scrollbar-track {
    background: #374151;
}

body.dark-theme .mb-messages::-webkit-scrollbar-thumb {
    background: #6b7280;
}

body.dark-theme .lb-jackpot-banner:hover .lb-jackpot-count {
    background: inherit;
}

body.dark-theme .lb-distribution-bar {
  background-color: #484848;
}

body.dark-theme .modal-stat-card,
body.dark-theme .modal-achievements-list,
body.dark-theme .modal-achievement-item {
   background: inherit;
}

body.dark-theme .phone-display-group {
   background-color: #2a2b2c;
   border-radius: 8px;
}

body.dark-theme .phone-display {
    background-color: #2a2b2c;
    color: #f8f8f8;
    border-radius: 8px 0 0 8px;
}

body.dark-theme #pfNewPhoneInput {
   border: none;
}

.theme-toggle {
  margin: 20px;
  font-size: 1.8rem;
}

.theme-toggle input[type="radio"] {
  margin-right: 10px;
}

.c-margin-spinner{
  margin: 30px !important;
}

span.c-match-teams.c-match-teams-m,
span.c-match.c-match-date-m {
  font-size: 1.3rem !important;
  color:#282828 !important;
}

.c-jp-heading{
  text-align: center !important;
  /* padding: 0px !important; */
  border-radius:1rem !important;
  color:#303030 !important;
}

.c-side-heading{
  font-size:1.6rem !important;
  color:#303030 !important;
  margin-top: 0.6rem !important;
}

.c-account__content{
  border-radius:0.7rem !important;
  padding:1rem !important;
}

.c-advertise-here{
  font-size:1.4rem;
}

.icon-btn .like-reply-count {
  margin-left: 4px;
  font-size: 1.3rem;
}

.icon-btn .like-reply-btn {
  font-size: 1.4rem;
}

.c-unliked-reply{
  font-size: 1.3rem !important;
}

.c-comment-body{
  font-size: 1.4rem !important;
  color:#282828 !important;
  line-height: 1.9rem !important;
  margin-top:0.3rem !important;
}

.c-btn-view-more-replies{
  margin-left:12rem !important;
  margin-top:-0.6rem !important;
  margin-bottom: 10px !important;
  border: none !important;
}

button.c-view-replies{
  border: none !important;
  padding: 0px !important;
  background-color:inherit !important;
  margin-left: 6rem !important;
}

button.c-view-replies:hover{
  color: var(--secondary-color);
}

/* Start comments */
.reply-box {
  margin-top: 10px;
}

.reply-button {
  cursor: pointer;
  color: var(--primary-color);
  margin-left: 10px;
}

.c-ad-engage-link{
  color: #004494;
  text-decoration: underline;
}

.c-ad-engage-link:hover{
  color: #004494;
  text-decoration: none;
}

.shadow-sm {
  box-shadow: 1 .250rem .50rem rgba(0, 0, 0, .15);
}

.c-prediction-list-no-border{
  border: none !important;
}

.c-scrollable-container-modal{
  padding:0px;
  margin-bottom:30px;
  background-color:#FCFCFC;
  border:1px solid #E8E8E8;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.c-scrollable-container-modal .c-match{
  font-size: 1.3rem !important;
}

.c-jumbotron-pricing{
  background-color: var(--light-color) !important;
  /* padding: 20px !important; */
  margin-top: 10px !important;
  border-radius:10px !important;
}

.c-jumbotron-pricing p{
  font-weight: 500 !important;
  font-size: 1.2rem !important;
 color: #000 !important;
  font-weight:500 !important;
}

.c-or{
  text-align: center !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.c-or span{
  font-weight:600 !important;
  font-size:1.6rem !important;
}

.c-data,
.info-data-home,
.info-data-side,
.info-data-jp{
  color:#000 !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
}

ul li.c-c-list-group-item{
  padding:0.3rem 1rem !important;
  background-color:var(--light-color) !important;
}

ul li.c-c-list-group-item,
li.c-c-list-group-item table tr td{
  font-size: 1.2rem !important;
  color:#000 !important;
  font-weight: 500 !important;
}

ul li.c-c-list-group-item table tr td a,
li.c-c-list-group-item a{
  font-size: 1.2rem !important;
  color:#000 !important;
  font-weight: 500 !important;
}

 .list-group .c-c-list-group{
  color:#888888 !important;
  /* background-color: #fff !important; */
  background-color:var(--light-color) !important;
  font-size: 1.3rem !important;
}

ul.list-group.c-c-list-group li{
padding: 5px 6px !important;
border:none !important;
font-weight: 500 !important;
color:#000 !important;
font-size: 1.4rem !important;
background-color:var(--light-color) !important;
}

.c-buy{
  color: green !important;
  font-size:1.8rem !important;
  font-weight: 600 !important;
}

#predictions {
  max-width: 600px;
  margin: 0 auto;
}

/* Ads */
.ad {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #F5F5F5;
  border: 1px solid #E8E8E8;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  position: relative;
}

.ad-label {
  font-size: 1.2rem !important;
  color: #333;
  line-height: 1.8rem !important;
}

.ad-image {
  max-width: 100px;
  max-height: 100px;
  margin-right: 15px;
  border-radius: 5px;
  object-fit: cover;
}

.ad-image-preview {
  max-width: 120px;
  height: 90px;
}

.ad h3 {
  margin: 10px 0 5px;
  font-size: 18px;
}

.ad p {
  margin: 0;
  font-size: 14px;
  color: #555;
}

.ad-content {
  display: flex;
  align-items: center;
  gap: 10px;
  width:100%;
  border-radius: 0 !important;
}

.ad-title{
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  line-height: 1.6rem !important;
}

.ad-description{
  line-height: 1.6rem !important;
  font-size: 1.3rem !important;
}

.ad-link{
  margin-left: 0.5rem !important;
  color:#527CAE !important;
  font-size: 1.3rem !important;
}

.ad-link:hover{
  text-decoration: underline !important;
}

.main__content_wrapper.c-auth-main__content_wrapper {
  background-color: var(--bg-color) !important;
}

.c-textarea {
  resize: both;
  overflow: auto;
  min-width: 100%;
  min-height: 200px;
}

.c-hr-spacer{
  border:none !important;
  background-color:#fff !important;
  margin-top:5rem !important;
  margin-bottom:4rem !important;
}

.c-panel .c-border-none, .c-border-none{
  border: none !important;
}

.c-d-flex-mb{
  margin-bottom: 20px !important;
}

.bg-light{
  background-color: #F5F5F5 !important;
}

.p-10 {
   padding:10px !important;
}

.pb-10{
  padding-bottom:10px !important;
}

.pb-20{
  padding-bottom:20px !important;
}

.main__content_wrapper.c-panel .account__table--area.c-account__table--area{
  background-color: #fff !important;
  border-radius: 10px !important;
}

.c-form-container{
  background-color: #fff !important;
  border-radius: 10px !important;
}

.c-recovery-items{
  background-color:#fff;
  padding:1rem 2rem;
  border-radius:5rem;
  line-height: 1.9rem !important;
}

.c-recovery-items a {
  text-decoration: underline;
}

.offcanvas__menu_item{
  font-weight: 600 !important;
}

ul.c-services-list{
  padding: 0px !important;
  margin-top: 3px !important;
}

ul.c-services-list li{
  list-style-type: none !important;
  padding: 3px 0px !important;
  margin: 0px !important;
}

.c-username-follow{
  font-size:1.4rem;
  font-weight:550;
  color:#505050;
  line-height:1.2rem;
}

.error__content{
  margin: 0px 0px !important;
}

.section__heading{
  font-size: 2rem !important;
}

ul.c-blog-list li{
  line-height: 2.9rem !important;
  list-style-type:disc !important;
  margin-left: 20px !important;
  font-size: 1.5rem !important;
  color: #282828 !important;
}

.c-bet-list-container-border{
  border:1px solid #F0F0F0 !important;
}

.theme-toggle label{
  cursor: pointer;
}

.center-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 100px;
}

.bg-lighter-color{
  background-color: #FCFCFC !important;
}

.c-matches-mobile{
  background-color: #f8f8f8 !important;
  padding: 10px !important;
  border-radius: 8px !important;
}

/* Start Info Alert */
.info-alert {
  display: flex;
  align-items: center;
  background-color: #e9f5ff;
  color: #0d6efd;
  padding: 10px 15px;
  border: 1px solid #b6e0fe;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 1.4rem;
  margin-top: 10px;
}
/* End Info Alert */

ul.c-bet-tips-list li{
  background-color:#f8f8f8;
  line-height: 1.7rem !important;
  padding-top: 3px !important;
}

a.c-search-tips{
  color: var(--primary-color);
  text-decoration: underline;
}

a.c-search-tips:hover{
  opacity: 0.8 !important;
}

.c-search-tips-form .form-label{
  font-size: 1.2rem !important;
  padding: 0px !important;
  line-height: 1.5rem !important;
  margin-bottom: 2px !important;
  margin-top: 6px !important;
}

.form-control::before{
  outline: none !important;
}

  /* Start Home CSS */
  .head-logo {
    height: 500px;
    margin-bottom: 4rem;
    position: relative;
    background-color: #444;
    user-select: none;
}

.head-logo img {
    width: 100%;
    height: 100%;
    mix-blend-mode: overlay;
}

.head-logo h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.head-logo h4 {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

@media only screen and (max-width: 576px) {
  .head-logo {
    height: 300px;
    margin-bottom: 4rem;
    position: relative;
    background-color: #444;
    user-select: none;
  }

  .head-logo img {
      width: 100%;
      height: 50%;
      mix-blend-mode: overlay;
  }

  .head-logo h1 {
      position: absolute;
      top: 40%;
      left: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
      text-align: center;
  }

  .head-logo h4 {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
}
/* End Home CSS */

.c-cancel-btn{
  background-color: #808080 !important;
  color:#000 !important;
}

/* Start Ad Image CSS */
.ad-image-container {
  position: relative;
  display: inline-block;
}

.ad-image-container .ad-edit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* Icon color */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  padding: 4px 10px;
  border-radius: 50%;
  opacity: 0.9; /* Hide by default */
  transition: opacity 0.3s ease;
}

.ad-image-container:hover .ad-edit-icon {
  opacity: 1; /* Show on hover */
}
/* End Ad Image CSS */

.c-edit-setting{
  padding: 5px 10px !important;
  border-radius: 50px !important;
  background-color: #F0F0F0 !important;
}

.c-edit-setting:hover{
  background-color: #E8E8E8 !important;
}

.c-select {
  /* border: 0; */
  background: var(--white-color);
  height: 5rem;
  padding: 0 3.3rem 0 1.8rem;
  -webkit-appearance: none;
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--text-gray-color);
  border: 1px solid #E8E8E8;
  border-radius: 10px;
  width: 100%;
}

.c-bg-light-color{
  background-color: var(--bg-light-color);
}

.c-profile{
  background-color: var(--bg-light-color);
  border-radius: 10px !important;
  padding: 10px !important;
}

.c-align-left{
  text-align: left !important;
}

.c-profile-name{
  display: block;
  margin-bottom: 0.3rem;
  line-height: 1.5rem;
  font-size: 1.4rem !important;
  font-weight:600;
}

.c-profile-username,
.c-physical-address,
.c-additional-info {
  display: block;
  margin-bottom: 0.3rem;
  line-height: 2.0rem;
  font-size: 1.3rem;
}

.c-physical-address{
  margin-top:10px;
}

.c-search-stats {
  border-radius: 2.5rem !important;
  width: 100% !important;
  /* font-weight: 600 !important; */
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-gray-color);
}

.c-search-stats option {
  /* font-weight: 600 !important; */
  font-size: 1.4rem;
  cursor: pointer !important;
}

.c-message-modal .modal-content{
  text-align: center !important;
  padding-bottom: 30px !important;
}

.c-message-modal span.icon{
  font-size: 3.6rem !important;
  color:#808080 !important;
}

.c-message-modal .modal-text{
  font-size: 1.5rem !important;
  color:#282828 !important;
}

.c-box-open{
  font-size:4.8rem !important;
  color:#808080 !important;
}

.c-line-height-2{
  line-height:2.0rem !important;
}

.c-terms-items {
  padding: 20px 17px 20px;
}

.c-terms-items a,
.c-terms-items span {
  font-size: 1.1rem !important;
}

/* Info */

.user-info {
  flex: 1;
}

.prediction-date {
  font-size: 1.2rem !important;
  color: #696969 !important;
}

.prediction-date:hover {
  color: #696969 !important;
}

.no-more {
  text-align: center;
  padding: 20px;
  color: #95a5a6;
  font-style: italic;
}

.error-message {
  color: #e74c3c;
  text-align: center;
  padding: 20px;
}

.comment {
  /* display: flex; */
  margin-bottom: 1px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}

.comment-content {
  flex: 1;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 6px;
}

.comment-user {
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 5px;
  padding: 3px;
}

.comment-text {
  font-size: 1.2rem !important;
}

.comment-time {
  font-size: 1.2rem;
  color: #95a5a6;
  margin-top: 5px;
}

.reply {
  margin-left: 30px;
  margin-top: 10px;
}

.view-more-comments {
  color: #3498db;
  font-size: 1.4rem;
  cursor: pointer;
  margin-top: 10px;
  display: inline-block;
}

.view-more-comments:hover {
  text-decoration: underline;
}

.no-more-message {
  display: none; /* Hidden by default */
  text-align: center;
  padding: 20px;
  color: #666;
  font-style: italic;
}

.c-text-underline{
  text-decoration: underline !important;
}

.c-link{
  color: var(--secondary-color) !important;
}

.c-link:hover{
  text-decoration: underline !important;
}

.account__table--body__child--items a.c-link{
  font-weight: 400 !important;
}

.ml-3{
  margin-left: 0.3rem !important;
}

.c-timeline-link{
  font-size: 1.4rem !important;
  color: var(--secondary-color) !important;
  /* text-decoration: underline !important; */
  border-radius: 2.5rem !important;
  padding: 1rem 1.5rem !important;
}

.c-timeline-link:hover{
  text-decoration: none !important;
}

.c-mt-12{
  margin-top: 12px !important;
}

.c-image-follow{
  border-radius: 10rem !important;
  width: 6.4rem !important;
  height: 6.4rem !important;
}

.c-full-name{
  display: block;
  margin-bottom: 0.3rem;
  line-height: 1.5rem;
  font-size: 1.8rem;
  font-weight:600;
}

.c-active-border-color {
  border-color: var(--secondary-color) !important;
}

.c-jp-title{
  text-align: left !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
}

.c-follows-list{
  margin: 0px 0px 10px 0px !important;
}

.c-unfollow-btn-modal,
.c-cancel-btn-modal{
  border-radius: 2.5rem !important;
  padding: 1rem 2rem !important;
  margin-top: 7px !important;
  font-size: 1.4rem !important;
}

.c-unfollow-btn-modal{
  background-color: var(--secondary-color) !important;
  border: 1px solid var(--secondary-color) !important;
  color:#fff !important;
}

.c-cancel-btn-modal{
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color:#333 !important;
}

.c-modal-title-modal{
  font-size: 1.8rem !important;
}

/* Start Modal CSS */
.unfollow-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050;
}
.unfollow-modal .modal-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.unfollow-modal .modal-box {
  position: relative;
  background: white;
  padding: 20px;
  border-radius: 10px;
  z-index: 1060;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  min-width: 300px;
  max-width: 90%;
}
.unfollow-modal .modal-box h3 {
  margin-top: 0;
  font-size: 1.8rem;
  margin-bottom: 15px;
}
.unfollow-modal .modal-buttons {
  gap: 10px;
}
.unfollow-modal button {
  padding: 8px 16px;
  font-size: 1.4rem;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.unfollow-modal .confirm,
.unfollow-modal .cancel {
    font-size: 1.4rem !important;
    font-weight: var(--body-line-height);
    line-height: 2.0rem !important;
    display: block;
    width:100% !important;
    padding: 0.1 1.8rem !important;
    letter-spacing: 0.2px;
    border-radius: 2.5rem !important;
    margin: 10px 5px;
    cursor: pointer;
}

.unfollow-modal .confirm {
  background: #ff4d4f !important;
  color: var(--white-color) !important;
  border: 1px solid #ff4d4f !important;
}

.unfollow-modal .cancel {
  background: var(--white-color) !important;
  color: var(--light-color2) !important;
  border: 1px solid #ccc !important;
}

.unfollow-modal .confirm:hover,
.unfollow-modal .cancel:hover{
  opacity: 0.9;
}
/* End Modal CSS */

.c-follow-user {
  font-weight: 500 !important;
  font-size: 1.4rem !important;
  color: #2680EB !important;
  padding: 0px 5px !important;
}

.bet .bettor a:hover{
  text-decoration: underline;
}

.btn.c-btn-follows.following,
.c-follows-list .follow-btn.following {
  background: inherit !important;
  color: #000 !important;
  border: 1px solid #DCDCDC !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  line-height: 2.5rem !important;
  padding: 0.4rem 1.4rem !important;
  letter-spacing: 0.2px;
  border-radius: 2.5rem !important;
  cursor: pointer;
}

.btn.c-btn-follows.following:hover,
.c-follows-list .follow-btn.following:hover {
  background: #E0E0E0 !important;
}

.btn.c-btn-follows,
.c-follows-list .follow-btn {
  background: var(--secondary-color) !important;
  color: var(--white-color) !important;
  border: 1px solid var(--secondary-color) !important;
  font-size: 1.4rem !important;
  font-weight: var(--body-line-height);
  line-height: 2.5rem !important;
  padding: 0.4rem 1.4rem !important;
  letter-spacing: 0.2px;
  border-radius: 2.5rem !important;
  cursor: pointer;
}

.btn.c-btn-follows:hover,
.c-follows-list .follow-btn:hover {
  opacity: 0.9;
}

.c-terms-items-side {
  position: fixed;
  right: 0;
  bottom: 10px;
  width:25%;
}

.c-terms-items-side a,
.c-terms-items-side span {
  font-size: 1.1rem !important;
}

.c-terms-items-side a:hover{
  text-decoration: underline;
}

/* User list styles */
.c-follows-list {
    padding: 0 !important;
}

.c-follows-list > div {
    padding: 5px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background-color 0.2s !important;
    margin-bottom: 0px !important;
}

.c-follows-list > div:hover {
    background-color: #f9f9f9 !important;
}

.c-follows-list > div:last-child {
    border-bottom: none !important;
}

.c-img-width {
    width: 60px !important;
}

.c-follow-thumbnail {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.c-user-info {
    margin-left: 10px !important;
}

.c-name {
    font-weight: bold !important;
    color: #333 !important;
    text-decoration: none !important;
}

.c-username {
    color: #666 !important;
    text-decoration: none !important;
    font-size: 0.9em !important;
}

.c-name:hover,
.c-username:hover {
    text-decoration: underline !important;
}

/* Loading indicator */
.loading-indicator {
    text-align: center !important;
    padding: 20px !important;
    color: #666 !important;
}

.loading-indicator::after {
    content: "";
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #f3f3f3 !important;
    border-top: 2px solid var(--primary-color) !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin-left: 10px !important;
}

@keyframes spin {
    0% { transform: rotate(0deg) !important; }
    100% { transform: rotate(360deg) !important; }
}

/* Not found message */
.c-not-found {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #666 !important;
}


/* ========== PREDICTIONS ========== */

.predictions-container {
    margin: 0 auto;
    padding: 0px;
    height: 100%;
}

.c-prediction-item {
    display: flex;
    gap: 16px;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.profile-container {
    flex-shrink: 0;
}

.c-profile-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-user img.c-profile-img{
  margin-left: 2px;
}

.prediction-info {
    flex: 1;
}

.bettor {
    /* display: flex; */
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    /* flex-wrap: wrap; */
}

.bettor a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.6rem;
}

.bettor a:hover {
    color: #007bff;
}

.c-fa-circle {
    vertical-align: middle !important;
    color: #808080;
    font-size: 3px;
    color: #6c757d;
    margin-left:1px !important;
    margin-right:1px !important;
}

.c-prediction-date {
    color: #6c757d;
    font-size: 1.3rem;
    /* float:right !important; */
}

.jp-name {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    display: block;
    margin-bottom: 12px;
    font-size: 1.4rem;
}

.jp-name:hover {
    text-decoration: underline;
}

.view-prediction {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 2.0rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    width: 100%;
    text-align: center;
    letter-spacing: 1.5px;
}

.view-prediction:hover {
    background: #f8f8f8;
    border-color: #C4C4C4;
}

.c-bet-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0 !important;
    padding-top: 16px;
    /* border-top: 1px solid #e9ecef; */
}

.betting-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ========== COMMENTS & REPLIES ========== */

.comment-section {
    background: #fafafa;
    border-radius: 16px;
    padding: 5px !important;
    /* margin-top: 5px !important; */
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.comment-section.hidden {
    display: none;
}

.comment-thread {
    border-left: 2px solid var(--comment-border-color);
    padding-left: 10px;
    margin-left: 10px;
}

.comment {
    background: #fff;
    padding: 10px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid #e9ecef !important;
    transition: all 0.3s ease;
}

.comment:hover {
    background: #f8f8f8;
}

.reply {
    background: #f8f9fa;
    border-left: 1px solid var(--comment-border-color);
    margin-left: 12px;
    padding-left: 20px;
    border-radius: 0 12px 12px 0;
}

.comment-meta {
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    flex-wrap: wrap;
}

.comment-user {
    display: flex;
    align-items: center;
    justify-content: center !important;
    align-items: center !important;
}

.comment-user-info {
    display: flex;
    flex-direction: column;
    margin-left: 5px !important;
}

.comment-username {
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 2rem !important;
}

.comment-username:hover {
    color: #007bff;
}

.comment-date {
    font-size: 1.2rem;
    color: #6c757d;
    line-height: 2rem !important;
}

.comment-body {
    color: #2c3e50;
    line-height: 1.6;
    margin-bottom: 2px !important;
    font-size: 1.3rem !important;
    word-wrap: break-word;
    padding: 10px;
}

.comment-actions {
    display: flex;
    justify-content:left !important;
    margin-top: 0px !important;
    align-items: center;
    flex-wrap: wrap;
    padding:0 !important;
}

/* Loading States */
.loading-indicator {
    text-align: center;
    padding: 30px;
    color: #6c757d;
    font-size: 1.5rem;
}

.comment-skeleton {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #ffffff;
    border-radius: 16px;
    margin-bottom: 16px;
    animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e9ecef;
}

.skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-line {
    height: 14px;
    background: #e9ecef;
    border-radius: 7px;
}

.skeleton-line.short {
    width: 30%;
}

.skeleton-line.medium {
    width: 60%;
}

.skeleton-line.long {
    width: 90%;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes highlight {
    0% { background: #d4edda; }
    100% { background: transparent; }
}

.comment-posted {
    animation: highlight 2s ease;
}

/*  */
.post-prediction-modal-content .modal-header h3 {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    color: white;
}

.c-modal-form {
    padding: 24px;
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 1.5rem;
}

.selectbox {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e1e5e9;
    border-radius: 14px;
    font-size: 1.5rem;
    background: white;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 14px;
}

.selectbox:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

#modal-profile-pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 2.2rem;
    flex-shrink: 0;
}

.c-your-prediction {
    border: none;
    background: none;
    font-size: 2rem;
    font-weight: 600;
    color: #2c3e50;
    width: 100%;
    outline: none;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.c-your-prediction::placeholder {
    color: #a0a0a0;
    font-weight: normal;
}

.prediction-counter {
    text-align: center;
    padding: 16px;
    font-size: 1.5rem;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.prediction-counter.valid {
    color: #28a745;
    background: #d4edda;
    border: 2px solid #c3e6cb;
}

.prediction-counter.invalid {
    color: #dc3545;
    background: #f8d7da;
    border: 2px solid #f5c6cb;
}

.c-jackpot-name {
  font-size: 1.6rem;
  font-weight: 700;
}

/* Alert Styles */
.alert {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 1.5rem;
    border: 2px solid transparent;
    font-weight: 500;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.char-counter {
    text-align: right;
    font-size: 1.4rem !important;
    color: #6c757d;
    margin-top: 12px;
    font-weight: 500;
}

.char-counter.near-limit {
    color: #ffc107;
}

.char-counter.over-limit {
    color: #dc3545;
}

.prediction-preview {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    text-align: center;
    border: 2px solid #e9ecef;
}

.prediction-preview-text {
    font-family: 'Courier New', monospace;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #2c3e50;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-60px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ========== MATCHES TABLE MODAL ========== */

.matches-modal .matches-controls {
    padding: 20px 24px !important;
    background: white !important;
    border-bottom: 1px solid #e9ecef !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.matches-modal .matches-filter {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.matches-modal .search-container {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    min-width: 250px !important;
}

.matches-modal .search-matches {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: 2px solid #e9ecef !important;
    border-radius: 25px !important;
    font-size: 1.4rem !important;
    transition: all 0.3s ease !important;
    background: white !important;
}

.matches-modal .search-matches:focus {
    outline: none !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.matches-modal .matches-table-container {
    flex: 1 !important;
    overflow-y: auto !important;
    background: white !important;
    padding: 20px !important;
    border-radius: 0 !important;
}

.matches-modal .matches-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #fff !important;
    min-height: 200px !important;
    /* padding: 20px !important; */
}

.matches-modal .matches-table th {
    background: #f8f9fa !important;
    color: #2c3e50 !important;
    padding: 16px 12px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 1.4rem !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    border-bottom: 2px solid #e9ecef !important;
}

.matches-modal .matches-table td {
    padding: 16px 12px !important;
    border-bottom: 1px solid #e9ecef !important;
    font-size: 1.4rem !important;
    vertical-align: top !important;
}

.matches-modal .matches-table tr:last-child td {
    border-bottom: none !important;
}

.matches-modal .matches-table tr:hover {
    background: #f8f9fa !important;
}

/* Match team styling */
.match-team:last-child {
    margin-bottom: 0 !important;
}

.team-logo {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    color: white !important;
    border: 2px solid #e9ecef !important;
    flex-shrink: 0 !important;
}

.team-name {
    font-weight: 500 !important;
    color: #2c3e50 !important;
    line-height: 1.4 !important;
    font-size: 1.4rem !important;
}

/* Match status */
.match-status {
    padding: 6px 12px !important;
    border-radius: 15px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: inline-block !important;
    min-width: 80px !important;
}

.status-upcoming {
    background: #e3f2fd !important;
    color: #1976d2 !important;
    border: 1px solid #bbdefb !important;
}

.status-live {
    background: #ffebee !important;
    color: #d32f2f !important;
    border: 1px solid #ffcdd2 !important;
    animation: pulse 2s infinite !important;
}

.status-finished {
    background: #e8f5e8 !important;
    color: #2e7d32 !important;
    border: 1px solid #c8e6c9 !important;
}

/* Filter controls improvements */
.filter-btn {
    padding: 10px 20px;
    border: 2px solid #e9ecef;
    background: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    transition: all 0.3s ease;
    color: #6c757d;
    white-space: nowrap;
}

.filter-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    transform: scale(1.05);
}

.filter-btn:hover:not(.active) {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-1px);
}

/* Empty state for matches */
.matches-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.matches-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
    display: block;
}

.matches-empty-state h4 {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: #495057;
}

.matches-empty-state p {
    font-size: 1.4rem;
    opacity: 0.7;
}

/* Mobile Responsive for Matches Modal */
@media (max-width: 768px) {
    .mt-matches-list {
        overflow-y: scroll !important;
        /* Ensure proper sizing */
        max-height: 100%; /* Adjust as needed */
    }

    /* For Webkit browsers (Chrome, Safari, Edge) */
    .mt-matches-list::-webkit-scrollbar {
        width: 10px; /* Width of the entire scrollbar */
        height: 10px; /* For horizontal scrollbars */
    }

    .mt-matches-list::-webkit-scrollbar-track {
        background: #f1f1f1; /* Color of the track */
        border-radius: 5px;
        margin: 4px 0;
    }

    .mt-matches-list::-webkit-scrollbar-thumb {
        background: #888; /* Color of the scroll thumb */
        border-radius: 5px;
        border: 2px solid #f1f1f1; /* Creates padding effect */
    }

    .mt-matches-list::-webkit-scrollbar-thumb:hover {
        background: #555; /* Darker on hover */
    }

    .mt-matches-list::-webkit-scrollbar-thumb:active {
        background: #333; /* Even darker when clicking */
    }

    .mt-matches-list::-webkit-scrollbar-corner {
        background: transparent; /* Corner between vertical and horizontal */
    }

    .matches-modal .matches-modal-header {
        padding: 5px 10px !important;
    }

    .matches-modal .matches-modal-header h3 {
        font-size: 1.8rem;
    }

    button.close-modal,
    .close-payment-modal {
        font-size: 1.6rem;
        width: 32px !important;
        height: 32px !important;
    }

    .matches-modal .matches-controls {
        padding: 16px 20px;
        gap: 12px;
    }

    .matches-modal .matches-filter {
        gap: 6px;
        justify-content: center;
    }

    .matches-modal .search-container {
        min-width: 100%;
        order: -1; /* Move search to top on mobile */
    }

    .filter-btn {
        padding: 8px 16px;
        font-size: 1.2rem;
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    .team-logo {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
    }

    .team-name {
        font-size: 1.3rem;
    }

    .match-status {
        padding: 4px 8px;
        font-size: 1.0rem;
        min-width: 70px;
    }
}

@media (max-width: 480px) {
    .matches-modal .matches-filter {
        flex-direction: column;
        gap: 8px;
    }

    .filter-btn {
        width: 100%;
    }

    .matches-table {
        min-width: 500px;
    }
}

/* Filter controls improvements */
.matches-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    align-items: center;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid #e9ecef;
    background: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    transition: all 0.3s ease;
    color: #6c757d;
}

.filter-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    transform: scale(1.05);
}

.filter-btn:hover:not(.active) {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-1px);
}

.search-matches {
    padding: 10px 16px;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    font-size: 1.4rem;
    width: 200px;
    transition: all 0.3s ease;
    margin-left: auto;
}

.search-matches:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    width: 250px;
}

/* Empty State */
.empty-comments {
    text-align: center;
    padding: 50px 30px;
    color: #6c757d;
}

.empty-comments-icon {
    font-size: 60px;
    margin-bottom: 20px;
    opacity: 0.5;
}

/* Error States */
.comment-error {
    background: #f8d7da;
    color: #721c24;
    padding: 16px 20px;
    border-radius: 12px;
    margin: 12px 0;
    font-size: 1.4rem;
    border: 2px solid #f5c6cb;
    font-weight: 500;
}

.toast {
    position: fixed;
    top: 30px;
    right: 30px;
    padding: 18px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 10000;
    max-width: 350px;
    font-size: 1.5rem;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    font-weight: 500;
}

.toast-success {
    background: #d4edda;
    color: #155724;
    border: 2px solid #c3e6cb;
}

.toast-error {
    background: #f8d7da;
    color: #721c24;
    border: 2px solid #f5c6cb;
}

.toast-warning {
    background: #fff3cd;
    color: #856404;
    border: 2px solid #ffeaa7;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .predictions-container {
        padding: 0;
    }

    .prediction {
        padding: 8px;
        /* margin-bottom: 16px; */
    }

    .comment {
        padding: 16px;
        margin-bottom: 12px;
    }

    .reply {
        margin-left: 8px;
        padding-left: 8px;
    }

    .comment-thread {
        padding-left: 16px;
        margin-left: 8px;
    }

    .c-modal-form {
        padding: 20px;
    }

    .c-your-prediction {
        font-size: 1.8rem;
    }

    .c-profile-img {
        width: 45px;
        height: 45px;
    }

    .comment-actions {
        gap: 16px;
    }

    .matches-filter {
        gap: 6px;
    }

    .filter-btn {
        padding: 8px 16px;
        font-size: 1.2rem;
    }

    .search-matches {
        width: 150px;
        margin-left: 0;
        margin-top: 8px;
    }

    .search-matches:focus {
        width: 180px;
    }

    .matches-table {
        font-size: 1.3rem;
    }

    .matches-table th,
    .matches-table td {
        padding: 12px 8px;
    }

    .team-logo {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
    }

    .team-name {
        font-size: 1.3rem;
    }
}

/* ========== MATCHES TABLE ========== */
.matches-table-container {
    flex: 1 !important;
    overflow-x: auto !important;
    background: white !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
}

.matches-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: white !important;
    display: table !important; /* Ensure table always displays */
}

.matches-table th {
    background: #f8f9fa !important;
    color: #2c3e50 !important;
    padding: 16px 12px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 1.4rem !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    border-bottom: 2px solid #e9ecef !important;
}

.matches-table td {
    padding: 16px 12px !important;
    border-bottom: 1px solid #e9ecef !important;
    font-size: 1.4rem !important;
    vertical-align: middle !important;
}

.matches-table tr:last-child td {
    border-bottom: none !important;
}

.matches-table tr:hover {
    background: #f8f9fa !important;
}

/* Match team styling for table */
.match-team {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.team-name {
    font-weight: 500 !important;
    color: #2c3e50 !important;
    line-height: 1.4 !important;
    font-size: 1.4rem !important;
}

/* Prediction badges */
.prediction-badge {
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 1.4rem !important;
    text-align: center !important;
    min-width: 60px !important;
    display: inline-block !important;
}

.prediction-1 {
    background: #d4edda !important;
    color: #155724 !important;
}

.prediction-X {
    background: #fff3cd !important;
    color: #856404 !important;
}

.prediction-2 {
    background: #f8d7da !important;
    color: #721c24 !important;
}

.prediction-unknown {
    background: #e9ecef !important;
    color: #6c757d !important;
    border: 2px solid #dee2e6 !important;
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
    .matches-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    }

    .matches-table {
        min-width: 100% !important;
        font-size: 1.3rem !important;
        display: table !important; /* Explicitly show table */
    }

    .matches-table th,
    .matches-table td {
        padding: 12px 8px !important;
        font-size: 1.3rem !important;
        white-space: nowrap !important; /* Prevent text wrapping */
    }

    .matches-table th:nth-child(1),
    .matches-table td:nth-child(1) {
        /* Match # column */
        min-width: 50px !important;
        max-width: 50px !important;
        text-align: center !important;
    }

    .matches-table th:nth-child(2),
    .matches-table td:nth-child(2) {
        /* Match column */
        min-width: 200px !important;
        max-width: 200px !important;
    }

    .matches-table th:nth-child(3),
    .matches-table td:nth-child(3) {
        /* Pick column */
        min-width: 80px !important;
        max-width: 80px !important;
        text-align: center !important;
    }

    .team-name {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .prediction-badge {
        padding: 6px 8px !important;
        font-size: 1.1rem !important;
        min-width: 50px !important;
    }

    .match-team {
        gap: 2px !important;
    }
}

@media (max-width: 480px) {
    .matches-table {
        min-width: 320px !important; /* Ensure table is wide enough to scroll */
    }

    .matches-table th,
    .matches-table td {
        padding: 10px 6px !important;
        font-size: 1.2rem !important;
    }

    .matches-table th:nth-child(1),
    .matches-table td:nth-child(1) {
        min-width: 40px !important;
        max-width: 40px !important;
    }

    .matches-table th:nth-child(2),
    .matches-table td:nth-child(2) {
        min-width: 180px !important;
        max-width: 180px !important;
    }

    .matches-table th:nth-child(3),
    .matches-table td:nth-child(3) {
        min-width: 60px !important;
        max-width: 60px !important;
    }

    .team-name {
        font-size: 1.2rem !important;
    }

    /* Horizontal layout for very small screens */
    .match-team.horizontal {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .match-team.horizontal .team-name {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* Remove the card layout and ensure table always shows */
.matches-cards {
    display: none !important; /* Hide cards, show table instead */
}

/* Empty state styling */
.matches-empty-state {
    text-align: center !important;
    padding: 60px 20px !important;
    color: #6c757d !important;
}

.matches-empty-state i {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    opacity: 0.3 !important;
    display: block !important;
}

.matches-empty-state h4 {
    font-size: 1.8rem !important;
    margin-bottom: 8px !important;
    color: #495057 !important;
}

.matches-empty-state p {
    font-size: 1.4rem !important;
    opacity: 0.7 !important;
}

/* Loading state */
.matches-loading {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #6c757d !important;
}

.matches-loading i {
    font-size: 24px !important;
    margin-bottom: 12px !important;
    display: block !important;
    animation: spin 1s linear infinite !important;
}

/* Scrollbar styling for better mobile experience */
.matches-table-container::-webkit-scrollbar {
    height: 6px !important;
}

.matches-table-container::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
}

.matches-table-container::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 3px !important;
}

.matches-table-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}


/* ========== PREDICTION STATS ========== */
.scroll-container {
    position: relative;
    overflow: hidden; /* Hide overflow */
    border-radius: 6px;
    /* border: 1px solid #f2f2f2;
    background: #f8f8f8; */
    padding: 0 !important;
    margin-bottom: 15px;
}

.prediction-stats {
    display: inline-flex !important;
    width: 100%;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: space-between;
    overflow-x: auto !important; /* Enable horizontal scroll */
    overflow-y: hidden;
}

.prediction-stats::-webkit-scrollbar {
    height: 8px;
}

.prediction-stats::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
    margin: 0 2px;
}

.prediction-stats::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
    border: 2px solid #f1f5f9;
}

.prediction-stats::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Firefox */
.prediction-stats {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .prediction-stats {
        gap: 6px !important;
        padding-bottom: 6px !important;
        /* CSS mask - fades items at edges */
        mask-image: linear-gradient(
            to right,
            transparent,
            black 20px,
            black calc(100% - 20px),
            transparent
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            black 20px,
            black calc(100% - 20px),
            transparent
        );
    }
}

@media (max-width: 480px) {
    .prediction-stats {
        gap: 4px !important;
    }
}

/* Very small screens - horizontal scroll for stats */
@media (max-width: 360px) {
    .prediction-stats {
        min-width: 300px !important; /* Ensure enough width for all items */
    }

    .stat-item {
        min-width: 65px !important;
    }
}

/* ========== HORIZONTAL LAYOUT OPTIMIZATIONS ========== */

/* Form groups that should be horizontal on desktop */
.horizontal-group {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.horizontal-group .form-group {
    flex: 1;
    margin-bottom: 0;
}

/* Prediction input with quick picks */
.prediction-input-group {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.prediction-main-input {
    flex: 1;
}

.quick-picks {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.quick-pick-btn {
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.2s ease;
    color: #6c757d;
    white-space: nowrap;
}

.quick-pick-btn:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    transform: translateY(-1px);
}

.quick-pick-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Character counter and preview in one line */
.prediction-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.char-counter {
    flex-shrink: 0;
}

.prediction-preview {
    flex: 1;
    margin-top: 0;
}

/* Jackpot and match count horizontal */
.jackpot-match-group {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.jackpot-match-group .form-group {
    flex: 1;
}

.match-count-display {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 120px;
}

.match-count-value {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--secondary-color2);
    line-height: 1;
}

.match-count-label {
    font-size: 1.2rem;
    color: #6c757d;
    text-align: center;
    margin-top: 4px;
}

/* Action buttons horizontal */
.form-actions {
    display: flex;
    gap: 12px;
}

.form-actions a.btn,
.form-actions button.btn-back{
  margin-left: auto; /* Push to right */
  margin-right: 0; /* Remove right margin */
}

.quick-actions {
    display: flex;
    gap: 8px;
}

/* Quick tips horizontal layout */
.quick-tips-horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    text-align: center;
}

.tip-item {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px 12px;
    border: 1px solid #e9ecef;
}

.tip-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    color: #667eea;
}

.tip-text {
    font-size: 1.2rem;
    color: #6c757d;
    line-height: 1.4;
}

/* Mobile responsive - vertical stacking */
@media (max-width: 768px) {
    .horizontal-group {
        flex-direction: column;
        gap: 16px;
    }

    .horizontal-group .form-group {
        margin-bottom: 0;
        width: 100%;
    }

    .prediction-input-group {
        flex-direction: column;
        gap: 12px;
    }

    .quick-picks {
        width: 100%;
        /* justify-content: space-between; */
    }

    .quick-pick-btn {
        flex: 1;
        text-align: center;
        padding: 14px 12px;
        font-size: 1.3rem;
    }

    .prediction-meta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .char-counter {
        text-align: left;
    }

    .prediction-preview {
        margin-top: 0;
    }

    .jackpot-match-group {
        flex-direction: column;
        gap: 16px;
    }

    .match-count-display {
        min-width: auto;
        padding: 12px;
    }

    .match-count-value {
        font-size: 2rem;
    }

    .form-actions {
        flex-direction: column;
        gap: 12px;
    }

    .quick-actions {
        width: 100%;
        justify-content: space-between;
    }

    .quick-action-btn {
        flex: 1;
        padding: 14px;
    }

    .quick-tips-horizontal {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tip-item {
        padding: 14px 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
    }

    .tip-icon {
        margin-bottom: 0;
        flex-shrink: 0;
        font-size: 1.8rem;
    }

    .tip-text {
        font-size: 1.3rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .quick-picks {
        flex-wrap: wrap;
    }

    .quick-pick-btn {
        min-width: calc(33.333% - 8px);
    }

    .quick-actions {
        flex-wrap: wrap;
    }

    .quick-action-btn {
        min-width: calc(50% - 4px);
    }

    .tip-item {
        padding: 12px;
    }
}
/*  */

/*  */
/* Validation Message - Hidden by default, shown only for errors */
#validationMessage {
    display: none;
    text-align: center;
    padding: 16px;
    font-size: 1.5rem;
    color: #dc3545;
    background: #f8d7da;
    border-radius: 12px;
    margin-bottom: 20px;
    font-weight: 500;
    border: 2px solid #f5c6cb;
    animation: slideDown 0.3s ease;
}

#validationMessage.valid {
    display: block;
    color: #155724;
    background: #d4edda;
    border-color: #c3e6cb;
}

#validationMessage.invalid {
    display: block;
    color: #721c24;
    background: #f8d7da;
    border-color: #f5c6cb;
}

#validationMessage.info {
    display: block;
    color: #856404;
    background: #fff3cd;
    border-color: #ffeaa7;
}

/* Disabled state for prediction input */
.c-prediction-box.disabled {
    background: #f8f9fa;
    border-color: #e9ecef;
    opacity: 0.7;
    cursor: not-allowed;
}

.c-prediction-box.disabled .c-your-prediction {
    cursor: not-allowed;
    background: transparent;
}

.c-your-prediction:disabled {
    background: transparent;
    color: #6c757d;
    cursor: not-allowed;
}

.c-your-prediction:disabled::placeholder {
    color: #adb5bd;
}

/* Quick picks disabled state */
.quick-picks.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.quick-pick-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}


/* ========== BUTTONS ========== */

.btn,
.btn-sm,
.btn-lg {
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn {
  padding: 1rem 2.4rem !important;
  font-size: 1.4rem !important;
}

.btn-sm {
  padding: 0.4rem 1rem !important;
  font-size: 1.2rem !important;
}

.btn-lg {
  padding: 1.6rem 3.2rem !important;
  font-size: 1.6rem !important;
  border-radius: var(--btn-lg-border-radius) !important;
}

.btn-primary,
.btn-outline-primary {
  border: 1px solid var(--primary-color) !important;
}

.btn-outline-light {
  border: 1px solid #e9ecef !important;
}

.btn-outline-light,
.btn-outline-light:hover {
  color:var(--text-gray-color) !important;
}

.btn-success,
.btn-outline-success {
  border: 1px solid var(--success-color) !important;
}

.btn-danger,
.btn-outline-danger {
  border: 1px solid var(--danger-color) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%) !important;
}

.btn-light {
  background-color: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
}

.btn-success {
  background-color: linear-gradient(135deg, var(--success-color) 0%, var(--success-color2) 100%);
}

.btn-danger {
 background-color: linear-gradient(135deg, var(--danger-color2) 0%, var(--danger-color) 100%);
}

.btn-light {
  color: #333 !important;
}

.btn-light:hover {
  opacity: 0.9 !important;
}

.btn-primary,
.btn-success,
.btn-danger {
  color: #fff !important;
}

.btn-primary i,
.btn-light i,
.btn-success i,
.btn-danger i {
  color: #fff !important;
  margin-right: 0.8rem !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover {
  opacity: 0.9 !important;
  color: #fff !important;
}

.btn-outline-primary {
  color: var(--primary-color) !important;
}

.btn-outline-light {
  color: #6c757d !important;
}

.btn-outline-success {
  color: var(--success-color) !important;
}

.btn-outline-danger {
  color: var(--danger-color) !important;
}

.btn-outline-primary,
.btn-outline-light,
.btn-outline-success,
.btn-outline-danger {
  background-color: #f8f9fa;
}

.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover {
  background-color: #e9ecef !important;
}

.upvoted {
   background-color: var(--success-color) !important;
   color:#fff !important;
}

.downvoted {
   background-color: var(--danger-color) !important;
   color:#fff !important;
}

/* Vote buttons */
.btn-vote-yes,
.btn-vote-no {
    padding: 14px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    color: #fff;
    border: 2px solid transparent;
}

.btn-vote-yes {
    background: linear-gradient(135deg, #28a745, #20c997);
    border-color: #28a745;
}

.btn-vote-yes:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #34ce57, #28a745);
}

.btn-vote-yes:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-vote-no {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: #fff;
    border: 2px solid #dc3545;
}

.btn-vote-no:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}

.btn-vote-no:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-vote-yes i,
.btn-vote-no i {
    margin-right: 8px;
}

.btn-vote-yes.btn-disabled,
.btn-vote-no.btn-disabled {
    opacity: 0.6;
    cursor: default;
}

.btn-vote-yes.btn-disabled {
    background: #28a745;
    border-color: #28a745;
}

.btn-vote-no.btn-disabled {
    background: #dc3545;
    border-color: #dc3545;
}

/* Animation for voting buttons */
.btn-vote-yes:active:not(:disabled),
.btn-vote-no:active:not(:disabled) {
    transform: scale(0.95);
}

a.btn {
  text-decoration: none !important;
}

.btn-next i {
  margin-left: 0.8rem !important;
}

.btn-back i {
  margin-right: 0.8rem !important;
}

.btn-grid {
  display: flex !important;
  gap: 0.5rem;
  justify-content: space-between !important;
  margin-top: 0 !important;
  padding: 0.3rem 0;
}

.btn-grid button {
  flex: 1 !important; /* Each button will flex-grow equally */
  text-align: center !important;
  padding: 0.5rem 1rem !important;
}


.btn-icon {
  margin-right: 0.5rem;
}

.btn-sm-icon {
  width: 1.6rem !important;
  height: 1.6rem !important;
  margin-right: 0.5rem;
}

.btn-align-right{
  margin-left: auto !important;
  margin-right: 0 !important;
  float: right !important;
}

@media (max-width: 640px) {
  .btn-grid {
    flex-direction: column-reverse;
    gap: 0.75rem;
  }

 .btn {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
 .btn-grid {
    justify-content: center !important;
  }

 .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ========== PREDICTIONS ========== */

/* Prediction Modal Styles */
.prediction-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.prediction-modal.show {
    opacity: 1;
}

.prediction-modal-content {
    position: relative;
    background: white;
    margin: 2% auto;
    padding: 0;
    border-radius: 16px;
    width: 95%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.prediction-modal.show .prediction-modal-content {
    transform: translateY(0);
}

.prediction-modal-header {
    position: relative;
    padding: 15px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}

.prediction-modal-header h2 {
    margin: 0;
    text-align: center;
    font-size: 1.8rem; /* Larger font */
    font-weight: 700;
    color: #1f2937;
}

button.close-modal,
.close-payment-modal {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 1.6rem; /* Larger font */
    cursor: pointer;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-modal:hover,
.close-payment-modal:hover {
    background: #f3f4f6;
    color: #374151;
}

.prediction-modal-body {
    padding: 24px; /* More padding */
}

/* Section Labels */
.section-label {
    /* display: flex; */
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
    /* font-size: 17.6px;  */
}

.section-label i {
    color: #6b7280;
    width: 18px;
    font-size: 1.6rem;
}

.selection-hint {
    margin-left: auto;
    font-size: 1.2rem !important;
    color: #9ca3af;
    font-weight: normal;
}

/* Jackpot Selection */
.jackpot-selection-section {
    margin-bottom: 24px;
}

.jackpot-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    align-items: end;
}

.jackpot-group {
    min-width: 0;
}

.jackpot-group select {
    width: 100%;
    padding: 16px 20px; /* More padding */
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    /* font-size: 14px;  */
    background: white;
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%236b7280' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 14px;
}

.jackpot-group select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Jackpot and Actions Row */
.jackpot-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* Selected Jackpot Section */
.selected-jackpot-section {
    flex: 1;
}

.selected-jackpot-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: white;
    padding: 16px 20px; /* More padding */
    border-radius: 12px;
    /* box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); */
    height: 100%;
}

.jackpot-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.jackpot-info i {
    font-size: 1.6rem; /* Larger font */
    color: #fbbf24;
    flex-shrink: 0;
}

.jackpot-details {
    flex: 1;
    min-width: 0;
}

.jackpot-name {
    font-size: 1.5rem !important;
    font-weight: 700;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matches-info {
    font-size: 1.2rem !important;
    opacity: 0.9;
    white-space: nowrap;
}

.change-jackpot-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    margin-left: 12px;
    font-size: 1.1rem;
}

.change-jackpot-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(180deg);
}

/* Quick Actions */
.quick-actions {
     flex-shrink: 0;
}

.quick-action-btn {
    padding: 14px 20px; /* More padding */
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    color: #374151;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    height: fit-content;
    font-size: 1.2rem !important;
}

.quick-action-btn:hover:not(:disabled) {
    opacity:0.9;
}

.quick-action-btn.clear-btn {
    border-color: #ef4444;
    color: #ef4444;
}

.quick-action-btn.clear-btn:hover:not(:disabled) {
    opacity:0.9;
}

/* Prediction Input Section */
.prediction-input-section {
    margin: 28px 0;
}

.c-prediction-box {
    position: relative;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px; /* More padding */
    background: #fafafa;
    transition: all 0.2s ease;
}

.c-prediction-box:focus-within {
    border-color: var(--primary-color);
    background: white;
}

#predictionInput {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 1.8rem !important;
    font-weight: 600;
    letter-spacing: 1px;
    color: #1f2937;
    outline: none;
    font-family: 'Courier New', monospace;
}

#predictionInput::placeholder {
    color: #9ca3af;
    font-weight: normal;
    letter-spacing: normal;
    font-size: 1.6rem !important;
}

.post-prediction-btn {
  border: none;
  border-radius:5rem !important;
  background-color:var(--primary-color);
  color:#fff;
}

.post-prediction-btn:hover {
  opacity: 0.9;
}

.post-prediction-btn i {
  margin-right: 1.5rem !important;
}

.char-counter {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 1.3rem !important;
    color: #6b7280;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 6px;
}

/* Prediction Preview */
.prediction-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px; /* More padding */
    margin-top: 16px;
    display: none;
    animation: slideDown 0.3s ease;
}

.preview-label {
    font-size: 0.9rem; /* Larger font */
    color: #64748b;
    margin-bottom: 6px;
    font-weight: 600;
}

.preview-text {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 2px;
}

/* Validation Message */
.prediction-validation {
    padding: 16px 20px; /* More padding */
    border-radius: 8px;
    margin: 20px 0;
    font-weight: 500;
    display: none;
    animation: slideDown 0.3s ease;
    font-size: 1rem; /* Larger font */
}

/* Matches Section */
.matches-section {
    margin: 28px 0;
}

.matches-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 6px;
}

/* Compact Match Styles */
.compact-match {
    align-items: center;
    gap: 14px;
    padding: 14px 18px; /* More padding */
    border: 2px solid #f1f5f9;
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.compact-match:hover {
    border-color: #e2e8f0;
}

.compact-match.selected {
    border-color: #3b82f6;
    background: #f0f9ff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.matches-section .match-number {
    font-weight: bold;
    color: #374151;
    font-size: 1.3rem !important;
    min-width: 25px;
}

.matches-section .match-teams {
    display: grid;
    align-items: left;
}

.matches-section .team-home, .matches-section .team-away {
    font-size: 1.3rem !important;
    font-weight: 500;
    color: #374151;
}

.matches-section .quick-picks {
    display: flex;
    gap: 8px;
}

.matches-section .quick-pick {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem !important;
}

.matches-section .quick-pick:hover:not(:disabled) {
    border-color: #3b82f6;
    background: #f8fafc;
}

.matches-section .quick-pick.selected {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* Submit Section */
.submit-section {
    /* margin-top: 28px; */
    text-align: center;
    width:100%;
}

.submit-hint {
    font-size: 1.2rem !important;
    color: #6b7280;
    margin-top: 10px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .prediction-modal-content {
        margin: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .prediction-modal-body {
        padding: 20px;
    }

    .jackpot-actions-row {
        flex-direction: column; /* Stack vertically */
        align-items: stretch; /* Make children full width */
        gap: 15px;
    }

    .selected-jackpot-section,
    .quick-actions {
        width: 100%;
    }

    .selected-jackpot-display {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .quick-actions {
        display: flex;
        justify-content: center; /* Or stretch if you want full width button */
    }

    .clear-btn {
        width: 100%; /* Make button full width on mobile */
        justify-content: center;
    }
}

/* Animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes highlight-pulse {
    0% {
        transform: scale(1);
        border-color: #e9ecef;
    }
    50% {
        transform: scale(1.05);
        border-color: #3b82f6;
        background: #eff6ff;
    }
    100% {
        transform: scale(1);
        border-color: #e9ecef;
    }
}

body.modal-open {
    overflow: hidden;
}

/* */
/* User Prediction Display Styles */
.user-prediction-display {
    margin-bottom: 20px;
    animation: slideInDown 0.5s ease;
    opacity: 0;
    transform: translateY(-20px);
}

.user-prediction-display.show {
    opacity: 1;
    transform: translateY(0);
}

.prediction-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1.1rem;
}

.jackpot-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.jackpot-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.prediction-time {
    opacity: 0.8;
}

.prediction-string {
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

/* Animation */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .prediction-string {
        font-size: 1.1rem;
        padding: 12px;
    }

    .prediction-stats {
        /* flex-direction: column; */
        gap: 8px;
        align-items: center;
    }

    .jackpot-info {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}
/*  */

/*  */
/* Highlight for new predictions */
.new-prediction {
    position: relative;
}

.new-prediction::before {
    content: "NEW";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ef4444;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    z-index: 10;
    animation: pulse 2s infinite;
}

.new-prediction .c-prediction-item {
    border-left: 3px solid #3b82f6;
    padding-left: 8px;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Remove highlight after 5 seconds */
.new-prediction {
    transition: all 0.5s ease;
}

.new-prediction.fade-highlight::before {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.new-prediction.fade-highlight .c-prediction-item {
    border-left-color: transparent;
    transition: border-left-color 0.5s ease;
}
/*  */

/*  */
.tags-container {
    position: relative;
    /* max-width: 800px; */
    margin: 0 auto;
    padding: 10px 40px;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    color: #808080;
}

.scroll-btn.left {
    left: 0;
}

.scroll-btn.right {
    right: 0;
}

.tags-scroll {
    display: flex;
    background: #fff;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

.tags-scroll::-webkit-scrollbar {
    display: none;  /* Hide scrollbar for Chrome, Safari and Opera */
}

.tag {
    background: #F2F2F2 !important;
    color: #5F5F5F !important;
    font-size: 1.35rem;
    font-weight: 600 !important;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.tag:focus {
  background: #d9d9d9 !important;
}

.tag.active {
    background: var(--primary-color) !important;
    color: white !important;
}

/*  */

/*  Jackpot Tips CSS */
.c-content-heading-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.jackpot-selector {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.jackpot-selector label {
    font-weight: 600;
    color: #f8fafc;
}

.jackpot-dropdown {
    position: relative;
    min-width: 280px;
}

.jackpot-dropdown select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background: var(--white-color);
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--text-gray-color);
    border: 2px solid #E8E8E8;
    transition: all 0.3s ease;
}

.jackpot-dropdown select:focus {
    outline: none;
    border: 2px solid var(--primary-color);
}

.jackpot-dropdown::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray-color);
    pointer-events: none;
}

.tips-packages {
    padding: 20px 0;
}

.package-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #eee !important;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
}

.package-card:hover {
    /* transform: translateY(-5px); */
    /* box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); */
    border-color: #007bff;
}

.package-card.special-offer {
    /* border-color: #28a745; */
    background: linear-gradient(135deg, #ffffff 0%, #f0f9f4 100%);
}

.package-card.special-offer::before {
    content: 'Special Offer';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #28a745;
    color: white;
    padding: 6px 20px;
    border-radius: 20px;
    /* font-size: 0.8rem; */
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
}

.package-name {
    /* font-size: 1.5rem; */
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.package-description {
    color: #6c757d;
    /* font-size: 0.95rem; */
    margin-bottom: 20px;
    line-height: 1.5;
}

.package-price {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.package-details {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.package-details li {
    padding: 8px 0;
    color: #495057;
    /* font-size: 0.9rem; */
    border-bottom: 1px solid #f1f3f4;
}

.package-details li:last-child {
    border-bottom: none;
}

.package-details li i {
    color: #28a745;
    margin-right: 10px;
    /* font-size: 0.8rem; */
}

.team {
    font-weight: 500;
}

.match-time {
    font-size: 0.85rem;
    color: var(--gray-color);
}

.purchase-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding: 25px;
    background: rgba(15, 23, 42, 0.7);
    border-radius: 12px;
    flex-wrap: wrap;
    gap: 20px;
}

.price-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-label {
    font-size: 1rem;
    color: var(--gray-color);
}

.price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
}

.info-alert {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    margin-top: 30px;
}

.info-alert i {
    /* color: var(--primary-color); */
    font-size: 1.5rem;
}

.info-message a {
    text-decoration: underline;
    font-weight: 500;
}

.info-message a:hover {
    text-decoration: underline;
}

.c-content-spacer {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    margin: 40px 0;
}

.tips-preview {
    margin-top: 30px;
    padding: 20px;
    background: rgba(15, 23, 42, 0.7);
    border-radius: 12px;
}

.tips-preview h3 {
    margin-bottom: 15px;
    color: var(--light-color);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.preview-item {
    background: rgba(30, 41, 59, 0.5);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

.preview-teams {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.preview-prediction {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
}

.spinner-border {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border: 0.3em solid var(--primary-color);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.mobile__block {
    display: none;
}

@media (max-width: 768px) {
    .mobile__none {
        display: none;
    }

    .mobile__block {
        display: block;
    }

    .c-content-heading {
        font-size: 1.8rem;
    }

    .jackpot-dropdown {
        min-width: 100%;
    }

    .tips-packages {
        grid-template-columns: 1fr;
    }

    .purchase-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .buy-button {
        width: 100%;
    }
}

/*  */

/* Match display styles */

.match-meta {
    font-size: 1.3rem !important;
}

.prediction-badge {
    display: inline-block;
    padding: 6px 12px;
    background: #007bff;
    color: white;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    min-width: 100px;
}

.prediction-badge.home-win { background: #28a745; }
.prediction-badge.away-win { background: #dc3545; }
.prediction-badge.draw { background: #ffc107; color: #000; }

/* Loading state */
.spinner-border {
    display: inline-block;
}


/* MATCHES TABLE - Mobile Responsive */

.match-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.match-teams {
    display: flex;
    align-items: center;
    font-weight: 500;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.match-teams span {
    line-height: 1.3;
}

.match-teams span:first-child::after {
    content: " vs ";
    color: #6c757d;
    font-weight: normal;
    margin: 0 4px;
}

.match-meta {
    font-size: 0.8rem;
}

.text-muted {
    color: #6c757d !important;
}

.prediction-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    min-width: 80px;
    white-space: nowrap;
}

.prediction-badge.home-win {
    background: #28a745;
    color: white;
}

.prediction-badge.away-win {
    background: #dc3545;
    color: white;
}

.prediction-badge.draw {
    background: #ffc107;
    color: #000;
}

.prediction-badge.no-prediction {
    background: #6c757d;
    color: white;
}

/* ===== MOBILE RESPONSIVE BREAKPOINTS ===== */

/* Tablets and Large Phones */
@media (max-width: 768px) {
    .match-teams {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .match-teams span:first-child::after {
        content: "vs";
        display: block;
        margin: 2px 0;
        font-size: 0.75rem;
        opacity: 0.7;
    }

    .prediction-badge {
        min-width: 70px;
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    .match-meta {
        font-size: 0.75rem;
    }
}

/* Extra Small Mobile Phones */
@media (max-width: 400px) {
    .match-teams span {
        font-size: 0.95rem;
    }

    .prediction-badge {
        min-width: 90px;
        padding: 7px 14px;
        font-size: 0.85rem;
        display: inline-block !important;
    }

    .match-meta {
        font-size: 0.7rem;
    }
}

/* Alternative: More robust mobile card layout */
@media (max-width: 576px) {
    .match-info {
        text-align: center;
    }

    .match-teams {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin-bottom: 8px;
    }

    .match-teams span {
        font-size: 1rem;
        font-weight: 600;
    }

    .match-teams span:first-child::after {
        content: "VS";
        display: block;
        font-size: 0.8rem;
        color: #6c757d;
        margin: 2px 0;
        font-weight: normal;
    }

    .prediction-badge {
        min-width: 100px;
        padding: 8px 16px;
        font-size: 0.9rem;
        display: inline-block;
    }
}

/* Fix for very small screens */
@media (max-width: 360px) {
    .match-teams span {
        font-size: 0.9rem;
    }

    .prediction-badge {
        min-width: 85px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* Extra Small Mobile Phones */

/* Orientation Specific Styles */
@media (max-width: 768px) and (orientation: landscape) {
    .match-info {
        text-align: left;
    }

    .match-teams {
        flex-direction: row;
        align-items: center;
    }

    .match-teams span:first-child::after {
        content: " vs ";
        display: inline;
        margin: 0 4px;
        font-size: inherit;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .account__table {
        border: 0.5px solid #e9ecef;
    }
}

/*  */
/* Visual Hierarchy Principles Applied :cite[1]:cite[9] */
.purchase-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 16px;
    margin-bottom: 30px;
    text-align: center;
}

.hero-heading {
    /* font-size: 2.2rem; */
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* Price Display - High Visibility :cite[2] */
.price-display {
    margin: 20px 0;
}

.price-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 20px 40px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.3);
}

.price-amount {
    /* font-size: 3.5rem; */
    font-weight: 800;
    display: block;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.price-note {
    /* font-size: 1rem; */
    opacity: 0.9;
    margin-top: 8px;
    display: block;
}

/* Jackpot Selector */
.jackpot-selector-container {
    background: rgba(255,255,255,0.1);
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.selector-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    /* font-size: 1.1rem; */
}

.jackpot-select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.9);
    /* font-size: 1rem; */
}

/* Payment Instructions - Clear Grouping :cite[2] */

/* Matches Section */
.matches-preview-section {
    margin-bottom: 30px;
}

.section-title {
    /* font-size: 1.5rem; */
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

/* Action Section */
.action-section {
    text-align: center;
    margin: var(--content-margin);
    padding: 0 !important;
}

.purchase-button {
    background: linear-gradient(45deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 12px;
    font-weight: 700;
    /* font-size: 1.3rem; */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
    margin-bottom: 15px;
    width: 100%;
    max-width: 400px;
}

.purchase-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}

.purchase-note {
    color: #6c757d;
    /* font-size: 0.9rem; */
    margin-bottom: 25px;
}

/* Support Info */
.support-info {
    margin-top: 20px;
}

.info-alert {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-alert i {
    color: #2196f3;
    /* font-size: 1.2rem; */
}

.info-link {
    color: #2196f3;
    font-weight: 600;
    text-decoration: none;
}

.info-link:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .purchase-hero {
        padding: 20px;
    }

    .hero-heading {
        /* font-size: 1.8rem; */
    }

    .price-amount {
        /* font-size: 2.8rem; */
    }

    .payment-details-grid {
        grid-template-columns: 1fr;
    }

    .payment-header {
        flex-direction: column;
        text-align: center;
    }

    .mpesa-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* Animation for attention */
@keyframes subtle-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.price-badge {
    animation: subtle-pulse 3s ease-in-out infinite;
}
/*  */


/*  */
/* PAYMENT INSTRUCTIONS - Mobile Responsive */
.payment-instructions {
    background: #f8f9fa;
    border: 1px solid var(--border-color2);
    border-radius: 12px;
    padding: var(--content-padding);
    margin: var(--content-margin);
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */
}

.payment-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 15px;
}

.mpesa-icon {
    background: #28a745;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.mpesa-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 50%;
}

.payment-title {
    color: #28a745;
    font-weight: 700;
    margin: 0;
    font-size: 1.5rem;
}

.payment-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.payment-detail {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: transform 0.2s ease;
}

.payment-detail:active {
    transform: scale(0.98);
}

.detail-label {
    display: block;
    font-weight: 600;
    color: #495057;
    /* font-size: 0.9rem; */
    margin-bottom: 5px;
}

.detail-value {
    display: block;
    background: #28a745;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 700;
    /* font-size: 1.1rem; */
    word-break: break-all;
}

.payment-steps {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.steps-title {
    font-weight: 700;
    color: #28a745;
    margin-bottom: 15px;
    /* font-size: 1.2rem; */
}

.steps-list {
    margin: 0;
    padding-left: 20px;
    color: #495057;
}

.steps-list li {
    margin-bottom: 10px;
    line-height: 1.5;
}

.steps-list strong {
    color: #28a745;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

/* ===== MOBILE RESPONSIVE BREAKPOINTS ===== */

/* Large Tablets and Small Desktops */
@media (max-width: 1024px) {
    .payment-instructions {
        padding: 22px;
    }

    .payment-details-grid {
        gap: 12px;
    }

    .payment-detail {
        padding: 12px;
    }
}

/* Tablets and Large Phones */
@media (max-width: 768px) {
    .payment-instructions {
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 25px;
    }

    .payment-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding-bottom: 12px;
    }

    .mpesa-icon {
        margin-right: 0;
        width: 45px;
        height: 45px;
        /* font-size: 1.3rem; */
    }

    .payment-title {
        /* font-size: 1.3rem; */
    }

    .payment-details-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 20px;
    }

    .payment-detail {
        padding: 15px;
        text-align: center;
    }

    .payment-steps {
        padding: 15px;
    }

    .steps-title {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .steps-list {
        padding-left: 18px;
    }

    .steps-list li {
        margin-bottom: 8px;
        /* font-size: 0.95rem; */
    }
}

/* Mobile Phones (Small) */
@media (max-width: 480px) {
    .payment-instructions {
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        border-width: 1px;
    }

    .payment-header {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .mpesa-icon {
        width: 40px;
        height: 40px;
        /* font-size: 1.2rem; */
    }

    .payment-title {
        /* font-size: 1.2rem; */
    }

    .payment-detail {
        padding: 12px 10px;
    }

    .detail-label {
        /* font-size: 0.85rem; */
    }

    .detail-value {
        /* font-size: 1rem; */
        padding: 6px 10px;
    }

    .payment-steps {
        padding: 12px;
    }

    .steps-title {
        /* font-size: 1rem; */
        margin-bottom: 10px;
    }

    .steps-list {
        padding-left: 16px;
    }

    .steps-list li {
        margin-bottom: 6px;
        /* font-size: 0.9rem; */
    }

    .steps-list strong {
        padding: 1px 4px;
        /* font-size: 0.85rem; */
    }
}

/* Extra Small Mobile Phones */
@media (max-width: 360px) {
    .payment-instructions {
        padding: 12px;
    }

    .mpesa-icon {
        width: 35px;
        height: 35px;
        /* font-size: 1rem; */
    }

    .payment-title {
        /* font-size: 1.1rem; */
    }

    .payment-detail {
        padding: 10px 8px;
    }

    .detail-label {
        /* font-size: 0.8rem; */
    }

    .detail-value {
        /* font-size: 0.9rem; */
        padding: 5px 8px;
    }

    .payment-steps {
        padding: 10px;
    }

    .steps-list li {
        /* font-size: 0.85rem; */
    }
}

/* Orientation Specific Styles */
@media (max-width: 768px) and (orientation: landscape) {
    .payment-details-grid {
        grid-template-columns: 1fr 1fr;
    }

    .payment-header {
        flex-direction: row;
        text-align: left;
    }

    .mpesa-icon {
        margin-right: 12px;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .payment-instructions {
        border-width: 1.5px;
    }
}

/* Very large screens */
@media (min-width: 1400px) {
    .payment-instructions {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}
/*  */

/*  */
/* HERO PRICE SECTION - Most Conspicuous */
.hero-price-section {
    display: flex;
    align-items: center;
    gap: 30px;
    color: white;
    padding: 0px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 30px;
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.2); */
}

.price-badge-large {
    text-align: center;
    flex-shrink: 0;
}

.price-label {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 5px;
}

.price-amount-main {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.price-subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 5px;
}

.hero-content {
    flex: 1;
}

.hero-content .c-content-heading {
    color: white;
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.check-back {
    font-size: 1rem;
    color: #5a6470;
}

/* PACKAGE CARD PRICE */
.package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.package-price-secondary {
    background: #28a745;
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.3rem;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

/* FLOATING PRICE BAR (Mobile) */
.floating-price-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 15px 20px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none;
}

.floating-price-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.floating-price {
    font-size: 1.8rem;
    font-weight: 800;
    color: #28a745;
}

.floating-buy-button {
    background: linear-gradient(45deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    transition: all 0.3s ease;
}

.floating-buy-button:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
}

/* SIDEBAR PRICE CARD */
.sidebar-price-card {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
}

.sidebar-price-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.sidebar-price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin: 10px 0;
}

.sidebar-price-note {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Large Tablets and Small Desktops */
@media (max-width: 1024px) {
    .hero-price-section {
        gap: 25px;
        padding: 25px;
    }

    .price-amount-main {
        font-size: 3rem;
    }

    .hero-content .c-content-heading {
        font-size: 2rem;
    }

    .sidebar-price-amount {
        font-size: 2.2rem;
    }
}

/* Tablets and Large Phones */
@media (max-width: 768px) {
    .hero-price-section {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 25px 20px;
    }

    .price-badge-large {
        width: 100%;
    }

    .price-amount-main {
        font-size: 2.8rem;
    }

    .price-label {
        font-size: 1rem;
    }

    .hero-content {
        width: 100%;
    }

    .hero-content .c-content-heading {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }

    .package-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .package-price-secondary {
        font-size: 1.2rem;
        padding: 8px 20px;
    }

    .sidebar-price-card {
        padding: 15px;
        border-radius: 12px;
    }

    .sidebar-price-amount {
        font-size: 2rem;
    }

    .floating-price-bar {
        display: block;
    }
}

/* Mobile Phones (Small) */
@media (max-width: 480px) {
    .hero-price-section {
        padding: 20px 15px;
        margin-bottom: 20px;
    }

    .price-amount-main {
        font-size: 2.5rem;
    }

    .price-label {
        font-size: 0.95rem;
    }

    .price-subtitle {
        font-size: 0.85rem;
    }

    .hero-content .c-content-heading {
        font-size: 1.6rem;
        margin-bottom: 10px;
    }

    .package-price-secondary {
        font-size: 1.1rem;
        padding: 7px 18px;
        border-radius: 20px;
    }

    .floating-price-bar {
        padding: 12px 15px;
    }

    .floating-price-content {
        gap: 15px;
    }

    .floating-price {
        font-size: 1.6rem;
    }

    .floating-buy-button {
        padding: 10px 20px;
        font-size: 1rem;
        border-radius: 8px;
    }

    .sidebar-price-card {
        padding: 12px;
        border-radius: 10px;
    }

    .sidebar-price-amount {
        font-size: 1.8rem;
    }

    .sidebar-price-header {
        font-size: 0.85rem;
    }

    .sidebar-price-note {
        font-size: 0.75rem;
    }
}

/* Extra Small Mobile Phones */
@media (max-width: 360px) {
    .hero-price-section {
        padding: 15px 12px;
    }

    .price-amount-main {
        font-size: 2.2rem;
    }

    .hero-content .c-content-heading {
        font-size: 1.4rem;
    }

    .floating-price {
        font-size: 1.4rem;
    }

    .floating-buy-button {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .package-price-secondary {
        font-size: 1rem;
        padding: 6px 15px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .floating-buy-button,
    .package-price-secondary {
        min-height: 44px; /* Minimum touch target size */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-price-section {
        -webkit-tap-highlight-color: transparent;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-price-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
}

/* Orientation Specific Styles */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-price-section {
        flex-direction: row;
        text-align: left;
        padding: 20px;
    }

    .price-badge-large {
        flex-shrink: 0;
        width: auto;
    }

    .price-amount-main {
        font-size: 2.2rem;
    }

    .hero-content .c-content-heading {
        font-size: 1.5rem;
    }
}



/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .floating-buy-button,
    .package-price-secondary {
        transition: none;
    }

    .floating-buy-button:active {
        transform: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .floating-price-bar {
        background: #2d3748;
        color: #e2e8f0;
    }

    .floating-price {
        color: #48bb78; /* Green for dark mode */
    }
}
/*  */
.status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

.action-buttons .btn {
    margin: 2px;
}

@media (max-width: 768px) {
    .ad-card {
        margin-bottom: 20px;
    }
}
/*  */

/*  */
/* Ad Meta Information */
.ad-meta {
    /* font-size: 0.875rem; */
    color: #6c757d;
}

.meta-item {
    margin-bottom: 0.25rem;
}

.meta-item strong {
    color: #495057;
}

/* Action Buttons Container */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Status Badge */
.status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

/* Text Truncation */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Visually Hidden for Accessibility */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ========== AD MANAGEMENT ========== */

/* Stats Modal Styles */
.stats-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  overflow-y: auto;
}

.stats-modal.show {
  display: block;
}

.stats-modal-content {
  background: white;
  margin: 2rem auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 900px;
  width: 95%;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
      opacity: 0;
      transform: translateY(-50px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.stats-modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: between;
  align-items: center;
}

.stats-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--primary-color);
}

.stats-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6c757d;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.3s;
}

.stats-modal-close:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

.stats-modal-body {
  padding: 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card.performance {
  border-left-color: #28a745;
}

.stat-card.engagement {
  border-left-color: #ffc107;
}

.stat-card.conversion {
  border-left-color: #dc3545;
}

.stats-section {
  margin-bottom: 2rem;
}

.stats-section-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--primary-color);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

.chart-container {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.chart-placeholder {
  height: 200px;
  background: linear-gradient(45deg, #f8f9fa, #e9ecef);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-style: italic;
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.performance-metric {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

.metric-label {
  color: #6c757d;
  font-size: 1.1rem !important;
  margin-top: 0.5rem;
}

.time-period-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.time-period-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #dee2e6;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.time-period-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.stats-table th,
.stats-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
}

.stats-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
}

.trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}

.trend-up {
  color: #28a745;
}

.trend-down {
  color: #dc3545;
}

/* Extend Modal Styles */
.extend-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1060;
  overflow-y: auto;
}

.extend-modal.show {
  display: block;
}

.extend-modal-content {
  background: white;
  margin: 2rem auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 95%;
  animation: modalSlideIn 0.3s ease-out;
}

.extend-modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: between;
  align-items: center;
}

.extend-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--primary-color);
}

.modal-close {
  background: none;
  border: none;
  font-size: 2.4rem;
  cursor: pointer;
  color: #6c757d;
  padding: 8px;
  border-radius: 100px;
  width:48px;
  height: 48px;
  transition: all 0.3s;
}

.modal-close:hover {
  color: var(--text-gray-color);
  background: var(--bg-color);
}

.extend-modal-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #495057;
  font-size: 1.3rem !important;
}

.btn-group {
  /* display: flex; */
  gap: 1rem;
  margin-top: 2rem;
}

.action-btn.extend {
  background: rgba(67, 97, 238, 0.1);
  color: var(--primary-color);
}

.action-btn.extend:hover {
  background: rgba(67, 97, 238, 0.2);
}

/* Toast notification */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1060;
}

.toast {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-left: 4px solid var(--primary-color);
  animation: slideInRight 0.3s ease-out;
}

.toast.success {
  border-left-color: #28a745;
}

.toast.error {
  border-left-color: #dc3545;
}

@keyframes slideInRight {
  from {
      opacity: 0;
      transform: translateX(100%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

/* Existing styles */
.stats-card {
  background: white;
  border: var(--container-border) !important;
  border-radius: var(--container-border-radius) !important;
  padding: 1.5rem;
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
  margin-bottom: 1rem;
}

.stats-card:hover {
  /* transform: translateY(-5px); */
  box-shadow: var(--container-box-shadow);
}

.stats-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.stats-icon.primary {
  background-color: rgba(67, 97, 238, 0.1);
  color: var(--primary-color);
}

.stats-icon.success {
  background-color: rgba(76, 201, 240, 0.1);
  color: var(--success-color);
}

.search-container {
  position: relative !important;
  width: 100% !important;
}

.search-input {
  border-radius: 8px !important;
  padding: 0.75rem 1rem 0.75rem 2.5rem !important;
  border: 1px solid #dee2e6 !important;
  width: 100% !important;
  transition: all 0.3s !important;
}

.search-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25) !important;
  outline: none;
}

.search-icon {
  position: absolute !important;
  left: 2.25rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #6c757d !important;
}

.ad-card {
  background: white;
  border: var(--container-border2) !important;
  border-radius: var(--container-border-radius) !important;
  margin-bottom: 1.5rem;
}

.ad-card:hover {
  box-shadow: var(--container-box-shadow);
}

.ad-image {
  height: 160px;
  object-fit: cover;
  width: 100%;
}

.ad-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.ad-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #212529;
  line-height: 1.4;
}

.ad-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: #6c757d;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ad-description {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.5;
  /* flex-grow: 1; */
}

.ad-actions {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e9ecef;
  padding-top: 1rem;
  /* margin-top: auto; */
}

.status-badge {
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-active {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.status-paused {
  background-color: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.status-disabled {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.status-ended {
  background-color: rgba(108, 117, 125, 0.1);
  color: #6c757d;
}

.filter-tabs {
  display: flex !important;
  gap: 0.5rem !important;
  margin-bottom: 1.5rem !important;
  flex-wrap: wrap !important;
}

.filter-tab {
  padding: 3px 24px !important;
  border-radius: 50px !important;
  background: white !important;
  border: 1px solid #dee2e6 !important;
  font-size: 1.3rem !important;
  transition: all 0.3s !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.filter-tab:hover {
  background-color: #f8f8f8 !important;
}

.filter-tab.active {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #dee2e6;
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile-first responsive styles */
@media (max-width: 576px) {
  .dashboard-header {
      padding: 0;
      margin-bottom: 0;
  }

  .dashboard-header h1 {
      font-size: 1.5rem;
  }

  .stats-card {
      padding: 1rem;
  }

  .stats-number {
      font-size: 1.5rem;
  }

  .ad-content {
      padding: 1rem;
  }

  .ad-actions {
      /* flex-direction: column; */
      gap: 0.5rem;
  }

  .filter-tabs {
      gap: 0.25rem;
  }

  .filter-tab {
      padding: 0.4rem 0.8rem;
      font-size: 1rem;
  }

  /* Stats modal mobile styles */
  .stats-modal-content {
      margin: 1rem auto;
      width: 98%;
  }

  .stats-modal-body {
      padding: 1rem;
      max-height: 80vh;
  }

  .stats-overview {
      grid-template-columns: 1fr;
  }

  .performance-grid {
      grid-template-columns: 1fr;
  }

  .time-period-selector {
      justify-content: center;
  }

  .stats-table {
      font-size: 0.9rem;
  }

  .stats-table th,
  .stats-table td {
      padding: 0.5rem;
  }

  .toast-container {
      top: 10px;
      right: 10px;
      left: 10px;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
      padding: 0;
      margin-bottom: 0;
  }

  .search-container {
      margin-top: 1rem;
  }

  .filter-tab {
      font-size: 1rem;
  }
}

@media (min-width: 992px) {
  .ad-card {
      margin-bottom: 2rem;
  }
}


/* ========== AD CREATION ========== */

.ad-creation-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* overflow: hidden; */
  margin: 2rem 0;
}

.creation-header {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color2));
  color: white;
  padding: 2rem;
  text-align: center;
}

.creation-header h2 {
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 2.4rem;
}

.creation-header p {
  opacity: 0.9;
  margin-bottom: 0;
  color: #f8f8f8;
}

.form-section {
  padding: 2.5rem;
}

.form-step-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 240px;
}

.step:not(:last-child):after {
  content: '';
  position: absolute;
  top: 20px;
  right: -120px;
  width: 240px;
  height: 2px;
  background: #e9ecef;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 0.5rem;
  z-index: 1;
  transition: all 0.3s;
}

.step.active .step-circle {
  background: var(--primary-color);
  color: white;
  transform: scale(1.1);
}

.step.completed .step-circle {
  background: #28a745;
  color: white;
}

.step.completed .step-circle:after {
  content: '✓';
}

.step-label {
  /* font-size: 0.85rem; */
  color: #6c757d;
  text-align: center;
}

.step.active .step-label {
  color: var(--primary-color);
  font-weight: 600;
}

.step-content {
  display: none;
}

.step-content.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #495057;
  display: flex;
  align-items: center;
}

.form-label i {
  margin-right: 0.5rem;
  color: var(--primary-color);
}

.required-star {
  color: #dc3545;
  margin-left: 0.25rem;
}

.form-control {
  border: 1px solid var(--input-border-color) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem;
  font-size: 1.4rem !important;
  transition: all 0.3s;
  background: #fdfdfd;
}

.form-control:focus {
  border-color: var(--input-focus-border-color) !important;
  background: white;
  box-shadow:none !important;
  outline: none !important;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-skip {
  background: transparent;
  color: #6c757d;
  border: 1px solid #dee2e6;
}

.btn-skip:hover {
  background: #f8f9fa;
  color: #495057;
}

.alert-danger {
  border-radius: 8px;
  padding: 1rem 1.25rem;
  border: none;
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border-left: 4px solid #dc3545;
}

.alert-success {
  border-radius: 8px;
  padding: 1rem 1.25rem;
  border: none;
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
  border-left: 4px solid #28a745;
}

/* Banner Upload Styles */
.banner-upload-area {
  border: 2px dashed #dee2e6;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s;
  background: #fafbfc;
  cursor: pointer;
  margin-bottom: 1.5rem;
}

.banner-upload-area:hover {
  border-color: var(--primary-color);
  background: #f0f4f8;
}

.banner-upload-area.dragover {
  border-color: var(--primary-color);
  background: #e7f0ff;
}

.upload-icon {
  font-size: 3rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

.banner-upload-area:hover .upload-icon {
  color: var(--primary-color);
}

.banner-preview {
  margin-top: 1.5rem;
  display: none;
}

.banner-preview img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.banner-specs {
  font-size: 1.2rem !important;
  color: #6c757d;
  margin-top: 0.5rem;
}

/* Payment Styles */
.payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.payment-method {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.payment-method:hover {
  border-color: #adb5bd;
}

.payment-method.selected {
  border-color: var(--primary-color);
  background: rgba(67, 97, 238, 0.05);
}

.payment-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #6c757d;
}

.payment-method.selected .payment-icon {
  color: var(--primary-color);
}

.payment-details {
  display: none;
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.payment-details.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

.card-element {
  padding: 0.75rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: white;
}

.summary-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9ecef;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0 0;
  font-weight: 700;
  /* font-size: 1.1rem; */
  border-top: 2px solid #dee2e6;
  margin-top: 0.5rem;
}

.success-screen {
  text-align: center;
  padding: 3rem 2rem;
}

.success-icon {
  font-size: 64px !important;
  color: #28a745;
  margin-bottom: 1.5rem;
}

.success-screen h3 {
  color: #28a745;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .form-section {
      padding: 1.5rem;
  }

  .creation-header {
      padding: 1.5rem;
  }

  .step:not(:last-child):after {
      width: 80px;
      right: -40px;
  }

  .form-actions {
      flex-direction: column;
  }
}

@media (max-width: 576px) {
  .step:not(:last-child):after {
      width: 60px;
      right: -30px;
  }

  .step {
      width: 90px;
  }

  .payment-methods {
      grid-template-columns: 1fr;
  }
}
/*  */

@media (max-width: 640px) {
  .jp-name {
    font-size: 1.2rem !important;
  }

  .view-prediction {
    font-size: 1.5rem !important;
    /* letter-spacing: 0; */
    padding: 6px 0 !important;
  }

  .bettor a {
    font-size: 1.4rem;
  }

  .tag {
    font-size: 1.1rem;
    padding: 0.1rem 0.8rem;
  }
}

@media (max-width: 480px) {
  .jp-name {
    font-size: 1.2rem !important;
  }

  .view-prediction {
    font-size: 1.5rem !important;
    /* letter-spacing: 0; */
    padding: 6px 0 !important;
  }

  .bettor a {
    font-size: 1.4rem;
  }

  .tag {
    font-size: 1.1rem;
    padding: 0.1rem 0.8rem;
  }
}

/*  */
.mt-container {
    max-width: 800px;
    margin: 0 auto;
}

.mt-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mt-title {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.mt-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Vertical List Layout */
.mt-matches-list {
    display: flex;
    flex-direction: column;
    overflow-y: scroll !important;
    height: 400px;
}

.mt-match-item {
    background: #f8f8f8;
    padding: 5px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.mt-match-item:hover {
    background: var(--card-bg-hover);
}

.mt-match-content {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mt-match-teams {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mt-team-row {
    display: flex;
    align-items: center;
}

.mt-team-name {
    font-weight: 500;
    font-size: 1.2rem !important;
}

.mt-team-name-home {
    color: #2c3e50;
}

.mt-team-name-away {
    color: #2c3e50;
}

.mt-vs-text {
    margin: 0 8px;
    color: #95a5a6;
    font-weight: 500;
    font-size: 1.3rem !important;
}

.mt-match-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    margin-left: 15px;
}

.mt-match-date {
    font-size: 1.1rem !important;
    color: #6c757d;
    font-weight: 500;
}

.mt-match-time {
    font-size: 1.1rem;
    color: #95a5a6;
}

.mt-prediction-win {
    background-color: #d4edda;
    color: #155724;
    /* border: 1px solid #c3e6cb; */
}

.mt-prediction-loss {
    background-color: #f8d7da;
    color: #721c24;
    /* border: 1px solid #f5c6cb; */
}

.mt-prediction-draw {
    background-color: #fff3cd;
    color: #856404;
    /* border: 1px solid #ffeaa7; */
}

.mt-prediction-pending {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

/* Filter controls */
.mt-filter-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.mt-filter-select, .mt-filter-input {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    background: white;
    min-width: 180px;
    transition: border-color 0.3s;
}

.mt-filter-select:focus, .mt-filter-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.mt-filter-input {
    flex-grow: 1;
    max-width: 300px;
}

/* Stats Section */
.mt-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.mt-stat-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.mt-stat-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.mt-stat-win { color: #28a745; }
.mt-stat-loss { color: #dc3545; }
.mt-stat-draw { color: #ffc107; }
.mt-stat-pending { color: #6c757d; }

.mt-stat-label {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

/* Responsive styles */
@media (max-width: 768px) {
   .mt-match-item {
        padding: 15px;
        flex-direction: column;
        align-items: flex-start;
        gap:0 !important;
        margin-bottom: 15px !important;
        border-bottom: none !important;
    }

    .mt-match-teams {
      margin-bottom: 0 !important;
      line-height: 1.9rem;
    }

    .mt-match-number {
        margin-right: 0;
        margin-bottom: 0;
        align-self: flex-start;
        padding: 1px 2px !important;
        font-size: 1.2rem !important;
    }

    .mt-match-period {
      line-height: 1.5rem;
    }

    .mt-title {
        font-size: 1.8rem;
    }

    .mt-subtitle {
        font-size: 1rem;
    }

    .mt-filter-controls {
        flex-direction: column;
    }

    .mt-filter-select, .mt-filter-input {
        min-width: 100%;
    }

    .mt-stats-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .mt-match-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px !important;
    }

    .mt-match-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }

    .mt-team-name {
        font-weight: 500;
        font-size: 1.4rem !important;
    }
}

@media (max-width: 480px) {
    .mt-match-item {
        padding: 15px;
        flex-direction: column;
        align-items: flex-start;
    }

    .mt-match-number {
        margin-right: 0;
        margin-bottom: 0;
        align-self: flex-start;
    }

    .mt-match-content {
        width: 100%;
    }

    .mt-stats-container {
        grid-template-columns: 1fr;
    }
}

/* Empty state */
.mt-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.mt-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* stats */
.sta-container {
    margin: 0 auto;
}

.sta-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.sta-title {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.sta-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Prediction Stats Styles */
.sta-prediction-stats {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #c5c5c5 #f0f0f0;
}

.sta-prediction-stats::-webkit-scrollbar {
    height: 6px;
}

.sta-prediction-stats::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.sta-prediction-stats::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 3px;
}

.sta-prediction-stats::-webkit-scrollbar-thumb:hover {
    background: #a5a5a5;
}

.sta-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    /* background: #f8f9fa; */
    border-radius: 10px;
    /* min-width: 120px; */
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sta-stat-value {
    font-size: 1.8rem !important;
    font-weight: 700;
    margin-bottom: 5px;
}

.sta-stat-label {
    font-size: 1.2rem !important;
    color: #6c757d;
    font-weight: 500;
    text-align: center;
}

/* Content Section */
.sta-content-section {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.sta-content-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #2c3e50;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.sta-prediction-content {
    line-height: 1.6;
    color: #495057;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .sta-prediction-stats {
        flex-wrap: nowrap;
        padding: 15px;
        gap: 10px;
    }

    .sta-stat-item {
        min-width: 110px;
        padding: 12px 10px;
    }

    .sta-stat-value {
        font-size: 1.8rem;
    }

    .sta-stat-label {
        font-size: 0.85rem;
    }

    .sta-title {
        font-size: 1.8rem;
    }

    .sta-subtitle {
        font-size: 1rem;
    }

    .sta-content-section {
        padding: 20px;
    }

    .close-modal-btn i {
          font-size: 1.4rem !important;
      }
}

@media (max-width: 480px) {
    .sta-prediction-stats {
        padding: 12px;
        gap: 8px;
    }

    .sta-stat-item {
        min-width: 100px;
        padding: 10px 8px;
    }

    .sta-stat-value {
        font-size: 1.6rem;
    }

    .sta-stat-label {
        font-size: 0.8rem;
    }

    .sta-header {
        padding: 15px;
    }

    .sta-title {
        font-size: 1.6rem;
    }

    .close-modal-btn i {
        font-size: 1.4rem !important;
    }
}


/* // */
.ft-container {
    margin: 0 auto !important;
}

.ft-bg-container {
    background: white;
    border: var(--container-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
}

.ft-content-heading-container {
    /* background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%); */
    padding: 25px 30px;
    /* color: white; */
    position: relative;
    /* overflow: hidden; */
}

.ft-content-heading-container::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(30deg);
}

.ft-content-heading {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
}

.ft-newsletter {
    padding: 0 30px;
    background: white;
}

.ft-newsletter-form {
    max-width: 600px;
    margin: 0 auto;
}

.ft-form-list {
    margin-bottom: 20px;
}

.ft-form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1d28;
    font-size: 1.3rem;
}

.ft-form-label-star {
    color: #ef476f;
}

.ft-form-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.ft-form-input:focus {
    outline: none;
    border-color: #3a86ff;
    box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.1);
    background: white;
}

.ft-alert {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ft-alert-danger {
    background: rgba(239, 71, 111, 0.1);
    color: #ef476f;
    border-left: 4px solid #ef476f;
}

.ft-alert-icon {
    font-size: 1.2rem;
}

.ft-primary-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px 24px;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-shadow: 0 4px 12px rgba(58, 134, 255, 0.3);
}

.ft-primary-btn:hover {
    /* transform: translateY(-2px); */
    box-shadow: 0 6px 16px rgba(58, 134, 255, 0.4);
}

.ft-primary-btn:active {
    transform: translateY(0);
}

.ft-primary-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.ft-spacer {
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    margin: 25px 0;
}

.ft-account-content {
    padding: 0 30px 30px;
}

.ft-jp-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 40px;
    padding: 0 25px;
    color: #1a1d28;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ft-jp-heading::before {
    content: "";
    display: block;
    width: 4px;
    height: 24px;
    background: var(--secondary-color);
    border-radius: 2px;
}

.ft-table-area {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.ft-table {
    width: 100%;
    border-collapse: collapse;
}

.ft-table-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: white;
}

.ft-table-header-child {
    border: none;
}

.ft-table-header-items {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 1.3rem !important;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    color: white;
}

.ft-table-body {
    background: white;
}

.ft-table-body-items {
    transition: all 0.3s ease;
    border-bottom: 1px solid #f1f5f9;
}

.ft-table-body-items:hover {
    background: #f8fafc;
}

.ft-table-body-list {
    padding: 18px 20px;
    color: #1a1d28;
}

.ft-text-center {
    text-align: center;
}

.ft-p-2 {
    padding: 16px;
}

.ft-d-flex {
    display: flex;
}

.ft-justify-center {
    justify-content: center;
}

.ft-text-secondary {
    color: #6c757d;
}

.ft-spinner-border {
    width: 3rem;
    height: 3rem;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ft-spin 0.75s linear infinite;
    display: none;
}

@keyframes ft-spin {
    to {
        transform: rotate(360deg);
    }
}

.ft-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ft-mb-10 {
    margin-bottom: 10px;
}

.ft-mt-5 {
    margin-top: 5px;
}

.ft-w-100 {
    width: 100%;
    padding: 15px 30px !important;
}

/* Match row styling */
.ft-match-row {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.ft-match-row:hover {
    background: #f8fafc;
}

.ft-match-row:last-child {
    border-bottom: none;
}

.ft-match-number {
    font-weight: 600;
    color: #3a86ff;
    min-width: 40px;
}

.ft-match-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ft-match-teams {
    font-weight: 600;
    color: #1a1d28;
}

.ft-match-league {
    font-size: 0.85rem;
    color: #6c757d;
}

.ft-match-pick {
    background: #06d6a0;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 80px;
    text-align: center;
}

/* Success state */
.ft-success-state {
    text-align: center;
    padding: 40px 20px;
}

.ft-success-icon {
    font-size: 3rem;
    color: #06d6a0;
    margin-bottom: 16px;
}

.ft-success-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1a1d28;
    margin-bottom: 8px;
}

.ft-success-subtext {
    color: #6c757d;
    max-width: 400px;
    margin: 0 auto;
}

/* Empty state */
.ft-empty-state {
    text-align: center;
    padding: 0;
    color: #6c757d;
}

.ft-empty-icon {
    font-size: 3rem !important;
    margin-bottom: 16px;
    opacity: 0.5;
}

.ft-empty-text {
    font-size: 1.8rem !important;
    margin-bottom: 8px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .ft-content-heading-container {
        padding: 20px;
    }

    .ft-content-heading {
        font-size: 1.5rem;
    }

    .ft-newsletter {
        padding: 20px;
    }

    .ft-account-content {
        padding: 0 20px 20px;
    }

    .ft-table-header-items {
        padding: 14px 16px;
        font-size: 0.8rem;
    }

    .ft-table-body-list {
        padding: 14px 16px;
    }

    .ft-match-row {
        padding: 14px 16px;
    }

    .ft-form-label {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .ft-content-heading {
        font-size: 1.3rem;
    }

    .ft-table-header-items {
        padding: 12px 14px;
        font-size: 0.75rem;
    }

    .ft-match-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ft-match-pick {
        align-self: flex-start;
    }
}

/*  */
.ft-matches-preview-section {
  background: #fff;
  margin: var(--content-margin);
  padding: 0 !important;
}

.ft-matches-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Match Card Styling */
.ft-match-card {
  background: white;
  border-radius: 12px;
  padding: 0px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ft-match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.ft-match-number {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 1.1rem;
  background: rgba(58, 134, 255, 0.1);
  padding: 6px 12px;
  border-radius: 20px;
}

.ft-match-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ft-match-teams {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ft-team-vs {
  /* display: flex; */
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ft-team-home, .ft-team-away {
  font-weight: 600;
  font-size: 1.4rem !important;
}

.ft-match-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem !important;
  color: #6c757d;
}

.ft-match-date, .ft-match-time {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ft-match-prediction {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ft-prediction-badge {
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 1.5rem !important;
  text-align: center;
  min-width: 60px;
}

.ft-prediction-home {
  background: rgba(58, 134, 255, 0.1);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.ft-prediction-draw {
  background: rgba(255, 209, 102, 0.1);
  color: #b38b00;
  border: 1px solid #ffd166;
}

.ft-prediction-away {
  background: rgba(239, 71, 111, 0.1);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}

.ft-prediction-double {
  background: rgba(131, 56, 236, 0.1);
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.ft-prediction-label {
  font-size: 1.0rem !important;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Empty State */
.ft-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
}

.ft-empty-icon {
  font-size: 4rem !important;
  margin-bottom: 20px;
  opacity: 0.5;
}

.ft-empty-text {
  font-size: 1.3rem;
  margin-bottom: 12px;
  font-weight: 600;
}

.ft-empty-subtext {
  color: #6c757d;
  max-width: 400px;
  margin: 0 auto;
  font-size: 1.4rem !important;
  line-height: 2.1rem;
}

/* Loading Spinner */
.ft-loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.ft-spinner {
  width: 3rem;
  height: 3rem;
  border: 3px solid rgba(58, 134, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: ft-spin 1s linear infinite;
}

@keyframes ft-spin {
  to {
      transform: rotate(360deg);
  }
}

/* Desktop Layout */
@media (min-width: 768px) {
  .ft-match-card {
      padding: 24px;
  }

  .ft-match-main {
      grid-template-columns: 1fr auto;
      align-items: start;
  }

  .ft-match-teams {
      gap: 12px;
  }

  .ft-team-home, .ft-team-away {
      font-size: 1.2rem;
  }

  .ft-match-prediction {
      align-items: flex-end;
      min-width: 140px;
  }

  .ft-prediction-badge {
      padding: 10px 20px;
      font-size: 1rem;
      min-width: 60px;
  }
}

/* Large Desktop Layout */
@media (min-width: 1024px) {
  .ft-matches-preview-section {
      padding: 0px;
  }

  .ft-jp-heading {
      font-size: 1.7rem;
      margin-bottom: 25px;
  }

  .ft-match-card {
      padding: 28px;
      gap: 20px;
  }

  .ft-match-main {
      grid-template-columns: 1fr auto;
      gap: 30px;
  }

  .ft-match-teams {
      gap: 15px;
  }

  .ft-team-home, .ft-team-away {
      font-size: 1.3rem;
  }

  .ft-match-meta {
      font-size: 1rem;
      gap: 15px;
  }
}

/* Mobile Layout */
@media (max-width: 767px) {
  .ft-matches-preview-section {
      padding: 5px;
  }

  .ft-jp-heading {
      font-size: 1.5rem;
      margin-bottom: 15px;
  }

  .ft-match-card {
      padding: 16px;
      gap: 12px;
  }

  .ft-match-main {
      grid-template-columns: 1fr;
      gap: 15px;
  }

  .ft-match-prediction {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      min-width: auto;
      padding-top: 12px;
      border-top: 1px solid #f1f5f9;
  }

  .ft-prediction-label {
      font-size: 0.9rem !important;
  }

  .ft-team-vs {
      justify-content: space-between;
  }

  .ft-vs-separator {
      order: -1;
      width: 100%;
      text-align: center;
      margin-bottom: 8px;
  }
}

/* Small Mobile Layout */
@media (max-width: 480px) {

  .ft-matches-preview-section {
      padding: 5px;
  }

  .ft-jp-heading {
      font-size: 1.4rem;
  }

  .ft-match-card {
      padding: 14px;
  }

  .ft-team-home, .ft-team-away {
      font-size: 1rem;
  }

  .ft-match-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
  }

  .ft-prediction-badge {
      padding: 8px 14px;
      font-size: 0.85rem;
      min-width: 60px;
  }
}

/* Animation for new matches */
@keyframes ft-fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.ft-match-card {
  animation: ft-fadeInUp 0.5s ease-out;
}

/*  */
.st-bg-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 30px;
}

.st-content-heading-container {
    padding: 25px 30px;
    color: white;
    position: relative;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.st-content-heading {
    font-size: 1.8rem !important;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
}

.st-settings-container {
    padding: 20px 0;
}

/* Settings Items */
.st-settings-list {
    display: flex;
    flex-direction: column;
}

.st-setting-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin: 5px 10px !important;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
}

.st-setting-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem !important;
}

.st-icon-primary {
    background: rgba(58, 134, 255, 0.1);
    color: var(--primary-color);
}

.st-setting-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-setting-title {
    font-size: 1.4rem !important;
    font-weight: 600;
    color: #1a1d28;
    line-height: 1.4;
}

.st-setting-value {
    font-size: 1.3rem !important;
    color: #6c757d;
    line-height: 1.5;
}

.st-setting-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.st-edit-btn {
    background: rgba(58, 134, 255, 0.1);
    border: none;
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.st-edit-btn:hover {
    background: var(--primary-color);
    color: white !important;
}

.st-edit-btn:hover svg {
    filter: brightness(0) invert(1);
}

/* Modal Styles */
.st-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}

.st-modal-overlay.active {
    display: flex;
    animation: st-fadeIn 0.3s ease;
}

.st-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(0);
}

.st-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e5e7eb;
}

.st-modal-title {
    font-size: 1.5rem !important;
    font-weight: 600;
}

.st-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem !important;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.3s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.st-modal-close:hover {
    color: #1a1d28;
    background: #f3f4f6;
}

.st-modal-body {
    padding: 25px;
}

.st-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 25px;
    border-top: 1px solid #e5e7eb;
}

/* Form Styles */
.st-form-input, .st-form-textarea, .st-form-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 1.3rem !important;
    transition: all 0.3s ease;
}

.st-form-input:focus, .st-form-textarea:focus, .st-form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.1);
}

.st-form-textarea {
    resize: vertical;
    min-height: 100px;
}

.st-btn-primary {
    background: var(--primary-color);
    color: white;
}

.st-btn-primary:hover {
    background: var(--primary-color2);
}

.st-btn-outline {
    background: white;
    border: 1px solid #d1d5db;
    color: #1a1d28;
}

.st-btn-outline:hover {
    background: #f9fafb;
}

@keyframes st-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .st-content-heading-container {
        padding: 20px;
    }

    .st-setting-item {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
    }

    .st-setting-header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    .st-setting-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .st-modal {
        max-height: 95vh;
    }
}

/*  */
/* Custom Confirm Modal */
.st-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    animation: fadeIn 0.2s ease-out;
}

.st-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.st-confirm-content {
    background-color: #fff;
    border-radius: 20px;
    max-width: 420px;
    width: 100%;
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.st-confirm-header {
    padding: 24px 24px 16px 24px;
    text-align: center;
    position: relative;
}

.st-confirm-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    animation: pulse 0.5s ease-out;
}

.st-confirm-icon i {
    font-size: 32px;
    color: #d97706;
}

.st-confirm-header h3 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.st-confirm-header p {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.5;
}

.st-confirm-body {
    padding: 0 24px 24px 24px;
}

.st-confirm-warning {
    background-color: #fef2f2;
    border-left: 3px solid #dc2626;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.st-confirm-warning i {
    color: #dc2626;
    font-size: 18px;
}

.st-confirm-warning span {
    color: #991b1b;
    font-size: 13px;
    font-weight: 500;
}

.st-confirm-details {
    background-color: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.st-confirm-details p {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-confirm-details p:last-child {
    margin-bottom: 0;
}

.st-confirm-details i {
    font-size: 12px;
    color: #9ca3af;
}

.st-confirm-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.st-confirm-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.st-confirm-btn-cancel {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.st-confirm-btn-cancel:hover {
    background-color: #e5e7eb;
}

.st-confirm-btn-confirm {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.st-confirm-btn-confirm:hover {
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.st-confirm-btn-confirm:active {
    transform: translateY(0);
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .st-confirm-content {
        max-width: 90%;
        margin: 0 auto;
    }

    .st-confirm-header {
        padding: 20px 20px 12px 20px;
    }

    .st-confirm-icon {
        width: 60px;
        height: 60px;
    }

    .st-confirm-icon i {
        font-size: 28px;
    }

    .st-confirm-header h3 {
        font-size: 20px;
    }

    .st-confirm-header p {
        font-size: 14px;
    }

    .st-confirm-body {
        padding: 0 20px 20px 20px;
    }

    .st-confirm-actions {
        gap: 10px;
    }

    .st-confirm-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
}


@media (max-width: 480px) {
    .pd-content-heading {
        font-size: 1.3rem;
    }

    .pd-jp-name {
        font-size: 1.1rem;
    }

    .pd-action-btn {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .pd-match-card {
        padding: 14px 16px;
    }

    .pd-match-teams {
        font-size: 1rem;
    }
}

/* Animation for match cards */
@keyframes pd-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pd-match-card {
    animation: pd-fadeInUp 0.5s ease-out;
}

/*  */
.ch-dashboard {
    margin: 0 auto;
    padding: 15px;
}

/* Header - Mobile First */
.ch-header {
    background: #fff;
    border: var(--container-border) !important;
    border-radius: var(--container-border-radius) !important;
    padding: 20px !important;
    /* color: white; */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
    /* margin:var(--content-margin); */
    position: relative;
    overflow: hidden;
}

.ch-header::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(30deg);
}

.ch-header h1 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.ch-header p {
    opacity: 0.9;
    font-size: 1.5rem !important;
    margin-bottom: 15px;
    /* color: #fff; */
}

.ch-jackpot-selector {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.ch-jackpot-btn {
    background: var(--btn-outline-bg);
    border: var( --btn-border);
    color: var(--btn-outline-color);
    border-radius: var(--btn-border-radius);
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.2rem;
    transition: var(--btn-transition);
    flex: 1;
    min-width: 120px;
    text-align: center;
}

.ch-jackpot-btn:hover {
  box-shadow: var(--btn-box-shadow);
}

.ch-jackpot-btn.active {
    background:var(--btn-bg);
    color: #fff !important;
}

/* Stats Grid - Mobile First */
/* Stats Grid */
.ch-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 100%;
    /* overflow: hidden; */
}

.ch-stat-card {
    background: white;
    border: var(--container-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.05); */
    min-width: 0; /* Prevents flex item from overflowing */
}

.ch-stat-card:hover {
  box-shadow: var(--container-box-shadow);
}

.ch-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0; /* Prevents icon from shrinking */
}

.ch-stat-1 { background: rgba(67, 97, 238, 0.1); color: #4361ee; }
.ch-stat-2 { background: rgba(76, 217, 100, 0.1); color: #4cd964; }
.ch-stat-3 { background: rgba(255, 107, 107, 0.1); color: #ff6b6b; }
.ch-stat-4 { background: rgba(255, 193, 7, 0.1); color: #ffc107; }

.ch-stat-info {
    flex: 1;
    min-width: 0; /* Allows text to truncate properly */
}

.ch-stat-info h3 {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #2d3748;
    line-height: 1.2;
    position: relative;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.ch-stat-info p {
    margin: 0;
    color: #718096;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 500;
}

/* Stat Loaders */
.ch-stat-loader {
    display: none;
    justify-content: center;
    align-items: center;
    height: 32px;
}

.ch-stat-value {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
}

/* Tablet Styles */
@media (max-width: 1024px) {
    .ch-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ch-stat-card {
        padding: 16px;
    }

    .ch-stat-icon {
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
    }

    .ch-stat-info h3 {
        font-size: 2.2rem;
    }

    .ch-stat-info p {
        font-size: 1.3rem;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .ch-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 8px;
    }

    .ch-stat-card {
        padding: 16px;
        gap: 12px;
        border-radius: 10px;
    }

    .ch-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.6rem;
        border-radius: 10px;
    }

    .ch-stat-info h3 {
        font-size: 2rem;
        min-height: 28px;
    }

    .ch-stat-value {
        font-size: 2rem;
    }

    .ch-stat-info p {
        font-size: 1.2rem;
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
    .ch-stats-grid {
        gap: 10px;
        padding: 0 4px;
    }

    .ch-stat-card {
        padding: 14px 12px;
        gap: 10px;
        border-radius: 8px;
    }

    .ch-stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1.4rem;
        border-radius: 8px;
    }

    .ch-stat-info h3 {
        font-size: 1.8rem;
        min-height: 26px;
    }

    .ch-stat-value {
        font-size: 1.8rem;
    }

    .ch-stat-info p {
        font-size: 1.1rem;
        line-height: 1.3;
    }
}

/* Extra Small Mobile Styles */
@media (max-width: 360px) {
    .ch-stats-grid {
        gap: 8px;
    }

    .ch-stat-card {
        padding: 12px 10px;
        gap: 8px;
    }

    .ch-stat-icon {
        width: 32px;
        height: 32px;
        font-size: 1.3rem;
    }

    .ch-stat-info h3 {
        font-size: 1.6rem;
        min-height: 24px;
    }

    .ch-stat-value {
        font-size: 1.6rem;
    }

    .ch-stat-info p {
        font-size: 1.0rem;
    }
}

/* Prevent horizontal overflow */
.ch-stats-grid,
.ch-stat-card,
.ch-stat-info {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure text doesn't overflow */
.ch-stat-info p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Loading animation */
.ch-loader-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #4361ee;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pattern Analysis - Mobile First */
.ch-pattern-analysis {
    background: white;
    border-radius: var(--container-border-radius) !important;
    padding: var(--content-padding);
    margin: var(--content-margin);
    border: var(--container-border) !important;
}

.ch-pattern-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.ch-pattern-title {
    font-size: 1.8rem;
    font-weight: 600;
}

.ch-chart-actions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.ch-chart-btn {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.ch-chart-btn:hover, .ch-chart-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.ch-pattern-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ch-pattern-text {
    padding-right: 0;
}

.ch-pattern-highlight {
    background: #eef2ff;
    padding: 15px;
    border-radius: 8px;
    margin-top: 12px;
}

.ch-pattern-highlight h4 {
    color: #4361ee;
    margin-bottom: 8px;
    font-size: 1.4rem;
}

.ch-pattern-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ch-pattern-stat {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f4;
    font-size: 1.4rem;
}

.ch-pattern-stat:last-child {
    border-bottom: none;
}

.ch-pattern-stat-value {
    font-weight: 700;
    color: #4361ee;
}

/* Tabs - Mobile First */
.ch-tabs {
    display: flex;
    background: var(--container-bg);
    border-radius: var(--container-border-radius);
    box-shadow: var(--container-box-shadow);
    padding: var(--container-padding);
    margin: var(--container-margin);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ch-tab {
    padding: 10px 16px;
    cursor: pointer;
    border: none;
    background: none;
    white-space: nowrap;
    font-size: 1.4rem;
    font-weight: 600;
    color: #6c757d;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.ch-tab.active {
    background: var(--primary-color2);
    color: white;
}

.ch-tab-content {
    display: none;
    margin: var(--content-margin);
}

.ch-tab-content.active {
    display: block;
    animation: ch-fadeIn 0.5s ease;
}

@keyframes ch-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Charts Grid - Mobile First */
.ch-charts-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.ch-chart-card {
    background: var(--container-bg);
    border: var(--container-border);
    border-radius: var(--container-border-radius);
    padding: var(--container-padding);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ch-chart-card:hover {
    box-shadow: var(--container-box-shadow);
}

.ch-chart-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.ch-chart-title {
    font-size: 1.6rem;
    font-weight: 600;
}

.ch-full-width {
    width: 100%;
}

.ch-footer {
    text-align: center;
    color: #6c757d;
    font-size: 1.2rem;
    padding: var(--content-padding);
    margin: var(--content-margin);
}

/* Tablet Styles */
@media (min-width: 768px) {
    .ch-dashboard {
        padding: 20px;
    }

    .ch-header {
        padding: 25px;
        border-radius: 16px;
    }

    .ch-header h1 {
        font-size: 2.8rem;
    }

    .ch-header p {
        font-size: 1.6rem;
    }

    .ch-jackpot-btn {
        padding: 10px 20px;
        font-size: 1.4rem;
        flex: none;
    }

    .ch-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .ch-stat-card {
        padding: 20px;
        border-radius: 12px;
    }

    .ch-stat-icon {
        width: 60px;
        height: 60px;
        font-size: 2.4rem;
    }

    .ch-stat-info h3 {
        font-size: 2.4rem;
    }

    .ch-stat-info p {
        font-size: 1.4rem;
    }

    .ch-pattern-analysis {
        padding: 25px;
        border-radius: 16px;
    }

    .ch-pattern-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .ch-pattern-content {
        flex-direction: row;
        gap: 30px;
    }

    .ch-pattern-text {
        flex: 2;
        padding-right: 20px;
    }

    .ch-pattern-stats {
        flex: 1;
    }

    .ch-tabs {
        padding: 10px;
    }

    .ch-tab {
        padding: 12px 24px;
        font-size: 1.6rem;
    }

    .ch-charts-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .ch-chart-card {
        padding: 25px;
        border-radius: 16px;
    }

    .ch-chart-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .ch-full-width {
        grid-column: 1 / -1;
    }

    .ch-footer {
        font-size: 1.4rem;
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    .ch-dashboard {
        padding: 30px;
    }

    .ch-header h1 {
        font-size: 3.2rem;
    }
}

/* Small Mobile Optimization */
@media (max-width: 360px) {
    .ch-dashboard {
        padding: 10px;
    }

    .ch-header {
        padding: 15px;
    }

    .ch-header h1 {
        font-size: 2rem;
    }

    .ch-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ch-stat-card {
        padding: 12px;
    }

    .ch-stat-icon {
        width: 45px;
        height: 45px;
        font-size: 1.8rem;
        margin-right: 10px;
    }

    .ch-stat-info h3 {
        font-size: 1.8rem;
    }

    .ch-pattern-analysis {
        padding: 15px;
    }

    .ch-chart-card {
        padding: 15px;
    }
}

/* Loading and Error States */
.ch-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 1.6rem;
    color: #6c757d;
}

.ch-error {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 1.6rem;
    color: #ff6b6b;
}

/* Scrollbar Styling for Webkit Browsers */
.ch-tabs::-webkit-scrollbar,
.ch-chart-actions::-webkit-scrollbar {
    height: 4px;
}

.ch-tabs::-webkit-scrollbar-track,
.ch-chart-actions::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.ch-tabs::-webkit-scrollbar-thumb,
.ch-chart-actions::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.ch-tabs::-webkit-scrollbar-thumb:hover,
.ch-chart-actions::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.divider {
  margin-top: 0.7rem !important;
  margin-bottom: 0.7rem !important;
  border: 1px solid inherit !important;
}

.divider-lg {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid inherit !important;
}

/*  */
.ta-container {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 12px 20px;
    margin: 20px 0;
    /* box-shadow: 0 8px 32px rgba(177, 136, 25, 0.2); */
    position: relative;
    overflow: hidden;
}

.ta-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    /* background: linear-gradient(90deg, #b18819, #d4af37, #ffd700, #b18819); */
}

.ta-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding: 4px 0;
}

.ta-scroll::-webkit-scrollbar {
    display: none;
}

.ta-tag {
    background: #f2f2f2;
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    color: #333;
    padding: 5px 15px !important;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.25rem !important;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.ta-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    transition: left 0.6s;
}

.ta-tag:hover::before {
    left: 100%;
}

.ta-tag:hover {
    /* background: rgba(255, 255, 255, 0.25); */
    /* box-shadow: 0 6px 20px rgba(177, 136, 25, 0.3); */
    border-color: rgba(255, 255, 255, 0.4);
}

.ta-tag.ta-active {
    background: linear-gradient(135deg, #b18819, #d4af37);
    color: #fff;
}

.ta-tag.ta-active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 20px;
    height: 2px;
    /* background: white; */
    border-radius: 1px;
}

.ta-scroll-btn {
    background: #f2f2f2;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 1.6rem;
    backdrop-filter: blur(10px);
}

.ta-scroll-btn:hover {
    background: #f3f3f3;
}

.ta-scroll-btn:active {
    transform: scale(0.95);
}

.ta-scroll-btn.ta-left {
    margin-right: 12px;
}

.ta-scroll-btn.ta-right {
    margin-left: 12px;
}

/* Responsive design */
@media (max-width: 768px) {
    .ta-container {
        padding: 10px 15px;
        border-radius: 12px;
        margin: 15px 0;
    }

    .ta-tag {
        padding: 8px 16px;
        font-size: 1.3rem;
    }

    .ta-scroll-btn {
        width: 32px;
        height: 32px;
        font-size: 1.4rem;
    }

    .ta-scroll-btn.ta-left {
        margin-right: 8px;
    }

    .ta-scroll-btn.ta-right {
        margin-left: 8px;
    }
}

@media (max-width: 480px) {
    .ta-container {
        padding: 8px 12px;
    }

    .ta-tag {
        padding: 6px 12px;
        font-size: 1.2rem;
    }

    .ta-scroll-btn {
        width: 28px;
        height: 28px;
        font-size: 1.2rem;
    }
}


/* ========== HOMEPAGE ========== */

/* whitish gradient background */
.hm-container {
    position: relative;
    min-height: 100vh;
    background-color: linear-gradient(135deg, #ffffff 0%, #fefaf5 50%, #ffffff 100%);
}

/* subtle floating particles - gold accents */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15), transparent);
    border-radius: 50%;
    animation: floatParticle 15s infinite linear;
}

@keyframes floatParticle {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.4; }
    90% { opacity: 0.4; }
    100% { transform: translateY(-20vh) rotate(360deg); opacity: 0; }
}

/* navbar */
.hm-container .navbar {
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 5%;
    max-width: 1400px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.02);
}

.hm-container .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hm-container .logo i {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--primary-color);
    font-size: 1.8rem;
}

.hm-container .nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.hm-container .nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.hm-container .nav-links a:hover {
    color: var(--primary-color);
}

.hm-container .nav-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color2));
    color: white !important;
    padding: 0.5rem 1.2rem;
    border-radius: 30px;
    font-weight: 700 !important;
}

.hm-container .nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* hero section */
.hm-container .hero {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1300px;
    margin: 0 auto;
    padding: 4rem 5%;
    align-items: center;
}

.hm-container .hero-content h1 {
    /* font-family: 'Outfit', sans-serif; */
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.hm-container .hero-content h1 span {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hm-container .hero-description {
    color: #5a6470;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.hm-container .hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hm-container .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color2));
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
}

.hm-container .btn-primary:hover {
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
}

.hm-container .btn-secondary {
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color2);
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
}

.hm-container .btn-secondary:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: var(--primary-color2);
}

.hm-container .hero-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.hm-container .stat-item {
    text-align: center;
}

.hm-container .stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
}

.hm-container .stat-label {
    font-size: 0.8rem;
    color: #5a6470;
}

.hm-container .hero-image {
    position: relative;
    display: flex;
    justify-content: center;
}

.hm-container .hero-image svg {
    width: 100%;
    max-width: 420px;
}

.floating-card {
    position: absolute;
    bottom: 20px;
    left: -20px;
    background: white;
    backdrop-filter: blur(10px);
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    border-left: 4px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.floating-card i {
    font-size: 2rem;
    color: var(--primary-color);
}

.floating-card strong {
    color: #1a1f2e;
}

/* featured jackpots section */
.jackpots-section {
    position: relative;
    z-index: 10;
    padding: 5rem 5%;
    max-width: 1300px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #1a1f2e;
}

.section-header p {
    color: #5a6470;
    font-size: 1.4rem;
}

.jackpots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.jackpot-card {
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    border: 2px solid #e8e9ed;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    text-align: center;
}

.jackpot-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color2));
    transform: scaleX(0);
    transition: transform 0.4s;
}

.jackpot-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 20px 35px rgba(0,0,0,0.08);
}

.jackpot-card:hover::before {
    transform: scaleX(1);
}

.jackpot-icon {
    width: 70px;
    height: 70px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.5rem auto;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.jackpot-icon i {
    font-size: 2rem !important;
    color: var(--primary-color);
}

.jackpot-provider {
    font-size: 1.5rem;
    text-transform: capitalize;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    display: inline-block;
}

.hm-container .jackpot-name {
    font-size: 2.3rem !important;
    font-weight: 800;
    margin-bottom: 0.75rem;
    /* font-family: 'Outfit', sans-serif; */
    color: #1a1f2e;
}

.jackpot-prize {
    margin: 1rem 0;
}

.prize-badge {
    background: linear-gradient(95deg, var(--primary-color), var(--primary-color2));
    padding: 0.4rem 1rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.35rem !important;
    color: white;
    display: inline-block;
}

.jackpot-meta {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eef2f0;
}

.hm-container .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2rem;
    color: #5a6470;
}

.hm-container .meta-item i {
    color: var(--primary-color);
}

/* features section */
.features-section {
    position: relative;
    z-index: 10;
    padding: 5rem 5%;
    background: #fefbf5;
    margin: 2rem 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1300px;
    margin: 0 auto;
}

.feature-card {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 1.5rem;
    transition: 0.3s;
    border: 1px solid #eef2f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.feature-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 12px 24px rgba(0,0,0,0.05);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(177, 136, 25, 0.05));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.feature-icon i {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.feature-card h3 {
    font-size: 1.8rem !important;
    margin-bottom: 0.75rem;
    color: #1a1f2e;
}

.feature-card p {
    color: #5a6470;
    line-height: 1.5;
    font-size: 1.5rem;
}

/* cta section */
.cta-section {
    position: relative;
    z-index: 10;
    margin: 4rem 5%;
    padding: 4rem;
    background-color: linear-gradient(135deg, #fffaf0, #fff7e8);
    border-radius: 2rem;
    text-align: center;
    border: 1px solid rgba(212, 175, 55, 0.3);
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.cta-section h2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: #1a1f2e;
}

.cta-section p {
    color: #5a6470;
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* footer */
.hm-container .footer {
    position: relative;
    z-index: 10;
    padding: 3rem 5% 2rem;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    max-width: 1300px;
    margin: 0 auto;
    background: white;
}

.hm-container .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}

.hm-container .footer-logo {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hm-container .footer-logo i {
    color: var(--primary-color);
}

.hm-container .footer-links {
    display: flex;
    gap: 2rem;
}

.hm-container .footer-links a {
    color: #5a6470;
    text-decoration: none;
    transition: 0.3s;
}

.hm-container .footer-links a:hover {
    color: var(--primary-color);
}

.hm-container .social-icons {
    display: flex;
    gap: 1rem;
}

.hm-container .social-icons a {
    color: #5a6470;
    font-size: 1.2rem;
    transition: 0.3s;
}

.hm-container .social-icons a:hover {
    color: var(--primary-color);
}

.hm-container .copyright {
    text-align: center;
    color: #5a6470;
    font-size: 0.8rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
   .hm-container {
    padding: 0;
   }

   .hm-container .hero {
      gap: 1rem;
      margin: 0 auto;
      padding: 10px;
  }

  .hm-container .stat-number {
      font-size: 1.25rem !important;
  }

  .hm-container .stat-label {
      font-size: 1rem !important;
  }

  .jackpots-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
   }

   .features-section {
        padding: 10px;
        margin: 2rem auto;
    }
}

@media (max-width: 968px) {
    .hm-container .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hm-container .hero-stats {
        justify-content: center;
    }
    .hm-container .hero-buttons {
        justify-content: center;
    }
    .floating-card {
        display: none;
    }
    .hm-container .navbar {
        flex-direction: column;
        gap: 1rem;
    }
    .hm-container .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    .hm-container .hero-content h1 {
        font-size: 2.5rem;
    }
    .hm-container .footer-content {
        flex-direction: column;
        text-align: center;
    }
}


.view-details-btn i,
.like-btn i,
.comment-btn i,
.fav-btn i {
  font-size: 1.7rem !important;
}

.like-btn .like-count,
.comment-btn .comment-count {
  font-size: 1.6rem !important;
  margin-left: 3px;
}

.fav-button {
    transition: all 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fav-button.pop {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Optional: Add hover effects */
.fav-button:hover {
    transform: scale(1.05);
}

.fav-button:active {
    transform: scale(0.95);
}


/*  */
.match-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.match-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.match-teams {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.team {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 600;
}

.home-team {
    background: #f8f9fa;
    color: #2d3748;
    text-align: right;
}

.away-team {
    background: #f8f9fa;
    color: #2d3748;
    text-align: left;
}

.match-prediction {
    display: flex;
    gap: 8px;
}

.match-prediction-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    font-weight: 700;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-prediction-btn:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Home win button (1) */
.home-win {
    color: #dc2626;
    border-color: #fecaca;
}

.home-win:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* Draw button (X) */
.draw {
    color: #d97706;
    border-color: #fed7aa;
}

.draw:hover {
    background: #fffbeb;
    border-color: #d97706;
}

/* Away win button (2) */
.away-win {
    color: #2563eb;
    border-color: #dbeafe;
}

.away-win:hover {
    background: #eff6ff;
    border-color: #2563eb;
}

/* Selected state */
.match-prediction-btn.selected {
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.home-win.selected {
    background: #dc2626;
    border-color: #dc2626;
}

.draw.selected {
    background: #d97706;
    border-color: #d97706;
}

.away-win.selected {
    background: #2563eb;
    border-color: #2563eb;
}

/* Disabled state */
.match-prediction-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.match-prediction-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.badge-header{
  text-transform: capitalize !important;
}

/*  */
.pr-container {
    margin: 0 auto !important;
    padding: 0 !important;
}

.pr-header {
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pr-logo {
    font-size: 2.4rem;
    font-weight: bold;
    color: #3498db;
}

.pr-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pr-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.pr-dashboard-tabs {
    display: flex;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 20px;
}

.pr-tab {
    flex: 1;
    padding: 15px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.pr-tab.pr-active {
    border-bottom: 3px solid #3498db;
    color: #3498db;
    font-weight: bold;
}

.pr-tab:hover:not(.pr-active) {
    background-color: #f8f9fa;
}

.pr-tab-content {
    display: none;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.pr-tab-content.pr-active {
    display: block;
}

.pr-section-title {
    margin-bottom: 20px;
    color: #2c3e50;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pr-section-title i {
    font-size: 2.4rem;
}

.pr-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #95a5a6;
}

.pr-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.pr-empty-text {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.pr-empty-subtext {
    font-size: 1.4rem;
}

.pr-predictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.pr-prediction-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
    background-color: white;
}

.pr-prediction-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.pr-prediction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.pr-prediction-code {
    font-weight: bold;
    color: #3498db;
    font-size: 1.4rem;
}

.pr-prediction-date {
    font-size: 1.2rem;
    color: #95a5a6;
}

.pr-prediction-text {
    margin-bottom: 15px;
    line-height: 1.5;
}

.pr-prediction-stats {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    color: #95a5a6;
}

.pr-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pr-stat i {
    font-size: 1.6rem;
}

.pr-likes { color: #e74c3c; }
.pr-favorites { color: #f39c12; }
.pr-shares { color: #3498db; }
.pr-comments { color: #2ecc71; }

.pr-prediction-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.pr-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pr-btn-primary {
    background-color: #3498db;
    color: white;
}

.pr-btn-outline {
    background-color: transparent;
    border: 1px solid #3498db;
    color: #3498db;
}

.pr-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.pr-stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.pr-stat-card {
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.pr-stat-value {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.pr-stat-label {
    font-size: 1.4rem;
    color: #95a5a6;
}

.pr-stat-label a {
  color: #004494;
}

.pr-prediction-details {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    font-size: 1.4rem;
    color: #95a5a6;
}

.pr-detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.pr-performance-chart {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pr-performance-bar {
    margin-bottom: 15px;
}

.pr-performance-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pr-performance-track {
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.pr-performance-value {
    height: 100%;
    border-radius: 5px;
}

/* .container-col {
  margin: 5px auto;
} */

@media (max-width: 768px) {
    /* .container-col {
      padding:0 !important;
    } */

    .pr-predictions-grid {
        grid-template-columns: 1fr;
    }

    .pr-dashboard-tabs {
        flex-direction: column;
    }

    .pr-stats-overview {
        grid-template-columns: 1fr 1fr;
    }
}

/*  */
.users-list {
    max-height: 400px;
    overflow-y: auto;
}

.user-item {
    transition: background-color 0.2s ease;
    padding:10px;
    border-radius: 5px;
}

.user-item .text-muted {
  font-size: 1.1rem !important;
}

.user-item button {
  font-size: 1.1rem !important;
}

.user-item:hover {
    background-color: #f8f9fa;
}

.extra-small {
    font-size: 0.8rem;
    line-height: 1.2;
}

/*  */
.ed-container {
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
}

.ed-header {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
    border: 1px solid #e5e7eb;
}

.ed-header-title {
    font-size: 2.5rem !important;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.ed-header-subtitle {
    color: var(--text-gray-color);
    margin-bottom: 0;
}

.ed-status-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.ed-status-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.ed-status-badge--active {
    background: var(--success-color);
    color: white;
}

.ed-status-badge--paused {
    background: var(--warning-color);
    color: white;
}

.ed-status-badge--ended {
    background: var(--danger-color);
    color: white;
}

.ed-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: white;
}

.ed-card:hover {
    /* transform: translateY(-2px); */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ed-card__header {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 1.25rem 1.5rem;
    border-radius: 12px 12px 0 0 !important;
}

.ed-card__title {
    color: #1f2937;
    font-weight: 600;
    margin: 0;
    font-size: 1.5rem !important;
}

.ed-card__body {
    padding: 1.5rem;
}

.ed-form-group {
    margin-bottom: 1.5rem;
}

.ed-form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    display: block;
}

.ed-form-label__icon {
    margin-right: 2px;
}

.ed-form-required {
    color: var(--danger-color);
    margin-left: 0.25rem;
}

.ed-form-control {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
    width: 100%;
    font-size: 1.45rem !important;
    font-family: inherit;
}

.ed-form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.ed-form-text {
    font-size: 1.3rem !important;
    color: var(--secondary-color);
    margin-top: 0.5rem;
}

.ed-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.ed-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fafafa;
}

.ed-upload-area:hover {
    border-color: var(--primary-color);
    background: #f0f7ff;
}

.ed-upload-icon {
    font-size: 3rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.ed-upload-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #374151;
}

.ed-upload-subtitle {
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}

.ed-upload-specs {
    font-size: 0.875rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.ed-preview-image {
    max-height: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ed-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: center;
}

.ed-stat-item {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.ed-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.ed-stat-label {
    font-size: 0.875rem;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.ed-actions-sticky {
    /* position: sticky; */
    bottom: 0;
    background: white;
    padding: 1.5rem 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-top: 1rem;
    backdrop-filter: blur(10px);
}

.ed-btn {
    border-radius: 8px;
    padding: 1rem 2rem !important;
    font-weight: 600;
    transition: all 0.2s ease;
    border-radius: var(--btn-border-radius) !important;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.35rem !important;
}

.ed-btn--primary {
    background: var(--primary-color);
    color: white;
}

.ed-btn--primary:hover {
    background: var(--primary-color2);
    color: white;
}

.ed-btn--outline-primary {
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
}

.ed-btn--outline-primary:hover {
    background: var(--primary-color2);
    border: 2px solid var(--primary-color2);
    color: white;
}

.ed-btn--outline-secondary {
    border: 1px solid var(--secondary-color);
    background: transparent;
    color: var(--secondary-color);
}

.ed-btn--outline-secondary:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff !important;
}

.ed-btn--outline-light {
    border: 1px solid #ccc;
    background-color: transparent;
    color: var(--text-gray-color) !important;
}

.ed-btn--outline-light:hover {
    background-color: #f8f8f8;
    border-color: #ccc;
    color: var(--text-gray-color) !important;
}

.ed-btn--outline-danger{
    border: 1px solid var(--danger-color);
    background: transparent;
    color: var(--danger-color) !important;
}

.ed-btn--outline-danger:hover{
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: #fff !important;
}

.ed-btn--danger {
    background: var(--danger-color);
    color: white;
}

.ed-btn--danger:hover {
    background: #dc2626;
    color: white;
}

.ed-btn--warning {
    background: var(--warning-color);
    color: white;
}

.ed-btn--warning:hover {
    /* background: #d97706; */
    color: white;
}

.ed-btn--light {
    background: #f8f9fa;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.ed-btn--light:hover {
    background: #e9ecef;
    color: #374151;
}

.ed-btn--sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.ed-switch {
    width: 3em;
    height: 1.5em;
}

.ed-switch:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.ed-alert {
    border: none;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.ed-alert--error {
    background: #fef2f2;
    color: #dc2626;
    border-left: 4px solid #dc2626;
}

.ed-alert--success {
    background: #f0fdf4;
    color: #16a34a;
    border-left: 4px solid #16a34a;
}

.ed-flex-group {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.ed-flex-group--between {
    justify-content: space-between;
}

.ed-flex-group--center {
    justify-content: center;
}

.ed-flex-group--responsive {
    flex-direction: column;
}

.ed-text-muted {
    color: var(--secondary-color);
}

.ed-mb-0 { margin-bottom: 0 !important; }
.ed-mb-2 { margin-bottom: 1rem !important; }
.ed-mb-3 { margin-bottom: 1.5rem !important; }
.ed-mb-4 { margin-bottom: 2rem !important; }

.ed-mt-2 { margin-top: 1rem !important; }
.ed-mt-3 { margin-top: 1.5rem !important; }

.ed-p-3 { padding: 1.5rem !important; }
.ed-p-4 { padding: 2rem !important; }

.ed-grid {
    display: grid;
    gap: 1.5rem;
}

.ed-grid--2cols {
    grid-template-columns: repeat(2, 1fr);
}

.ed-hidden {
    display: none !important;
}

.ed-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.ed-modal-overlay--active {
    display: flex;
}

.ed-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
}

.ed-modal__header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.ed-modal__title {
    margin: 0;
    font-weight: 600;
    color: #1f2937;
}

.ed-modal__body {
    padding: 1.5rem;
}

.ed-modal__footer {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.ed-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: ed-spin 1s linear infinite;
}

@keyframes ed-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .ed-container {
        padding: 0;
    }

    .ed-header {
        padding: 1.5rem;
    }

    .ed-card__body {
        padding: 1.25rem;
    }

    .ed-stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ed-actions-sticky {
        /* position: static; */
        margin-top: 1rem;
    }

    .ed-flex-group--responsive {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ed-flex-group--responsive .ed-btn {
        width: 100%;
    }

    .ed-flex-group{
      flex-direction: column;
      width: 100%;
    }

    .ed-flex-group--center .ed-flex-group{
      padding: 5px;
    }

    .ed-flex-group--center .ed-flex-group .ed-btn{
      width: 100%;
    }

    .ed-grid--2cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .ed-container {
        padding: 0;
    }

    .ed-header {
        padding: 1rem;
    }

    .ed-card__header {
        padding: 1rem;
    }

    .ed-card__body {
        padding: 1rem;
    }

    .ed-upload-area {
        padding: 1.5rem;
    }
}

/*  */
/* Clean Status Card Styles */
.ed-status-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--primary-color);
}

.ed-status-card__compact {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.ed-status-card__badge {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 1.6rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ed-status-card__badge--active {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.ed-status-card__badge--paused {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.ed-status-card__badge--ended {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.ed-status-card__info {
    flex: 1;
    min-width: 0;
}

.ed-status-card__title {
    font-size: 1.6rem !important;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    word-wrap: break-word;
}

.ed-status-card__details {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ed-status-card__detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem !important;
    color: #6b7280;
}

.ed-status-card__detail i {
    width: 14px;
    text-align: center;
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 640px) {
    .ed-status-card__compact {
        flex-direction: column;
        gap: 0.75rem;
    }

    .ed-status-card__badge {
        align-self: flex-start;
    }

    .ed-status-card__details {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/*  */
.stat-item {
    /* display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pd-text);
    padding: 3px !important; */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 60px; /* Fixed minimum width */
    padding: 0.5rem 0.25rem !important; /* Equal padding */
    background-color: #f8f9fa;
    border-radius: 0.375rem;
}

.stat-item i {
    width: 16px;
}

.prediction-1 { color: var(--pd-success); }
.prediction-X { color: var(--pd-warning); }
.prediction-2 { color: var(--pd-danger); }

.pd-loading-container {
    text-align: center;
    padding: 40px;
    color: var(--pd-text);
}

.pd-spinner {
    border: 3px solid var(--pd-border);
    border-top: 3px solid var(--pd-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pd-error-message, .pd-no-data {
    text-align: center;
    padding: 60px 20px;
    color: var(--pd-text);
}

.pd-error-message i, .pd-no-data i {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.7;
}

.pd-error-message h3, .pd-no-data h3 {
    margin-bottom: 10px;
    color: var(--pd-text);
}

.pd-retry-btn {
    background: var(--pd-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 15px;
    transition: background 0.2s ease;
}

.pd-retry-btn:hover {
    background: var(--pd-primary-dark);
}

/* Responsive design */
@media (max-width: 768px) {
    .prediction-stats {
        gap: 15px;
    }

    .stat-item {
        font-size: 1.35rem;
    }

    .prediction-code {
        font-size: 1.5rem !important;
    }
}

/*  */
/* Base styles for mobile first */
.pt-prediction-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    /* margin-top: 0 !important; */
    overflow-x: auto !important;
    /* padding-bottom: 8px !important; */
    /* background: #f8f9fa; */
    border-radius: 8px;
    justify-content: space-between;
}

.pt-stat-item {
    display: flex;
    width:fit-content !important;
    align-items: center;
    gap: 8px;
    padding: 10px 12px !important;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 1.3rem !important;
    font-weight: 500;
    border: 1px solid #f2f2f2;
}

.pt-stat-item i {
    width: 16px;
    text-align: center;
    color: #6c757d;
}

.pt-prediction-1 {
    border-left: 3px solid #007bff;
}

.pt-prediction-X {
    border-left: 3px solid #28a745;
}

.pt-prediction-2 {
    border-left: 3px solid #dc3545;
}

/* Tablet styles */
@media (max-width: 768px) {
    .pt-prediction-code {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        padding: 20px;
    }

    .pt-stat-item {
        flex: 1;
        font-size: 1.1rem !important;
    }
}

/* Desktop styles */
@media (min-width: 1024px) {
    .pt-prediction-code {
        justify-content: space-between;
        gap: 20px;
        padding: 24px;
    }

    .pt-stat-item {
        flex: 0 1 auto;
        font-size: 1.6rem;
        padding: 12px 16px;
    }
}

/* Large desktop styles */
@media (min-width: 1280px) {
    .pt-prediction-code {
        max-width: 1200px;
        margin: 0 auto;
    }
}

#submitStatus{
  display: none;
}


/* HAHAHA */
/* No Matches Found State */
.no-matches-state {
    /* position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; */
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 20px;
}

.no-matches-content {
    text-align: center;
    max-width: 400px;
    padding: 40px 20px;
}

.no-matches-icon {
    font-size: 4rem !important;
    color: #6c757d;
    margin-bottom: 20px;
    opacity: 0.7;
}

.no-matches-title {
    font-size: 1.8rem !important;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 12px;
}

.no-matches-message {
    font-size: 1.3rem !important;
    color: #6c757d;
    margin-bottom: 30px;
    line-height: 1.5;
}

.no-matches-actions {
    margin-top: 25px;
}

.no-matches-actions .btn-lg {
    min-width: 200px;
}

/* Ensure modal content stays properly layered */
.prediction-modal-body {
    position: relative;
}

.jackpot-actions-row {
    position: relative;
    z-index: 20;
}

.jackpot-selection-section {
    position: relative;
    z-index: 20;
    width:100%;
}

/*  */
.subscription-container {
    width: 100%;
    text-align: center;

    background: #f8f9fa;
    border: 1px solid var(--border-color2);
    border-radius: 12px;
    padding: var(--content-padding);
    margin: var(--content-margin);
}

.logo {
    margin-bottom: 30px;
}

.logo-icon {
    font-size: 3.5rem;
    color: #ff6b6b;
    margin-bottom: 10px;
}

.logo-text {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.logo-subtext {
    font-size: 1rem;
    opacity: 0.8;
}

.card {
    background: #fff;
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 0 !important;
    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    margin-bottom: 0 !important;
}

.price-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 15px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.price-label {
    font-size: 1rem;
    opacity: 0.9;
}

.price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin: 5px 0;
}

.price-subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
}

.features {
    text-align: left;
    margin: 25px 0;
}

.features-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    text-align: center;
}

.features-list {
    list-style: none;
}

.features-list li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}

.features-list li:last-child {
    border-bottom: none;
}

.features-list li i {
    color: #4CAF50;
    margin-right: 10px;
    font-size: 1rem;
}

/* Subscription Button Styles */
.subscribe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: white;
    border: none;
    padding: 18px 40px;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    overflow: hidden;
    text-decoration: none;
    width: 100%;
    max-width: 300px;
    margin-top: 10px;
}

.subscribe-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.6);
    background: linear-gradient(135deg, #ff5252, #ff7b3a);
}

.subscribe-btn:active {
    transform: translateY(1px);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.btn-icon {
    margin-right: 12px;
    font-size: 1.4rem;
}

.btn-text {
    position: relative;
    z-index: 2;
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: 0.5s;
}

.subscribe-btn:hover .btn-shine {
    left: 100%;
}

.guarantee {
    margin-top: 20px;
    font-size: 0.9rem;
    opacity: 0.8;
}

.footer {
    margin-top: 30px;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Animation for the button */
@keyframes pulse {
    0% {
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    }
    50% {
        box-shadow: 0 6px 30px rgba(255, 107, 107, 0.7);
    }
    100% {
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    }
}

.subscribe-btn {
    animation: pulse 2s infinite;
}


/*  */
/* ===== BASE STYLES ===== */
.tp-container {
    margin: 0 auto;
    padding: 0 1rem !important;
}

.tp-bg-container {
    /* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
    margin-bottom: 10px;
    /* padding: 1rem 0; */
    border: var(--container-border) !important;
    background-color: #fff !important;
    border-radius: var(--container-border-radius) !important;
}

/* ===== HERO SECTION ===== */
.tp-hero {
    display: flex;
    flex-direction: column;
    /* gap: 2rem; */
    margin-bottom: 3rem;
}

.tp-hero__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tp-hero__text {
    text-align: center;
    margin-bottom: 20px;
}

.tp-hero__title {
    font-size: 2rem !important;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.tp-hero__subtitle {
    font-size: 1.125rem !important;
    color: #718096;
    line-height: 1.6;
}

/* Pricing Card */
.tp-pricing-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 16px 16px 0 0;
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
    text-align: center;
}

.tp-pricing-card__badge {
    margin-bottom: 1.5rem;
}

.tp-pricing-card__amount {
    font-size: 2.8rem !important;
    font-weight: 700;
    line-height: 1;
}

.tp-pricing-card__type {
    font-size: 1.35rem !important;
    opacity: 0.9;
    margin-top: 0.5rem;
}

.tp-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
}

.tp-pricing-card__feature {
    padding: 0.5rem 0;
    font-size: 1.4rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tp-pricing-card__icon {
    color: #68d391;
    font-size: 1.5rem !important;
}

/* Selection Panel */
.tp-selection {
    background: white;
    padding: 1.5rem !important;
    border-radius: 12px;
    /* border: 1px solid red; */
    /* box-shadow: 0 0 6px rgba(0,0,0,0.08); */
}

.tp-selection__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0px;
}

.tp-selection__icon {
    color: #ecc94b;
    font-size: 1.5rem;
}

.tp-selection__title {
    margin: 0;
    color: #2d3748;
    font-size: 1.5rem !important;
}

.tp-selection__content {
    display: flex;
    flex-direction: column;
}

.tp-selection__label {
    margin-bottom: 0.75rem;
    color: #282828;
    font-weight: 600;
    font-size: 1.5rem !important;
}

/* ===== ACTION SECTION ===== */
.tp-action {
    margin-bottom: 3rem;
}

.tp-action__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* CTA Button */
.tp-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: green;
    color: #fff !important;
    padding: 1.5rem 2.5rem !important;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.6rem !important;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(245, 87, 108, 0.3) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
    justify-content: center;
    margin-top: 5px !important;
    width:100%;
}

.tp-cta:hover {
    /* transform: translateY(-2px); */
    box-shadow: 0 12px 35px rgba(245, 87, 108, 0.4);
    color: #fff !important;
}

.tp-cta__shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.tp-cta:hover .tp-cta__shine {
    left: 100%;
}

.tp-cta__icon {
    font-size: 1.1rem;
}

.tp-cta__text {
    position: relative;
    z-index: 1;
}

/* ===== PREVIEW SECTION ===== */
.tp-preview {
    margin-bottom: 3rem;
    padding: 0 0 10px 0 !important;
    border-radius: var(--container-border-radius);
}

.tp-preview__header {
    text-align: center;
    margin-bottom: 2rem;
}

.tp-preview__title {
    font-size: 1.5rem;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.tp-preview__subtitle {
    color: #718096;
    font-size: 1.25rem !important;
}

.tp-preview__container {
    background: white;
    border-radius: 0;
    padding: 1.5rem;
    box-shadow: 0 0 2px rgba(0,0,0,0.08);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

/* Empty State */
.tp-preview__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    color: #a0aec0;
}

.tp-preview__empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.tp-preview__empty-title {
    margin-bottom: 0.5rem;
    color: #4a5568;
    font-size: 1.5rem;
}

.tp-preview__empty-text {
    color: #718096;
    font-size: 1.275rem;
}

/* Loading State */
.tp-preview__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.tp-preview__spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: tp-spin 1s linear infinite;
    margin-bottom: 1rem;
}

.tp-preview__loading-text {
    color: #718096;
    font-size: 0.875rem;
}

@keyframes tp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== SUPPORT SECTION ===== */
.tp-support {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Support Card */
.tp-support__card {
    background-color: white;
    padding: 1.5rem;
    border-radius: 12px;
    /* box-shadow: 0 4px 20px rgba(0,0,0,0.08); */
}

.tp-support__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tp-support__icon {
    color: var(--secondary-color);
    font-size: 1.5rem !important;
}

.tp-support__title {
    margin: 0;
    color: #2d3748;
    font-size: 1.5rem !important;
}

.tp-support__text {
    color: #718096;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.tp-support__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.25rem;
    transition: color 0.3s ease;
    border: 1px solid var(--primary-color);
    padding: 5px 14px !important;
    border-radius: 25px !important;
}

.tp-support__link:hover {
    color: var(--primary-color2);
    border: 1px solid var(--primary-color2);
}

.tp-support__link-icon {
    font-size: 1.3rem;
}

/* Info Grid */
.tp-support__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tp-support__info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.tp-support__info-icon {
    font-size: 1.25rem;
    color: #48bb78;
}

.tp-support__info-content {
    display: flex;
    flex-direction: column;
}

.tp-support__info-title {
    color: #2d3748;
    font-size: 0.875rem;
}

.tp-support__info-text {
    color: #718096;
    font-size: 0.75rem;
}

/* ===== TABLET STYLES (768px and up) ===== */
@media (min-width: 768px) {
    .tp-container {
        padding: 0 2rem;
    }

    .tp-bg-container {
        padding: 2rem 0;
    }

    .tp-hero {
        flex-direction: row;
        gap: 3rem;
        align-items: center;
    }

    .tp-hero__content {
        flex: 1;
        gap: 2.5rem;
    }

    .tp-hero__text {
        text-align: left;
    }

    .tp-hero__title {
        font-size: 2.5rem;
    }

    .tp-pricing-card {
        padding: 2rem;
        text-align: left;
    }

    .tp-pricing-card__feature {
        justify-content: flex-start;
    }

    .tp-selection {
        flex: 0;
        padding: 2rem;
    }

    .tp-cta {
        padding: 1.25rem 2.5rem;
        font-size: 1.1rem;
    }

    .tp-preview__container {
        padding: 2rem;
    }

    .tp-support {
        flex-direction: row;
        gap: 2rem;
    }

    .tp-support__card {
        flex: 1;
    }

    .tp-support__info {
        flex: 0 0 250px;
    }
}

/* ===== DESKTOP STYLES (1024px and up) ===== */
@media (min-width: 1024px) {
    .tp-hero__title {
        font-size: 3rem;
    }

    .tp-hero__subtitle {
        font-size: 1.25rem;
    }

    .tp-pricing-card__amount {
        font-size: 3rem;
    }

    .tp-pricing-card__feature {
        font-size: 1rem;
    }

    .tp-trust {
        gap: 2rem;
    }

    .tp-trust__item {
        font-size: 1rem;
    }

    .tp-preview__title {
        font-size: 1.75rem;
    }

    .tp-support__info {
        flex: 0 0 300px;
    }
}

/* ===== LARGE DESKTOP STYLES (1200px and up) ===== */
@media (min-width: 1200px) {
    .tp-hero {
        gap: 4rem;
    }

    .tp-hero__content {
        gap: 3rem;
    }
}


/*  */
.ab-container {
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section */
.ab-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1575361204480-aadea25e6e68?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    text-align: center;
}

.ab-hero h1 {
    font-size: 3rem !important;
    margin-bottom: 20px;
    color:#fff;
}

.ab-hero p {
    font-size: 1.5rem !important;
    max-width: 700px;
    margin: 0 auto 30px;
    color:#fff;
}

.ab-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

.ab-btn-primary {
    background: var(--primary-color);
    color: white;
    padding: 12px 30px;
    font-size: 1.5rem !important;
    border: 2px solid var(--primary-color);
    border-radius: 25px;
}

.ab-btn-primary:hover {
    background: var(--primary-color2);
}

.ab-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid var(--primary-color);
    border-radius: 25px;
    padding: 12px 30px;
    font-size: 1.5rem;
}

.ab-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* About Section */
.ab-about-section {
    padding: 80px 0;
    background: white;
}

.ab-section-title {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.ab-section-title h2 {
    font-size: 2.5rem;
    color: var(--ab-primary);
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
}

.ab-about-content {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 60px;
}

.ab-about-text {
    flex: 1;
}

.ab-about-text h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--ab-primary);
}

.ab-about-text p {
    margin-bottom: 20px;
    color: var(--ab-text-light);
}

.ab-about-image {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--ab-shadow);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 30px;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Contact US Section */
.abt-contact-section {
    margin-top: 3rem;
    padding: 2rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.abt-contact-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.abt-contact-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.abt-contact-title {
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.abt-contact-desc {
    color: #888;
    margin: 0 0 1.2rem 0;
    font-size: 1.5rem;
    line-height: 1.6;
}

/* Contact Button */
.abt-contact-btn {
    display: inline-block;
    background: transparent;
    border: 1px solid #d4af37;
    color: #d4af37;
    padding: 0.6rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.abt-contact-btn:hover {
    background: #d4af37;
    color: #fff !important;
}

.abt-contact-btn i {
    margin-right: 0.5rem;
}

/* Note below button */
.abt-contact-note {
    margin-top: 0.8rem;
    font-size: 1.2rem;
    color: #555;
}

.abt-contact-note i {
    color: #00a86b;
    margin-right: 0.3rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .abt-contact-section {
        margin-top: 2rem;
        padding: 1.5rem 0.8rem;
    }

    .abt-contact-title {
        font-size: 1.1rem;
    }

    .abt-contact-desc {
        font-size: 0.85rem;
    }

    .abt-contact-btn {
        font-size: 0.85rem;
        padding: 0.5rem 1.5rem;
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
    }

    .abt-contact-icon {
        font-size: 2rem;
    }
}

/* Prediction Visualization Styles */
.ab-prediction-visual {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ab-match-prediction {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--ab-accent);
}

.ab-match-teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ab-team {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.ab-team-logo {
    width: 30px;
    height: 30px;
    background: var(--ab-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
}

.ab-vs {
    font-weight: 700;
    color: var(--ab-text-light);
}

.ab-prediction-bars {
    display: flex;
    gap: 10px;
    height: 30px;
    margin-bottom: 10px;
}

.ab-prediction-bar {
    flex: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ab-prediction-bar:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0));
}

.ab-prediction-bar.home {
    background: var(--ab-primary);
}

.ab-prediction-bar.draw {
    background: #ffa500;
}

.ab-prediction-bar.away {
    background: #e74c3c;
}

.ab-prediction-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--ab-text-light);
}

.ab-prediction-label {
    text-align: center;
    flex: 1;
}

/* Values Section */
.ab-values-section {
    padding: 80px 0;
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
    background: #fff;
}

.ab-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.ab-value-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

/* .ab-value-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color2));
} */

.ab-value-card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.ab-value-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color2));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2.2rem;
    transition: all 0.4s ease;
    box-shadow: 0 8px 20px rgba(26, 71, 42, 0.2);
}

.ab-value-card:hover .ab-value-icon {
    background: linear-gradient(135deg, var(--primary-color2), var(--primary-color));
}

.ab-value-card h3 {
    margin-bottom: 12px;
    font-size: 1.65rem !important;
    font-weight: 700;
    position: relative;
    /* padding-bottom: 12px; */
}

.ab-value-card p {
    margin-bottom: 10px !important;
    color: var(--ab-text-light);
    font-size: 1.3rem !important;
    line-height: 1.7;
}

a.ab-value-card:hover {
  text-decoration: none !important;
  color: var(--text-gray-color) !important;
}

.ab-success-rate {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 168, 107, 0.1);
    color: var(--ab-accent);
    padding: 6px 15px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
}

.ab-success-rate i {
    margin-right: 5px;
}

.ab-cta-button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 25px;
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.4rem !important;
}

.ab-cta-button:hover {
    background: #f8f8f8;
    color: white;
}

/* Jackpot Tips Section */
.ab-jackpot-period {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* CTA Section */
.ab-cta-section {
    padding: 80px 0;
    text-align: center;
}

.ab-cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.ab-cta-section p {
    font-size: 1.5rem;
    max-width: 700px;
    margin: 0 auto 30px;
}

.ab-btn-cta {
    background: var(--primary-color);
    color: white;
    padding: 12px 30px;
    font-size: 1.5rem !important;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s;
}

.ab-btn-cta:hover {
    background: var(--primary-color2);
}

/* Responsive Design */
@media (max-width: 992px) {
    .ab-about-content {
        flex-direction: column;
    }

    .ab-hero h1 {
        font-size: 2.5rem;
    }

    .ab-header-container {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .ab-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .ab-hero {
        padding: 60px 0;
    }

    .ab-hero h1 {
        font-size: 2rem;
    }

    .ab-hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .ab-hero h1 {
        font-size: 2.5rem !important;
    }

    .ab-hero p {
        font-size: 1.4rem !important;
    }

    .ab-btn-primary,
    .ab-btn-secondary {
        font-size: 1.25rem !important;
        width:100%;
    }

    .ab-section-title h2 {
        font-size: 2rem !important;
    }

    .ab-about-image {
        padding: 20px;
        min-height: 400px;
    }
}


/* ===== ADVERTISING PLATFORM STYLES ===== */
.tp-advertising-platform {
    /* background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); */
    background: #fff;
    padding: 3rem 1rem;
}

.tp-advertising-platform__container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.tp-advertising-platform__header {
    text-align: center;
    margin-bottom: 3rem;
}

.tp-advertising-platform__title {
    font-size: 2rem;
    color: #2d3748;
    margin-bottom: 1rem;
    font-weight: 700;
}

.tp-advertising-platform__subtitle {
    font-size: 1.5rem !important;
    color: #718096;
    max-width: 600px;
    margin: 0 auto;
}

/* Steps */
.tp-advertising-platform__steps {
    margin-bottom: 4rem;
}

.tp-advertising-platform__steps-title {
    text-align: center;
    font-size: 1.9rem !important;
    color: #2d3748;
    margin-bottom: 2rem;
    font-weight: 600;
}

.tp-advertising-platform__steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* max-width: 800px; */
    margin: 0 auto;
}

.tp-advertising-platform__step {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--primary-color);
}

.tp-advertising-platform__step-number {
    background: var(--primary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.tp-advertising-platform__step-content h4 {
    margin: 0 0 0.5rem 0;
    color: #2d3748;
    font-size: 1.5rem !important;
}

.tp-advertising-platform__step-content p {
    margin: 0;
    color: #718096;
    line-height: 1.5;
    font-size: 1.3rem !important;
}

/* Pricing */
.tp-advertising-platform__pricing {
    margin-bottom: 4rem;
}

.tp-advertising-platform__pricing-title {
    text-align: center;
    font-size: 1.5rem;
    color: #2d3748;
    margin-bottom: 2rem;
    font-weight: 600;
}

.tp-advertising-platform__pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.tp-advertising-platform__plan {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    text-align: center;
}

.tp-advertising-platform__plan--featured {
    border: 2px solid #4299e1;
    transform: scale(1.05);
}

.tp-advertising-platform__plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #4299e1;
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tp-advertising-platform__plan-header {
    margin-bottom: 1.5rem;
}

.tp-advertising-platform__plan-header h4 {
    margin: 0 0 1rem 0;
    color: #2d3748;
    font-size: 1.25rem;
}

.tp-advertising-platform__plan-price {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.tp-advertising-platform__plan-period {
    color: #718096;
    font-size: 0.875rem;
}

.tp-advertising-platform__plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.tp-advertising-platform__plan-features li {
    padding: 0.5rem 0;
    color: #4a5568;
    border-bottom: 1px solid #e2e8f0;
}

.tp-advertising-platform__plan-features li:last-child {
    border-bottom: none;
}

/* Audience */
.tp-advertising-platform__audience {
    margin-bottom: 4rem;
}

.tp-advertising-platform__audience-title {
    text-align: center;
    font-size: 1.5rem;
    color: #2d3748;
    margin-bottom: 2rem;
    font-weight: 600;
}

.tp-advertising-platform__audience-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.tp-advertising-platform__audience-stat {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.tp-advertising-platform__audience-number {
    font-size: 2rem;
    font-weight: 700;
    color: #4299e1;
    margin-bottom: 0.5rem;
}

.tp-advertising-platform__audience-label {
    color: #718096;
    font-size: 0.875rem;
}

/* CTA */
.tp-advertising-platform__cta {
    /* background: white; */
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
}

.tp-advertising-platform__cta-title {
    font-size: 1.8rem !important;
    color: #2d3748;
    margin-bottom: 1rem;
    font-weight: 600;
}

.tp-advertising-platform__cta-subtitle {
    color: #718096;
    margin-bottom: 2rem;
    font-size: 1.35rem !important;
}

.tp-advertising-platform__cta-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.tp-advertising-platform__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: var(--btn-border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.35rem !important;
}

.tp-advertising-platform__cta-btn--primary {
    background: var(--primary-color);
    color: #fff !important;
}

.tp-advertising-platform__cta-btn--primary:hover {
    background: var(--primary-color2);
    box-shadow: 0 8px 25px rgba(66, 153, 225, 0.3);
    color: #fff !important;
}

.tp-advertising-platform__cta-btn--secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.tp-advertising-platform__cta-btn--secondary:hover {
    background: var(--outline-bg-color);
}

.tp-advertising-platform__cta-note {
    color: #718096;
    font-size: 1.35rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ===== TABLET STYLES ===== */
@media (min-width: 768px) {
    .tp-advertising-platform {
        padding: 4rem 2rem;
    }

    .tp-advertising-platform__title {
        font-size: 2.5rem;
    }

    .tp-advertising-platform__steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tp-advertising-platform__placements-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tp-advertising-platform__pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tp-advertising-platform__audience-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .tp-advertising-platform__cta-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* ===== DESKTOP STYLES ===== */
@media (min-width: 1024px) {
    .tp-advertising-platform__title {
        font-size: 3rem;
    }

    .tp-advertising-platform__steps-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .tp-advertising-platform__placements-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ===== BASE STYLES ===== */

.adi-container {
    margin: 0 auto;
    padding: 0 1rem;
}

/* ===== HEADER ===== */
.adi-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: #fff;
    padding: 2rem 1rem;
    border-radius: 12px;
    margin-bottom: 10px;
}

.adi-header__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

@media (min-width: 768px) {
    .adi-header__container {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
    }
}

.adi-header__content {
    flex: 1;
}

.adi-header__title {
    font-size: 2rem !important;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.adi-header__subtitle {
    font-size: 1.250rem !important;
    opacity: 0.9;
    max-width: 500px;
    color: #fff !important;
}

.adi-header__stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

@media (min-width: 768px) {
    .adi-header__stats {
        justify-content: flex-end;
    }
}

.adi-header__stat {
    text-align: center;
}

.adi-header__stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.adi-header__stat-label {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* ===== MAIN CONTENT ===== */
.adi-main {
    padding: 3rem 0;
}

.adi-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 992px) {
    .adi-content {
        grid-template-columns: 2fr 1fr;
    }
}

/* ===== AD INFO SECTIONS ===== */
.adi-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adi-section {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
}

.adi-section__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.adi-section__icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.adi-section__title {
    font-size: 1.5rem;
    color: #2d3748;
    margin: 0;
}

.adi-section__content h3 {
    font-size: 1.4rem !important;
    margin: 1.5rem 0 1rem 0;
    color: #2d3748;
}

.adi-section__content p {
    margin-bottom: 1rem;
    color: #718096;
}

.adi-section__content ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.adi-section__content li {
    margin-bottom: 0.5rem;
    color: #718096;
}

/* Steps */
.adi-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.adi-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.adi-step__number {
    background: var(--primary-color);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.adi-step__content h4 {
    margin: 0 0 0.5rem 0;
    color: #2d3748;
    font-size: 1.4rem !important;
}

.adi-step__content p {
    margin: 0;
    color: #718096;
    font-size: 1.325rem !important;
}

/* Benefits Grid */
.adi-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .adi-benefits {
        grid-template-columns: repeat(2, 1fr);
    }
}

.adi-benefit {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.adi-benefit__icon {
    color: #48bb78;
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.adi-benefit__content h4 {
    margin: 0 0 0.5rem 0;
    color: #2d3748;
    font-size: 1.25rem;
}

.adi-benefit__content p {
    margin: 0;
    color: #718096;
    font-size: 1.3rem;
}

/* ===== SIDEBAR ===== */
.adi-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adi-sidebar__card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
}

.adi-sidebar__card-title {
    font-size: 1.6rem !important;
    margin-bottom: 1rem;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.adi-sidebar__card-title i {
    color: var(--primary-color);
}

.adi-quick-links {
    list-style: none;
}

.adi-quick-links li {
    margin-bottom: 0.75rem;
}

.adi-quick-links a {
    color: #718096;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.adi-quick-links a:hover {
    color: var(--primary-color);
}

.adi-contact {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: #fff;
    /* text-align: center; */
}

.adi-contact__title,
.adi-contact__title i {
    color: #fff;
}

.adi-contact__info {
    margin-bottom: 1.5rem;
    color: #fff;
}

.adi-contact__info p {
    margin-bottom: 0.5rem;
    color: #f8f8f8;
}

/* ===== CTA SECTION ===== */
.adi-cta {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: #fff;
    padding: 3rem 1rem;
    text-align: center;
    border-radius: 16px;
    margin: 10px 0;
}

.adi-cta__title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.adi-cta__subtitle {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}

.adi-cta__buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    max-width: 400px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .adi-cta__buttons {
        flex-direction: row;
    }
}

.adi-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.adi-cta__btn--primary {
    background: #fff;
    color: var(--primary-color);
}

.adi-cta__btn--primary:hover {
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.adi-cta__btn--secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.adi-cta__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/*  */
.adpo-container {
    margin: 0 auto;
    padding: 0;
}

/* ===== HEADER ===== */
.adpo-policies-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: #fff !important;
    padding: 3rem 1rem;
    text-align: center;
    border-radius: 10px 10px 0 0 !important;
}

.adpo-policies-header__title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #fff !important;
}

.adpo-policies-header__subtitle {
    font-size: 1.125rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
    color: #fff !important;
}

/* ===== NAVIGATION ===== */
.adpo-policies-nav {
    background: #fff;
    padding: 1rem 0;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 5px;
}

.adpo-policies-nav__container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px !important;
}

.adpo-policies-nav__link {
    color: #2d3748;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.adpo-policies-nav__link:hover,
.adpo-policies-nav__link--active {
    background: var(--primary-color);
    color: #fff !important;
}

/* ===== MAIN CONTENT ===== */
.adpo-policies-main {
    padding: 3rem 0;
}

.adpo-policies-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 992px) {
    .adpo-policies-content {
        grid-template-columns: 1fr 300px;
    }
}

/* ===== POLICY SECTIONS ===== */
.adpo-policies-sections {
    display: flex;
    flex-direction: column;
    gap: 10px !important;
}

.adpo-policy-section {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
}

.adpo-policy-section__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.adpo-policy-section__icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.adpo-policy-section__title {
    font-size: 1.5rem;
    color:  #718096;
    margin: 0;
}

.adpo-policy-section__content h3 {
    font-size: 1.25rem;
    margin: 1.5rem 0 1rem 0;
    color:  #718096;
}

.adpo-policy-section__content p {
    margin-bottom: 1rem;
    color:  #718096;
}

.adpo-policy-section__content ul,
.adpo-policy-section__content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.adpo-policy-section__content li {
    margin-bottom: 0.5rem;
    color: #718096;
}

/* Policy Cards */
.adpo-policy-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .adpo-policy-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.adpo-policy-card {
    background: #f7fafc;
    border-left: 4px solid #f56565;
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
}

.adpo-policy-card--warning {
    border-left-color: #ecc94b;
}

.adpo-policy-card--info {
    border-left-color: var(--primary-color);
}

.adpo-policy-card__title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2d3748;
}

.adpo-policy-card__content {
    color: #718096;
    font-size: 1.45rem !important;
}

/* Policy Table */
.adpo-policy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.875rem;
}

.adpo-policy-table th {
    font-size: 1.45rem !important;
}

.adpo-policy-table th,
.adpo-policy-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    font-size: 1.3rem;
}

.adpo-policy-table th {
    background: #f7fafc;
    font-weight: 600;
    color: #2d3748;
}

.adpo-policy-table tr:hover {
    background: #f7fafc;
}

.adpo-policy-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 1.25rem !important;
    font-weight: 600;
}

.adpo-policy-status--prohibited {
    background: #fed7d7;
    color: #c53030;
}

.adpo-policy-status--restricted {
    background: #feebc8;
    color: #dd6b20;
}

.adpo-policy-status--allowed {
    background: #c6f6d5;
    color: #276749;
}

/* Warning Box */
.adpo-policy-warning {
    background: #fff5f5;
    border-left: 4px solid #f56565;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
}

.adpo-policy-warning__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #c53030;
    font-weight: 600;
}

.adpo-policy-warning__content {
    color: #718096;
}

/* Info Box */
.adpo-policy-info {
    background: #ebf8ff;
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
}

.adpo-policy-info__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
    font-weight: 600;
}

.adpo-policy-info__content {
    color: #718096;
}

/* ===== SIDEBAR ===== */
.adpo-policies-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px !important;
}

.adpo-policies-sidebar__card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
}

.adpo-policies-sidebar__card-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.adpo-policies-quick-links {
    list-style: none;
}

.adpo-policies-quick-links li {
    margin-bottom: 0.75rem;
}

.adpo-policies-quick-links a {
    color: #718096;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
    font-size: 1.4rem !important;
}

.adpo-policies-quick-links a:hover {
    color: var(--primary-color);
}

.adpo-policies-contact {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: #fff;
    text-align: center;
}

.adpo-policies-contact__title {
    color: #fff !important;
}

.adpo-policies-contact__info {
    margin-bottom: 1.5rem;
    color: #fff !important;
}

.adpo-policies-contact__info p {
    margin-bottom: 0.5rem;
    color: #fff !important;
}

.adpo-policies-contact__btn {
    display: inline-block;
    background: #fff;
    color: var(--primary-color);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.adpo-policies-contact__btn:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ===== CTA SECTION ===== */
.adpo-policies-cta {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: #fff !important;
    padding: 3rem 1rem;
    text-align: center;
    border-radius: 16px;
    margin: 3rem 0;
}

.adpo-policies-cta__title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fff !important;
}

.adpo-policies-cta__subtitle {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #fff !important;
}

.adpo-policies-cta__buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    max-width: 400px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .adpo-policies-cta__buttons {
        flex-direction: row;
    }
}

.adpo-policies-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.adpo-policies-cta__btn--primary {
    background: #fff;
    color: var(--primary-color);
}

.adpo-policies-cta__btn--primary:hover {
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.adpo-policies-cta__btn--secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.adpo-policies-cta__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/*  */
/* ===== BASE STYLES ===== */
.pmt-container {
    margin: 0 auto;
    width: 100%;
}

/* ===== PAYMENT CARD ===== */
.pmt-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .pmt-card {
        grid-template-columns: 1fr 1fr;
        min-height: 600px;
    }
}

/* ===== PAYMENT SIDEBAR ===== */
.pmt-sidebar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
     color: #F5F5F5 !important;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pmt-sidebar__header {
    text-align: center;
    margin-bottom: 2rem;
}

.pmt-sidebar__logo {
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pmt-sidebar__title {
    font-size: 1.7rem;
    margin-bottom: 0.2rem !important;
    color: #fff !important;
}

.pmt-sidebar__subtitle {
    opacity: 0.9;
    font-size: 1.25rem !important;
    color: #f8f8f8 !important;
}

.pmt-order-summary {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

.pmt-order-summary__title {
    font-size: 1.35rem;
    /* margin-bottom: 1rem; */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pmt-order-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pmt-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.pmt-order-item:last-child {
    border-bottom: none;
}

.pmt-order-item__label {
    opacity: 0.9;
}

.pmt-order-item__value {
    font-weight: 600;
    font-size: 14px;
}

 .pmt-order-total {
    color: #fff;
 }

 .pmt-order-total .total-amount {
    font-size: 18px;
 }

.pmt-order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 1.6rem !important;
    font-weight: 700;
}

.pmt-features {
    list-style: none;
}

.pmt-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.165rem;
    opacity: 0.9;
}

.pmt-features i {
    color: #48bb78;
}

/* ===== PAYMENT MAIN CONTENT ===== */
.pmt-main {
    padding: 2rem;
}

.pmt-main__header {
    text-align: center;
    margin-bottom: 2rem;
}

.pmt-main__title {
    font-size: 1.75rem;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.pmt-main__subtitle {
    color: #718096;
}

/* ===== PAYMENT METHODS ===== */
.pmt-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.pmt-method {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.pmt-method:hover {
    border-color: var(--primary-color);
}

.pmt-method--selected {
    border-color: var(--primary-color);
    background: #ebf8ff;
}

.pmt-method__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pmt-method__icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.pmt-method__icon--mpesa {
    background: #00A650;
}

.pmt-method__icon--paypal {
    background: #0070BA;
}

.pmt-method__info {
    flex: 1;
}

.pmt-method__name {
    font-size: 1.4rem !important;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.pmt-method__description {
    color: #718096;
    font-size: 1.2rem;
    line-height: 1.8rem !important;
}

.pmt-method__radio {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmt-method--selected .pmt-method__radio {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.pmt-method--selected .pmt-method__radio::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

/* ===== PAYMENT FORMS ===== */
.pmt-form {
    display: none;
}

.pmt-form--active {
    display: block;
    animation: pmt-fadeIn 0.5s ease;
}

@keyframes pmt-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pmt-form__title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pmt-form-group {
    margin-bottom: 1.5rem;
}

.pmt-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #2d3748;
    font-size: 1.3rem;
}

.pmt-form-input {
    width: 100%;
    padding: 0.75rem 1rem !important;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1.5rem !important;
    transition: all 0.3s ease;
}

.pmt-form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.pmt-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pmt-form-hint {
    font-size: 1.125rem;
    color: #718096;
    margin-top: 0.25rem;
}

/* ===== PAYMENT ACTIONS ===== */
.pmt-actions {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pmt-btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
}

.pmt-btn--primary {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: #fff !important;
}

.pmt-btn--primary:hover {
    background: var(--primary-color2);
    border: 2px solid var(--primary-color2);
    box-shadow: 0 8px 25px rgba(66, 153, 225, 0.3);
    color: #fff !important;
}

.pmt-btn--secondary {
    background: transparent;
    color: var(--text-gray-color);
    border: 2px solid #ccc;
}

.pmt-btn--secondary:hover {
    background: #f8f8f8;
    border: 2px solid #ccc;
    color: var(--text-gray-color) !important;
}

.pmt-btn--mpesa {
    background: #00A650;
    border: 2px solid #00A650;
    color: #fff;
}

.pmt-btn--mpesa:hover {
    background: #008C42;
    box-shadow: 0 8px 25px rgba(0, 166, 80, 0.3);
}

.pmt-btn--paypal {
    background: #0070BA;
    color: #fff;
}

.pmt-btn--paypal:hover {
    background: #005EA6;
    box-shadow: 0 8px 25px rgba(0, 112, 186, 0.3);
}

.pmt-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* ===== SECURITY BADGES ===== */
.pmt-security {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.pmt-security__title {
    font-size: 1.125rem;
    color: #718096;
    margin-bottom: 1rem;
}

.pmt-security__badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pmt-security__badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #718096;
    font-size: 1rem;
}

/* ===== LOADING STATES ===== */
.pmt-loading {
    display: none;
    text-align: center;
    padding: 2rem;
}

.pmt-loading--active {
    display: block;
}

.pmt-loading__spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: pmt-spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes pmt-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pmt-loading__text {
    color: #718096;
}

/* ===== SUCCESS MESSAGE ===== */
.pmt-success {
    display: none;
    text-align: center;
    padding: 2rem;
}

.pmt-success--active {
    display: block;
    animation: pmt-fadeIn 0.5s ease;
}

.pmt-success__icon {
    width: 80px;
    height: 80px;
    background: #48bb78;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}

.pmt-success__title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #2d3748;
}

.pmt-success__message {
    color: #718096;
    margin-bottom: 2rem;
}
/*  */

/*  */
/* Plans Container Styles */
.plans-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Plan Card Base Styles */
.plan-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid #e2e8f0;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: fit-content;
    cursor: pointer;
    overflow: hidden;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-color: #cbd5e0;
}

/* Radio Button Styles */
.plan-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Selected State */
.plan-card:has(.plan-radio:checked) {
    border-color: #3b82f6;
    border-width: 3px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.2);
}

.plan-card.featured:has(.plan-radio:checked) {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.3);
}

.plan-card.premium:has(.plan-radio:checked) {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #ffffff 0%, #fffaf0 100%);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.2);
}

/* Selection Indicator */
.selection-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #10b981;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    transform: translateY(-10px);
    opacity: 0;
    transition: all 0.3s ease;
}

.plan-card:has(.plan-radio:checked) .selection-indicator {
    transform: translateY(0);
    opacity: 1;
}

/* Featured Plan Styles */
.plan-card.featured {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
    transform: scale(1.05);
}

.plan-card.featured:hover {
    transform: scale(1.05) translateY(-5px);
}

/* Premium Plan Styles */
.plan-card.premium {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #ffffff 0%, #fffbf0 100%);
}

/* Popular Badge */
.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #3b82f6;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Plan Header Styles */
.plan-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.plan-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

.plan-card.featured .plan-header h3 {
    color: #3b82f6;
}

.plan-card.premium .plan-header h3 {
    color: #f59e0b;
}

/* Price Styles */
.price {
    font-size: 3rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.price span {
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
}

.plan-card.featured .price {
    color: #3b82f6;
}

.plan-card.premium .price {
    color: #f59e0b;
}

/* Plan Description */
.plan-description {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
}

/* Plan Features */
.plan-features {
    flex-grow: 1;
    margin-bottom: 2rem;
}

.plan-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-features li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    color: #4b5563;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

.plan-features li:last-child {
    border-bottom: none;
}

/* CTA Container */
.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 2rem;
    text-align: center;
}

/* CTA Button Styles */
.cta-button {
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-button:not(:disabled) {
    /* background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%); */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: white;
}

.cta-button:not(:disabled):hover {
    background: linear-gradient(135deg, var(--primary-color2) 0%, var(--primary-color) 100%);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.cta-button:disabled {
    background: #9ca3af;
    color: #d1d5db;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cta-note {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .plans-container {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .plan-card.featured {
        transform: scale(1);
    }

    .plan-card.featured:hover {
        transform: translateY(-5px);
    }
}

@media (max-width: 768px) {
    .plans-container {
        padding: 1rem;
        gap: 1.5rem;
    }

    .plan-card {
        padding: 1.5rem;
    }

    .price {
        font-size: 2.5rem;
    }

    .plan-header h3 {
        font-size: 1.25rem;
    }

    .cta-button {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .plans-container {
        grid-template-columns: 1fr;
    }

    .plan-card {
        padding: 1rem;
    }

    .price {
        font-size: 2rem;
    }

    .selection-indicator {
        position: relative;
        top: 0;
        right: 0;
        text-align: center;
        margin-top: 1rem;
    }
}

/* Animation for card entrance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.plan-card {
    animation: fadeInUp 0.6s ease-out;
}

.plan-card.featured {
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.plan-card.premium {
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

/* Focus states for accessibility */
.plan-card:focus-within {
    outline: 3px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

.cta-button:focus {
    outline: 3px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}


/*  */
/* Base Styles */
.adgd-container {
    margin: 0 auto;
    padding: 0;
}

/* Hero Section */
.adgd-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1575361204480-aadea25e6e68?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
    color: #fff !important;
    padding: 4rem 0;
    text-align: center;
    border-radius: 10px;
}

.adgd-hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #fff !important;
}

.adgd-hero p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 2rem;
    color: #f8f8f8 !important;
}

.adgd-cta-button {
    display: inline-block;
    background: var(--primary-color);
    color: #fff !important;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.3rem;
    transition: all 0.3s;
}

.adgd-cta-button:hover {
    background: var(--primary-color2);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    color: #fff !important;
}

/* Main Content */
.adgd-guide-section {
    background: white;
    border-radius: 10px;
    padding: 3rem;
    margin: 10px 0 !important;
}

.adgd-section-title {
    color: #1e3c72;
    font-size: 2rem;
    margin-bottom: 0.2rem;
    padding-bottom: 0.5rem;
    display: inline-block;
}

/* Audience Stats */
.adgd-audience-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.adgd-stat-card {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.05); */
    transition: transform 0.3s;
}

.adgd-stat-card:hover {
    transform: translateY(-5px);
}

.adgd-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color2);
    margin-bottom: 0.5rem;
}

.adgd-stat-label {
    color: #666;
    font-size: 1.3rem;
}

/* Ideal Advertisers */
.adgd-ideal-advertisers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.adgd-advertiser-category {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-left: 4px solid var(--primary-color);
}

.adgd-advertiser-category h3 {
    color: var(--primary-color2);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.adgd-category-icon {
    font-size: 1.5rem;
}

.adgd-advertiser-list {
    list-style: none;
}

.adgd-advertiser-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 8px;
}

.adgd-advertiser-list li:last-child {
    border-bottom: none;
}

.adgd-list-icon {
    color: #10b981;
    font-weight: bold;
}

/* Targeting Options */
.adgd-targeting-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.adgd-targeting-category {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.adgd-targeting-category h4 {
    color: var(--primary-color2);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.adgd-targeting-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.adgd-chip {
    background: #e9f2ff;
    color: #1e3c72;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 1.25rem !important;
    font-weight: 500;
}

/* Content Policies */
.adgd-policies {
    background: #fff8f0;
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem 0;
    border-left: 4px solid var(--primary-color);
}

.adgd-policies h3{
  color: var(--primary-color2);
}

.adgd-policy-list {
    list-style: none;
    margin: 1.5rem 0;
}

.adgd-policy-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #ffe8d6;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.adgd-policy-list li:last-child {
    border-bottom: none;
}

.adgd-policy-icon {
    color: #ef4444;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Best Practices */
.adgd-best-practices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.adgd-practice-card {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.05); */
    border-top: 4px solid var(--primary-color);
}

.adgd-practice-card h3 {
    color: var(--primary-color2);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    font-size: 16px;
    gap: 10px;
}

.adgd-practice-icon {
    font-size: 1.5rem;
}

/* FAQ Section */
.adgd-faq-section {
    margin: 3rem 0;
}

.adgd-faq-item {
    background: white;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.adgd-faq-question {
    padding: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.adgd-faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s, padding 0.3s;
}

.adgd-faq-item.adgd-active .adgd-faq-answer {
    padding: 1.5rem;
    max-height: 500px;
}

.adgd-faq-toggle {
    font-size: 1.2rem;
    transition: transform 0.3s;
}

.adgd-faq-item.adgd-active .adgd-faq-toggle {
    transform: rotate(45deg);
}

/* Responsive Design */
@media (max-width: 768px) {
    .adgd-header-content {
        flex-direction: column;
        gap: 1rem;
    }

    .adgd-nav ul {
        gap: 1rem;
    }

    .adgd-hero h2 {
        font-size: 2.2rem;
    }

    .adgd-guide-section {
        padding: 2rem 1.5rem;
    }

    .adgd-preview-content {
        flex-direction: column;
    }

    .adgd-preview-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
}

/*  */
/* ===== FAQ SECTION ===== */
.abt-faq-section {
    margin-top: 3rem;
    padding: 2rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Header */
.abt-faq-header {
    text-align: center;
    margin-bottom: 2rem;
}

.abt-faq-header .abt-faq-icon {
    font-size: 3rem;
    color: #d4af37;
    margin-bottom: 0.3rem;
}

.abt-faq-header h3 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.3rem 0;
}

.abt-faq-header p {
    color: #888;
    font-size: 1.4rem;
    margin: 0;
}

/* FAQ Grid */
.abt-faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Individual FAQ Item */
.abt-faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.abt-faq-item:hover {
    border-color: rgba(212, 175, 55, 0.2);
}

/* Question Button */
.abt-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.2rem;
    background: transparent;
    border: none;
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
    font-family: inherit;
}

.abt-faq-question:hover {
    color: #1e1e1e;
}

.abt-faq-question span {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.abt-faq-question span i {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
}

/* Arrow icon */
.abt-faq-arrow {
    font-size: 0.8rem;
    color: #666;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.abt-faq-item.active .abt-faq-arrow {
    transform: rotate(180deg);
    color: #d4af37;
}

/* Answer (hidden by default) */
.abt-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 1.2rem;
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.7;
}

.abt-faq-item.active .abt-faq-answer {
    max-height: 400px;
    padding: 0 1.2rem 1.2rem 1.2rem;
}

.abt-faq-answer p {
    margin: 0;
}

.abt-faq-answer a {
    color: #d4af37;
    text-decoration: none;
    font-weight: 600;
}

.abt-faq-answer a:hover {
    text-decoration: underline;
}

/* FAQ Footer */
.abt-faq-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.abt-faq-footer p {
    color: #888;
    font-size: 2.25rem;
    margin: 0 0 0.8rem 0;
}

.abt-faq-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid #d4af37;
    color: #d4af37;
    padding: 0.5rem 1.8rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.35rem;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.abt-faq-cta:hover {
    background: #d4af37;
    color: #fff !important;
}

.abt-faq-footer span {
    display: block;
    font-size: 1.175rem;
    color: #555;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .abt-faq-section {
        padding: 1.5rem 0.8rem;
    }

    .abt-faq-header h3 {
        font-size: 1.2rem;
    }

    .abt-faq-question {
        font-size: 0.85rem;
        padding: 0.8rem 1rem;
    }

    .abt-faq-answer {
        font-size: 0.82rem;
    }

    .abt-faq-answer p {
        font-size: 0.82rem;
    }

    .abt-faq-item.active .abt-faq-answer {
        padding: 0 1rem 1rem 1rem;
    }

    .abt-faq-cta {
        font-size: 0.82rem;
        padding: 0.4rem 1.4rem;
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}


/*  */
.adcr-ad-creation-container {
    margin: 0 auto;
    padding: 0;
    /* border: var(--container-border); */
}

.adcr-creation-header {
    text-align: center;
    margin-bottom: 0;
    padding: 20px;
    background: #fff;
    /* color: #fff !important; */
    border-radius: 12px 12px 0 0;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

.adcr-creation-header h2 {
    font-weight: 700;
    margin-bottom: 7px;
    /* color: #fff !important; */
}

.adcr-creation-header p {
    opacity: 0.9;
    font-size: 1.35rem !important;
    /* color: #fff !important; */
}

.adcr-form-section {
    background: white;
    /* border: var(--container-border); */
    border-radius: 0 0 12px 12px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    padding: 30px;
    margin-bottom: 30px;
}

.adcr-form-step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
}

.adcr-form-step-indicator::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #e9ecef;
    z-index: 1;
}

.adcr-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.adcr-step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 8px;
    border: 4px solid white;
    transition: all 0.3s ease;
}

.adcr-step.active .adcr-step-circle {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 0 0 4px rgba(0, 168, 107, 0.2);
}

.adcr-step.completed .adcr-step-circle {
    background-color: #28a745;
    color: white;
}

.adcr-step-label {
    font-size: 1.4rem;
    font-weight: 600;
    color: #6c757d;
    text-align: center;
}

.adcr-step.active .adcr-step-label {
    color: var(--secondary-color2);
}

.adcr-step.completed .adcr-step-label {
    color: #28a745;
}

.adcr-step-content {
    display: none;
}

.adcr-step-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.adcr-form-group {
    margin-bottom: 1.5rem;
}

.adcr-form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #495057;
    display: flex;
    align-items: center;
}

.adcr-form-label i {
    margin-right: 8px;
    color: var(--secondary-color2);
    width: 20px;
}

.adcr-required-star {
    color: #dc3545;
    margin-left: 4px;
}

.adcr-form-control {
    border-radius: 8px;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    width:100%;
    transition: all 0.3s;
}

.adcr-form-control:focus {
    border-color: var(--primary-color);
}

.adcr-form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.adcr-btn {
    padding: 10px 24px;
    border-radius: var(--btn-border-radius);
    font-weight: 600;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.adcr-btn i {
    margin-right: 8px;
}

.adcr-btn-back {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
}

.adcr-btn-back:hover {
    background-color: #e9ecef;
    color: #495057 !important;
}

.adcr-btn-next, .adcr-btn-primary {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff !important;
}

.adcr-btn-next:hover, .adcr-btn-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff !important;
    opacity: 0.9;
}

.adcr-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 576px) {
    .adcr-form-actions {
        display: block;
    }

    .adcr-btn {
      width: 100% !important;
      margin-bottom: 7px;
    }
}

.adcr-banner-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 20px;
}

.adcr-banner-upload-area:hover,
.adcr-banner-upload-area.dragover {
    border-color: var(--secondary-color2);
    background-color: #f8f9ff;
}

.adcr-upload-icon {
    font-size: 48px;
    color: #6c757d;
    margin-bottom: 15px;
}

.adcr-banner-upload-area h5 {
    color: #495057;
    margin-bottom: 10px;
}

.adcr-banner-specs {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 15px;
}

.adcr-banner-preview {
    display: none;
    text-align: center;
    margin-top: 20px;
}

.adcr-banner-preview h6 {
    margin-bottom: 15px;
    color: #495057;
    font-weight: 600;
}

/*  */
/* Compact Plan Cards CSS */
.adcr-plans-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.adcr-plan-card {
    background-color: white;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 20px 15px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
}

.adcr-plan-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #d4af37;
}

/* Featured/Popular Plan */
.adcr-plan-card.featured {
    border: 2px solid #d4af37;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.15);
}

.adcr-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #d4af37;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 4px 15px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Premium Plan Styling */
.adcr-plan-card.premium {
    background-color: linear-gradient(135deg, #fff 0%, #fcf8f0 100%);
}

/* Plan Header */
.adcr-plan-header {
    text-align: center;
    margin-bottom: 15px;
}

.adcr-plan-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a2639;
    margin: 0 0 10px 0;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.adcr-price {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1a2639;
    line-height: 1.2;
    margin-bottom: 5px;
}

.adcr-price span {
    font-size: 1.4rem;
    font-weight: 400;
    color: #6c757d;
    margin-left: 4px;
}

.adcr-plan-description {
    font-size: 1.3rem;
    color: #6c757d;
    margin: 0;
}

/* Plan Features */
.adcr-plan-features {
    flex: 1;
    margin-bottom: 15px;
}

.adcr-plan-features p {
    font-size: 1.3rem;
    color: #495057;
    line-height: 1.5;
    margin: 0;
}

.adcr-plan-features b {
    color: #d4af37;
}

/* Buy Button */
.adcr-btn {
    padding: 10px 16px;
    border-radius: 30px;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.adcr-btn-primary {
    background: linear-gradient(135deg, #d4af37 0%, #b18819 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2);
}

.adcr-btn-primary:hover {
    background: linear-gradient(135deg, #b18819 0%, #8e6913 100%);
    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.3);
}

.adcr-btn-back {
    background: white;
    border: 1px solid #dee2e6;
    color: #495057;
    padding: 10px 25px;
}

.adcr-btn-back:hover {
    border-color: #d4af37;
    color: #d4af37;
    background: #fcf8f0;
}

/* Form Actions */
.adcr-form-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}

/* Responsive */
@media (max-width: 992px) {
    .adcr-plans-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .adcr-plans-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .adcr-plan-card {
        min-height: auto;
    }

    .adcr-popular-badge {
        position: relative;
        top: 0;
        margin-bottom: 15px;
        display: inline-block;
        width: auto;
    }
}

@media (max-width: 480px) {
    .adcr-price {
        font-size: 2.4rem;
    }

    .adcr-plan-header h3 {
        font-size: 1.6rem;
    }
}
/*  */


/* Review Step Styles */
.adcr-ad-preview-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-bottom: 24px;
}

.adsc-preview-header {
  font-size: 1.35rem !important;
}

.adcr-preview-section {
    margin-bottom: 32px;
}

.adcr-preview-section:last-child {
    margin-bottom: 0;
}

.adcr-preview-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaeaea;
}

.adcr-preview-header span {
    font-weight: 600;
    color: #333;
    font-size: 1.6rem;
}

.adcr-ad-preview {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.adcr-ad-preview:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.adcr-desktop-preview {
    max-width: 728px;
}

.adcr-mobile-preview {
    max-width: 320px;
    margin: 0 auto;
}

.adcr-ad-banner {
    height: 120px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.adcr-banner-placeholder {
    text-align: center;
    color: #6c757d;
}

.adcr-banner-placeholder i {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

.adcr-banner-placeholder p {
    margin: 0;
    font-size: 14px;
}

.adcr-ad-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adcr-ad-content {
    padding: 16px;
}

.adcr-ad-content h3 {
    font-size: 1.6rem !important;
    font-weight: 600;
    margin-bottom: 8px;
    color: #212529;
    line-height: 1.3;
}

.adcr-ad-content p {
    font-size: 1.3rem;
    color: #495057;
    margin-bottom: 16px;
    line-height: 1.5;
}

.adcr-ad-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.adcr-btn-action {
    background: var(--primary-color);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: var(--btn-border-radius);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.4rem;
    transition: background-color 0.2s ease;
}

.adcr-btn-action:hover {
    background: var(--primary-color2);
    color: #fff !important;
    text-decoration: none;
}

.adcr-ad-badge {
    background: #f8f9fa;
    color: #6c757d;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: 500;
}

.adcr-ad-details-summary {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.adcr-ad-details-summary h5 {
    color: #333;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaeaea;
}

.adcr-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #f5f5f5;
}

.adcr-summary-item:last-child {
    border-bottom: none;
}

.adcr-summary-label {
    font-weight: 500;
    color: #6c757d;
    font-size: 1.3rem !important;
}

.adcr-summary-value {
    font-weight: 500;
    color: #212529;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* Alert Styles */
.adcr-alert {
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.adcr-alert i {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .adcr-ad-creation-container {
        padding: 0;
    }

    .adcr-ad-details-summary {
        margin-top: 24px;
        position: static;
    }

    .adcr-desktop-preview {
        max-width: 100%;
    }

    .adcr-form-step-indicator {
        flex-direction: column;
        align-items: flex-start;
    }

    .adcr-form-step-indicator::before {
        display: none;
    }

    .adcr-step {
        flex-direction: row;
        margin-bottom: 15px;
        width: 100%;
    }

    .adcr-step-circle {
        margin-bottom: 0;
        margin-right: 15px;
    }
}

@media (max-width: 576px) {
    .adcr-ad-creation-container {
        padding: 0;
    }

    .adcr-form-section {
        padding: 20px 15px;
    }

    .adcr-ad-preview-container,
    .adcr-ad-details-summary {
        padding: 16px;
    }

    .adcr-ad-content {
        padding: 12px;
    }

    .adcr-ad-content h3 {
        font-size: 1.6rem;
    }

    .adcr-ad-content p {
        font-size: 1.3rem;
    }

    .adcr-summary-item {
        flex-direction: column;
    }

    .adcr-summary-value {
        max-width: 100%;
        text-align: left;
        margin-top: 4px;
    }

    .adcr-plans-container {
        grid-template-columns: 1fr;
    }

    .adcr-ad-footer{
      display: block;
    }

    .adcr-btn,
    span.adcr-btn,
    .adcr-btn-action {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      flex-shrink: 0 !important;
      padding: 8px 16px !important;
      font-size: 1.4rem !important;
    }

    .adcr-btn-action {
      width: 100% !important;
      margin-bottom: 3px !important;
      padding: 8px 16px !important;
    }
}


/* ========== BASE AD CONTAINER ========== */

/* Base styles for ad placeholder */
.ad-placeholder {
    margin: 24px 0;
    position: relative;
}

/* Specific placement types */
.ad-placeholder.ad-sidebar {
    width: 100%;
    margin-bottom: 20px;
}

.ad-placeholder.ad-incontent {
    width: 100%;
    margin: 1px 0;
    padding: 0;
    background: #fff;
    border-radius: 16px !important;
}

.ad-placeholder.ad-header {
    width: 100%;
    margin-bottom: 15px;
}

.ad-placeholder.ad-footer {
    width: 100%;
    margin-top: 20px;
}

/* Ad container styles */
.ad-container {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    /* border: 1px solid #e8e8e8; */
    position: relative;
    min-height: 180px;
}

/* Device-specific containers */
.ad-container.mobile {
    min-height: 100px;
}

.ad-container.desktop {
    min-height: 120px;
}

/* Loading state */
.ad-container .ad-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    color: #6c757d;
    text-align: center;
    min-height: 120px;
}

.ad-loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: ad-spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes ad-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ad content styles */
.ad-content {
    padding: 16px;
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

.ad-layout-horizontal {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
}

.ad-layout-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.ad-image-container {
    flex-shrink: 0;
}

.ad-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.ad-layout-horizontal .ad-image {
    max-width: 120px;
}

.ad-layout-vertical .ad-image {
    max-width: 100%;
}

.ad-text-content {
    flex: 1;
    min-width: 0; /* Prevent flex item overflow */
}

.ad-title {
    font-size: 1.4rem !important;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #1a1a1a;
    line-height: 1.3;
}

.ad-description {
    font-size: 1.2rem !important;
    color: #666;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.ad-action-button {
    display: inline-block;
    padding: 8px 16px;
    background: #007bff !important;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.2rem !important;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ad-action-button:hover {
    background: #0056b3 !important;
    color: white !important;
    text-decoration: none;
}

.ad-close {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.ad-close:hover {
    color: #666;
}

/* Alternative content */
.ad-alternative {
    text-align: center;
    padding: 30px 20px;
    color: #6c757d;
    /* min-height: 120px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ad-alternative h4 {
    margin: 0 0 10px 0;
    color: #495057;
    font-size: 1.4rem;
}

.ad-alternative p {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
}

/* Fallback content */
.ad-fallback {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-size: 1.2rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .ad-placeholder.ad-incontent {
        margin: 15px 0;
        padding: 12px;
    }

    .ad-layout-horizontal {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .ad-layout-horizontal .ad-image {
        max-width: 100px;
    }

    .ad-container.square {
        max-width: 100%;
        min-height: 250px;
    }

    .ad-container.rectangle {
        min-height: 200px;
    }

    .ad-title {
        font-size: 1.3rem;
    }

    .ad-description {
        font-size: 1.1rem;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ad-container {
        transition: none;
    }

    .ad-loading-spinner {
        animation: none;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #007bff;
    }
}

/*  */
.st-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #666;
}

.st-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.st-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.st-error-icon {
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

.st-error-text {
    color: #dc3545;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*  */
.prediction-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.mt-match-item {
    background: white;
    padding: 5px;
    margin-bottom: 0;
    /* border-bottom: 1px solid #e9ecef; */
    transition: all 0.3s ease;
}

.mt-match-number {
    font-weight: 500;
    color: #696969;
    margin-bottom: 10px;
    font-size: 1.2rem;
    padding: 8px 12px;
    border-radius: 6px;
    min-width: 50px;
    text-align: center;
    margin-right: 20px;
}

.mt-match-teams {
    margin-bottom: 8px;
}

.mt-team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mt-date-time {
  line-height: 1.6rem !important;
}

.mt-team-name {
    font-weight: 600;
    /* flex: 1; */
}

.mt-vs-text {
    color: #6c757d;
    margin: 0 15px;
}

.mt-match-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #6c757d;
}

.mt-prediction-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 1.2rem !important;
    text-align: center;
    min-width: 40px;
}

.prediction-1 {
    background: #d4edda;
    color: #155724;
}

.prediction-X {
    background: #fff3cd;
    color: #856404;
}

.prediction-2 {
    background: #f8d7da;
    color: #721c24;
}

.mt-empty-state {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

.mt-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}


/*  */
.st-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #666;
}

.st-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.st-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.st-error-icon {
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

.st-error-text {
    color: #dc3545;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/*  */
 .pr-loading-dots {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
    }

    .pr-loading-dots:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--pr-primary-color);
        animation: pr-dot-pulse 1.5s ease-in-out infinite;
    }

    @keyframes pr-dot-pulse {
        0%, 100% {
            opacity: 0.3;
            transform: translate(-50%, -50%) scale(0.8);
        }
        50% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1.2);
        }
    }

    .pr-stat-value {
        transition: opacity 0.3s ease;
    }

    .pr-performance-bar {
        margin-bottom: 15px;
    }

    .pr-performance-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 1.4rem;
    }

    .pr-performance-track {
        height: 10px;
        background-color: #e0e0e0;
        border-radius: 5px;
        overflow: hidden;
    }

    .pr-performance-value {
        height: 100%;
        border-radius: 5px;
        transition: width 1s ease-in-out;
    }

    .pr-recent-activity {
        background-color: white;
        border-radius: var(--pr-border-radius);
        padding: 20px;
        margin-top: 20px;
        box-shadow: var(--pr-box-shadow);
    }

    .pr-activity-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    .pr-activity-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        background-color: var(--pr-light-color);
        border-radius: var(--pr-border-radius);
        font-size: 1.4rem;
    }

    .pr-activity-item i {
        color: var(--pr-primary-color);
        width: 16px;
        text-align: center;
    }

    .pr-error-state {
        text-align: center;
        padding: 30px 20px;
    }

    .pr-error-state .pr-error-icon {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .pr-error-state h4 {
        color: var(--pr-danger-color);
        margin-bottom: 8px;
    }

    .pr-error-state p {
        color: var(--pr-gray-color);
        margin-bottom: 16px;
        font-size: 1.4rem;
    }

/* ========== SETTINGS ========== */

.st-container {
    margin: 0 auto !important;
}

.st-header {
    margin-bottom: 5px;
    padding: 15px 0;
}

.st-header h1 {
    font-size: 2.5rem !important;
    margin-bottom: 1px !important;
    line-height: 3.5rem;
}

.st-header p {
    font-size: 1.3rem !important;
    opacity: 0.9;
}

.st-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 5px;
    margin-bottom: 10px;
}

.st-settings-card {
    background-color: var(--container-bg) !important;
    border: var(--container-border) !important;
    border-radius: var(--container-border-radius) !important;
    padding: 25px;
    margin-bottom: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.st-settings-card:hover {
    box-shadow: var(--container-box-shadow);
}

.st-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.st-card-title {
    font-size: 1.5rem !important;
    font-weight: 600;
    color: #212121;
}

.st-settings-list {
    list-style-type: none;
}

.st-settings-list li {
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.st-settings-list li:last-child {
    border-bottom: none;
}

.st-settings-list i {
    color: var(--primary-color);
    margin-right: 6px !important;
    width: 20px;
    text-align: center;
    font-size: 1.3rem !important;
}

.st-setting-control {
    display: flex;
    align-items: center;
}

.st-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.st-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.st-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.st-toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .st-toggle-slider {
    background-color: var(--success-color);
}

input:checked + .st-toggle-slider:before {
    transform: translateX(26px);
}

.st-select {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    background-color: white;
    font-size: 1.4rem;
    min-width: 120px;
}

.st-input {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    background-color: white;
    font-size: 1.4rem;
    width: 80px;
}

.st-btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.st-btn-primary:hover {
    background-color: var(--primary-color2);
}

.st-btn-secondary:hover {
    background-color: #d0d0d0;
}

.st-toast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 16px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: 30px;
    font-size: 1.6rem;
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
}

.st-toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
}

.st-toast.success {
    background-color: var(--success-color);
}

.st-toast.error {
    background-color: var(--danger-color);
}

@media (max-width: 768px) {
    .st-settings-grid {
        grid-template-columns: 1fr;
    }

    .st-header h1 {
        font-size: 2rem;
    }

    .st-settings-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .st-setting-control {
        width: 100%;
        justify-content: flex-end;
    }
}

/*  */
/* Follow Notification Styles */
.follow-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideInRight 0.3s ease;
}

.follow-notification-success {
    background: #28a745;
}

.follow-notification-error {
    background: #dc3545;
}

.follow-notification-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


/*  */
/* Loading State */
.ch-loading-state {
    padding: 20px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
    display: none;
}

.ch-loading-spinner {
    color: var(--primary-color);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ch-loading-spinner .fa-spin {
    margin-right: 10px;
}

/* Error State */
.ch-error-message {
    padding: 15px 20px;
    background: #ff6b6b;
    color: white;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 4px solid #e74c3c;
    display: none;
}

/* Controls */
.ch-controls {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.ch-btn {
    background: var(--primary-color2);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.4rem;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ch-btn:hover {
    background: var(--primary-color);
}

.ch-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Chart Actions */
.ch-chart-actions {
    display: flex;
    gap: 8px;
}

.ch-chart-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.ch-chart-btn.active {
    background: var(--primary-color2);
    color: white;
    border-color: var(--primary-color2);
}

.ch-chart-btn:hover:not(.active) {
    background: var(--primary-color);
}

/* Chart Containers */
.ch-chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.ch-chart-card.ch-full-width .ch-chart-container {
    height: 400px;
}

/* Chart Loaders */
.ch-chart-loader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    color: #666;
    font-size: 1.4rem;
}

.ch-chart-loader span {
    margin-top: 10px;
}

/* Stat Loaders */
.ch-stat-loader {
    display: none;
    justify-content: center;
    align-items: center;
    height: 32px;
}

.ch-stat-value {
    display: block;
}

.ch-stat-info h3 {
    position: relative;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loader Spinner */
.ch-loader-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #4361ee;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.ch-chart-loader .ch-loader-spinner {
    width: 30px;
    height: 30px;
}

/* Pattern Analysis */
.ch-pattern-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start;
}

.ch-pattern-text p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.ch-pattern-highlight {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid var(--primary-color);
}

.ch-pattern-highlight h4 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 1.4rem;
}

.ch-pattern-highlight p {
    margin: 0;
    color: #666;
}

.ch-pattern-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ch-pattern-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.ch-pattern-stat-value {
    font-weight: bold;
    color: var(--primary-color);
}

/* Pattern Analysis Loaders */
.ch-pattern-text p,
.ch-pattern-highlight p,
.ch-pattern-stat-value {
    position: relative;
    min-height: 20px;
}

.ch-pattern-loader {
    display: inline-block;
    width: 100%;
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
    vertical-align: middle;
}

/* Specific styles for pattern stat loaders */
#ch-stat-outcome .ch-pattern-loader,
#ch-stat-least-outcome .ch-pattern-loader,
#ch-stat-popular-match .ch-pattern-loader,
#ch-stat-avg-predictions .ch-pattern-loader {
    width: 60px;
    height: 16px;
}

/* Ensure pattern text elements maintain height during loading */
#ch-pattern-summary,
#ch-pattern-noticeable,
#ch-pattern-insight {
    min-height: 20px;
    display: block;
}

/* Alternative pattern loader (spinner style) */
.ch-pattern-loader.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #4361ee;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    background: none;
}

.loading .ch-pattern-loader {
    display: inline-block !important;
}

/* Animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Disabled state for buttons */
.ch-jackpot-btn:disabled,
.ch-tab:disabled,
#ch-refresh-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ch-charts-grid {
        grid-template-columns: 1fr;
    }

    .ch-chart-card.ch-full-width {
        grid-column: 1;
    }

    .ch-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ch-pattern-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ch-controls {
        flex-direction: column;
    }

    .ch-chart-container {
        height: 250px;
    }

    .ch-chart-card.ch-full-width .ch-chart-container {
        height: 300px;
    }
}


/*  */
/* Emoji Popover Structure */
.popover-content.emoji-popover {
    display: none;
    position: absolute;
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    width: 300px;
    max-height: 380px;
    /* overflow: hidden; */
    z-index: 10000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    animation: popoverFadeIn 0.2s ease-out;
}

/* Main Header */
.emoji-popover-header {
    padding: 16px 20px 12px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    background: #fafbfc;
    user-select: none;
}

/* Content Area */
.emoji-popover-content {
    max-height: 320px;
    /* overflow-y: auto; */
    padding: 0 16px 16px;
}

/* Individual Category */
.emoji-category {
    margin: 16px 0;
}

.emoji-category:first-child {
    margin-top: 12px;
}

.emoji-category:last-child {
    margin-bottom: 8px;
}

/* Category Header */
.emoji-category-header {
    font-size: 1.2rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
}

/* Emoji Grid */
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

/* Individual Emoji Items */
.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
    user-select: none;
}

.emoji-item:hover {
    background: #f3f4f6;
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.emoji-item:active {
    transform: scale(1.1);
    background: #e5e7eb;
}

/* Scrollbar Styling */
.emoji-popover-content::-webkit-scrollbar {
    width: 6px;
}

.emoji-popover-content::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 3px;
}

.emoji-popover-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.emoji-popover-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Animation */
@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .popover-content.emoji-popover {
        width: 100%;
        max-height: 340px;
    }

    .emoji-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 3px;
    }

    .emoji-item {
        width: 32px;
        height: 32px;
        font-size: 1.8rem;
    }

    .emoji-popover-header {
        padding: 14px 16px 10px;
        font-size: 1.3rem;
    }

    .emoji-popover-content {
        padding: 0 12px 12px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .popover-content.emoji-popover {
        background: #374151;
        border-color: #4b5563;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .emoji-popover-header {
        background: #1f2937;
        color: #f9fafb;
        border-bottom-color: #4b5563;
    }

    .emoji-category-header {
        color: #d1d5db;
    }

    .emoji-item:hover {
        background: #4b5563;
    }

    .emoji-item:active {
        background: #6b7280;
    }

    .emoji-popover-content::-webkit-scrollbar-track {
        background: #374151;
    }

    .emoji-popover-content::-webkit-scrollbar-thumb {
        background: #6b7280;
    }

    .emoji-popover-content::-webkit-scrollbar-thumb:hover {
        background: #9ca3af;
    }
}

/* Focus States for Accessibility */
.emoji-item:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
    background: #eff6ff;
}

@media (prefers-color-scheme: dark) {
    .emoji-item:focus {
        background: #1e40af;
    }
}

/*  */
.tp-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
}

/* Full width pricing card */
.tp-pricing-card--fullwidth {
    width: 100%;
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.tp-pricing-card__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.tp-pricing-card__features {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    width: 100%;
}

.tp-pricing-card__feature {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    width: 100%;
}

.tp-pricing-card__icon {
    margin-right: 10px;
}

/* Full width selection panel */
.tp-selection--fullwidth {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 3px;
    box-sizing: border-box;
}

.tp-selection__content {
    width: 100%;
    /* display: flex; */
    flex-direction: column;
    /* align-items: center;
    text-align: center; */
    padding: 0 !important;
}

.tp-selection__label {
    display: flex;
    /* align-items: center;
    justify-content: center; */
    margin-bottom: 10px;
    width: 100% !important;
}

.tp-selection__icon {
    margin-right: 10px;
}

.tp-selection__dropdown {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background-color: white;
    font-size: 1.3rem !important;
    cursor: pointer;
}

.tp-selection__dropdown:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* CTA Button styles */
.tp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 15px 30px;
    background: green !important;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.8rem;
    transition: all 0.3s ease;
    width: auto;
    min-width: 200px;
}

.tp-cta:hover {
   background: #228B22 !important;
}


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

.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 380px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
    max-height: 500px;
    flex-direction: column;
}

.notification-header {
    padding: 16px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
    border-radius: 8px 8px 0 0;
}

.notification-header h3 {
    margin: 0;
    font-size: 1.5rem !important;
    font-weight: 600;
    color: #374151;
}

.mark-all-read {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    font-size: 1.2rem !important;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.mark-all-read:hover {
    background-color: #eff6ff;
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    max-height: 350px;
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    position: relative;
    transition: background-color 0.2s;
    gap: 12px;
}

.notification-item:hover {
    background-color: #f9fafb;
}

.notification-item.unread {
    background-color: #f0f9ff;
    border-left: 3px solid #3b82f6;
}

.notification-item.read {
    opacity: 0.8;
}

.notification-icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.icon-trophy { color: #f59e0b; }
.icon-clock { color: #3b82f6; }
.icon-info { color: #10b981; }
.icon-bell { color: #6b7280; }

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 1.25rem !important;
    color: #111827;
    line-height: 1.3;
}

.notification-message {
    color: #6b7280;
    font-size: 1.2rem !important;
    margin-bottom: 6px;
    line-height: 1.4;
}

.notification-time {
    color: #9ca3af;
    font-size: 0.95rem !important;
}

.unread-dot {
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.notification-footer {
    padding: 12px 16px;
    border-top: 1px solid #f3f4f6;
    text-align: center;
    background: #fafafa;
    border-radius: 0 0 8px 8px;
}

.view-all {
    color: #3b82f6;
    text-decoration: none;
    font-size: 1.2rem !important;
    font-weight: 500;
}

.view-all:hover {
    text-decoration: underline;
}

.loading, .empty, .error {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 1.25rem !important;
}

/* Badge styles */
.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px solid white;
}

/* Position the notification dropdown properly */
#notification-item {
    position: relative;
}

/* Responsive */
@media (max-width: 768px) {
    .notification-dropdown {
        width: 320px;
        right: -50px;
    }
}

@media (max-width: 480px) {
    .notification-dropdown {
        width: 280px;
        right: 0;
    }
}

/* Notifications Page */
.ntf-page {
    min-height: 70vh;
}

.ntf-header {
    /* background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%); */
    border-radius: 10px 10px 0 0;
}

.ntf-title {
    font-weight: 700;
}

.ntf-stats-item {
    text-align: center;
}

.ntf-stats-count {
    display: block;
    font-size: 1.6rem !important;
    font-weight: 700;
}

.ntf-stats-label {
    font-size: 1.25rem !important;
    opacity: 0.8;
}

.ntf-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.ntf-card.ntf-unread {
    background: #f8f9ff;
    border-left: 4px solid #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.ntf-card.ntf-read {
    opacity: 0.8;
    background: #f8f9fa;
}

.ntf-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.ntf-icon {
    flex-shrink: 0;
}

.ntf-icon .ntf-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.ntf-icon-trophy { background-color: #f59e0b; }
.ntf-icon-clock { background-color: #3b82f6; }
.ntf-icon-info { background-color: #10b981; }
.ntf-icon-bell { background-color: #6b7280; }

.ntf-content {
    flex: 1;
}

.ntf-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.ntf-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #2d3748;
}

.ntf-actions-inner {
    display: flex;
    gap: 0.5rem;
}

.ntf-btn-action {
    background: none;
    border: none;
    color: #6c757d;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.ntf-btn-action:hover {
    background: #f8f9fa;
    color: #495057;
}

.ntf-btn-action.ntf-delete:hover {
    color: #dc3545;
    background: #f8d7da;
}

.ntf-btn-action.ntf-mark-read:hover {
    color: #28a745;
    background: #d4edda;
}

.ntf-message {
    color: #4a5568;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.ntf-data {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.ntf-match-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ntf-teams {
    font-weight: 600;
    color: #2d3748;
}

.ntf-score {
    color: #e53e3e;
    font-weight: 600;
}

.ntf-prediction-result {
    margin-top: 0.5rem;
}

.ntf-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: #6c757d;
}

.ntf-time {
    display: flex;
    align-items: center;
}

.ntf-type {
    font-size: 0.75rem;
}

.ntf-unread-indicator {
    width: 8px;
    height: 8px;
    background: #007bff;
    border-radius: 50%;
    position: absolute;
    top: 1.5rem;
    right: 1rem;
}

.ntf-empty {
    background: white;
    border-radius: 12px;
    padding: 6rem 2rem !important;
}

.ntf-empty-title {
    color: #2d3748;
    margin-bottom: 1rem;
}

.ntf-text-warning { color: #ffc107 !important; }
.ntf-text-success { color: #28a745 !important; }

/* Responsive Design */
@media (max-width: 768px) {
    .ntf-card {
        padding: 1rem;
        /* flex-direction: column; */
        text-align: center;
    }

    .ntf-header-inner {
        /* flex-direction: column; */
        gap: 0.5rem;
    }

    .ntf-actions-inner {
        align-self: center;
    }

    .ntf-footer {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ntf-match-info {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ntf-actions {
        margin-bottom: 1rem;
    }

    .ntf-header .row {
        text-align: center;
    }

    .ntf-stats {
        margin-top: 1rem;
    }
}

/* Animation for new notifications */
@keyframes ntf-highlight {
    0% { background-color: rgba(0, 123, 255, 0.1); }
    100% { background-color: transparent; }
}

.ntf-card.ntf-highlight {
    animation: ntf-highlight 2s ease;
}

.ntf-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    min-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ntf-pagination {
    margin-bottom: 0;
}

/*  */
/* Mobile Responsive Styles */
.ntf-controls-wrapper {
    width: 100%;
}

/* Mobile Layout (Stacked) */
.ntf-controls-mobile {
    width: 100%;
}

.ntf-actions-mobile .btn {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.ntf-filters-mobile .btn-group {
    display: flex;
    width: 100%;
}

.ntf-filters-mobile .btn {
    flex: 1;
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Desktop Layout (Side by Side) */
.ntf-controls-desktop {
    width: 100%;
}

.ntf-controls-desktop .ntf-actions {
    flex-shrink: 0;
}

.ntf-controls-desktop .ntf-filters {
    flex-shrink: 0;
}

/* Extra Small Devices (Phones) */
@media (max-width: 575.98px) {
    .ntf-controls-mobile {
        padding: 0 0.5rem;
    }

    .ntf-actions-mobile .btn {
        font-size: 0.85rem;
        padding: 0.7rem 0.8rem;
    }

    .ntf-filters-mobile .btn {
        font-size: 0.8rem;
        padding: 0.7rem 0.3rem;
    }
}

/* Small Devices (Tablets) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .ntf-controls-mobile {
        /* max-width: 400px; */
        margin: 0 auto;
    }
}

/* Medium Devices and Up (Desktop) */
@media (min-width: 768px) {
    .ntf-controls-desktop {
        gap: 1rem;
    }
}

/* Large Devices */
@media (min-width: 992px) {
    .ntf-controls-desktop {
        gap: 2rem;
    }
}

/* Button hover effects */
.ntf-controls-wrapper .btn {
    transition: all 0.2s ease-in-out;
    border-width: 2px;
}

.ntf-controls-wrapper .btn:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Active filter button styles */
.ntf-controls-wrapper .btn-group .btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Disabled button styles */
.ntf-controls-wrapper .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Icon adjustments for mobile */
@media (max-width: 767.98px) {
    .ntf-controls-wrapper .btn i {
        font-size: 0.9em;
    }
}


/*  */
/* Mobile-specific responsive styles */
@media (max-width: 767.98px) {
    .ntf-controls-mobile {
        padding: 0 8px;
    }

    .ntf-action-btn {
        padding: 10px 12px !important;
        font-size: 1.4rem !important;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        min-height: 44px; /* Minimum touch target size */
    }

    .ntf-filter-btn {
        padding: 12px 8px !important;
        font-size: 1.3rem !important;
        height: 44px;
        min-height: 44px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ntf-btn-text,
    .ntf-filter-text {
        font-weight: 500;
        letter-spacing: -0.2px;
    }

    .ntf-actions-mobile .d-grid {
        grid-template-columns: 1fr;
    }

    .ntf-filters-mobile .btn-group {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .ntf-filters-mobile .btn {
        border: 1px solid #dee2e6;
        border-right: none;
    }

    .ntf-filters-mobile .btn:last-child {
        border-right: 1px solid #dee2e6;
    }

    /* Improve touch targets */
    .btn-group-sm > .btn {
        padding: 12px 8px;
    }

    /* Active state improvements */
    .ntf-filter-btn.active {
        background-color: #007bff;
        border-color: #007bff;
        color: white;
        font-weight: 600;
        transform: scale(1.02);
        box-shadow: 0 2px 4px rgba(0,123,255,0.3);
    }

    /* Hover effects for devices that support hover */
    @media (hover: hover) {
        .ntf-action-btn:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .ntf-filter-btn:hover:not(.active) {
            background-color: #f8f9fa;
        }
    }

    /* Focus states for accessibility */
    .ntf-action-btn:focus,
    .ntf-filter-btn:focus {
        outline: 2px solid #007bff;
        outline-offset: 2px;
    }

    /* Loading states */
    .ntf-action-btn.loading {
        opacity: 0.7;
        pointer-events: none;
    }

    .ntf-action-btn.loading .fas {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
}

/* Extra small devices (phones under 375px) */
@media (max-width: 374.98px) {
    .ntf-action-btn {
        padding: 12px 8px !important;
        font-size: 1.3rem !important;
    }

    .ntf-filter-btn {
        padding: 14px 6px !important;
        font-size: 1.2rem !important;
    }

    .ntf-btn-text,
    .ntf-filter-text {
        font-size: 1.2rem;
    }

    .ntf-controls-mobile {
        padding: 0 4px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .ntf-actions-mobile .d-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .ntf-action-btn {
        padding: 12px 16px !important;
        font-size: 1.5rem !important;
    }

    .ntf-filter-btn {
        padding: 14px 12px !important;
        font-size: 1.4rem !important;
    }
}

/* Desktop hover effects */
@media (min-width: 768px) {
    .ntf-action-btn {
        transition: all 0.2s ease;
    }

    .ntf-action-btn:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .ntf-filter-btn {
        transition: all 0.2s ease;
    }

    .ntf-filter-btn:hover:not(.active) {
        background-color: #f8f9fa;
    }

    .ntf-filter-btn.active {
        transition: all 0.2s ease;
    }

    .ntf-filter-btn.active:hover {
        box-shadow: 0 4px 8px rgba(0,123,255,0.3);
    }
}

/* Common styles for both mobile and desktop */
.ntf-action-btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.ntf-filter-btn {
    border-radius: 6px;
    font-weight: 500;
    transition: var(--btn-transition);
    position: relative;
    overflow: hidden;
}

/* Ripple effect for buttons */
.ntf-action-btn::after,
.ntf-filter-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: width 0.3s, height 0.3s;
}

.ntf-action-btn:active::after,
.ntf-filter-btn:active::after {
    width: 100px;
    height: 100px;
}

/* Improve icon spacing */
.ntf-action-btn .fas {
    margin-right: 6px;
    font-size: 0.9em;
}

/* Ensure proper contrast for accessibility */
.btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover:not(.active) {
    color: #6c757d;
    background-color: #f8f9fa;
    border-color: #6c757d;
}


/* ===== SETTINGS ===== */

.st-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%) !important;
    font-size: 1.1rem;
}

.st-card-icon i {
    font-size: 2rem;
    color: #f8f8f8 !important;
}

.st-card-title {
    font-size: 1.75rem !important;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}

/* Settings List */
.st-settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.st-settings-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #f7fafc;
}

.st-settings-list li:last-child {
    border-bottom: none;
}

.st-settings-list li > div:first-child {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #2d3748;
    min-width: 140px;
}

.st-settings-list li > div:first-child i {
    margin-right: 12px;
    color: #718096;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Setting Control */
.st-setting-control {
    flex: 1;
    max-width: 400px;
}

/* ===== RADIO GROUP BASE STYLES ===== */
.st-radio-group {
    display: flex;
    width: 100%;
}

.st-radio-option {
    display: flex;
    align-items: center; /* Vertically centers radio with the main text */
    gap: 12px; /* Space between text and radio */
    cursor: pointer;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: #fafbfc;
    position: relative;
    overflow: hidden;
}

.st-radio-option:hover {
    border-color: var(--primary-color);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Hide default radio input */
.st-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom radio indicator */
.st-radio-option::after {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    background: white;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Checked State */
.st-radio-option input[type="radio"]:checked::after {
    border-color: #4299e1;
    background: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

/* Focus State */
.st-radio-option input[type="radio"]:focus + .st-radio-label {
    outline-offset: 2px;
    border-radius: 4px;
}

.st-radio-option:has(input[type="radio"]:focus) {
    border-color: var(--primary-color);
}

/* ===== DISPLAY & INTERFACE SPECIFIC STYLES ===== */
/* Horizontal layout for theme options */
.st-settings-card:first-child .st-radio-group {
    flex-direction: row;
    gap: 12px;
}

.st-settings-card:first-child .st-radio-option {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 100px;
    justify-content: center;
}

/* Theme icons using pseudo-elements */
.st-settings-card:first-child .st-radio-option::after {
    position: absolute;
    top: 12px;
    right: 12px;
    margin-top: 0;
}

.st-settings-card:first-child .st-radio-option::before {
    right: 19px;
    top: 19px;
}

/* Theme icon styling */
.st-settings-card:first-child .st-radio-option {
    font-weight: 500;
    color: #4a5568;
    font-size: 1.25rem;
}

/* Light theme */
.st-settings-card:first-child .st-radio-option:has(#lightTheme) {
    background: #fff;
}

.st-settings-card:first-child .st-radio-option:has(#lightTheme)::after {
    border-color: #f6ad55;
    background: #f6ad55;
}

/* Dark theme */
.st-settings-card:first-child .st-radio-option:has(#darkTheme) {
    background: linear-gradient(135deg, #2d3748, #1a202c);
    color: #e2e8f0;
}

.st-settings-card:first-child .st-radio-option:has(#darkTheme)::after {
    border-color: #e2e8f0;
    background: #e2e8f0;
}

/* Auto theme */
.st-settings-card:first-child .st-radio-option:has(#autoTheme) {
    background: #fff;
}

.st-settings-card:first-child .st-radio-option:has(#autoTheme)::after {
    border-color: #4299e1;
    background: #4299e1;
}

/* ===== PRIVACY & SECURITY SPECIFIC STYLES ===== */
/* Vertical layout for privacy options */
.st-settings-card:last-child .st-radio-group {
    flex-direction: column;
    gap: 8px;
}

.st-settings-card:last-child .st-radio-option {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
}

.st-settings-card:last-child .st-radio-option::after {
    margin-right: 12px;
    position: static;
}

.st-settings-card:last-child .st-radio-option::before {
    right: auto;
    left: 21px;
    top: 50%;
}

/* Radio label for privacy options */
.st-radio-label {
    display: flex;
    flex: 1;
}

.st-radio-text-wrapper {
    display: flex;
    flex-direction: column; /* Stacks main text above small text */
}

.st-radio-main-text {
    display: block;
}

.st-radio-text-wrapper small {
    display: block;
    font-size: 0.75em;
    color: #666;
    margin-top: 2px;
}

.st-radio-label small {
    display: block;
    font-size: 0.75em;
    color: #666;
    margin-top: 2px;
}

.st-settings-card:last-child .st-radio-label i:first-child {
    margin-right: 8px;
    color: #718096;
    font-size: 1.1rem;
    width: 18px;
    text-align: center;
}

.st-settings-card:last-child .st-radio-label small {
    color: #718096;
    font-size: 0.875rem;
    margin-left: 26px;
    line-height: 1.4;
    font-weight: 400;
}

/* Privacy option specific colors */
.st-settings-card:last-child .st-radio-option:has(#visibilityPublic:checked)::after {
    border-color: #48bb78;
    background: #48bb78;
}

.st-settings-card:last-child .st-radio-option:has(#visibilityFollowers:checked)::after {
    border-color: #ed8936;
    background: #ed8936;
}

.st-settings-card:last-child .st-radio-option:has(#visibilityPrivate:checked)::after {
    border-color: #e53e3e;
    background: #e53e3e;
}

.st-settings-card:last-child .st-radio-option:has(#visibilityPublic:checked) .st-radio-label i:first-child {
    color: #48bb78;
}

.st-settings-card:last-child .st-radio-option:has(#visibilityFollowers:checked) .st-radio-label i:first-child {
    color: #ed8936;
}

.st-settings-card:last-child .st-radio-option:has(#visibilityPrivate:checked) .st-radio-label i:first-child {
    color: #e53e3e;
}

/* ===== PASSWORD FORM STYLES ===== */
/* Password Toggle Button */
.st-password-toggle {
    background: none;
    border: none;
    padding: 12px 16px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-password-toggle:hover {
    color: #374151;
    background: #f9fafb;
}

.st-password-toggle:active {
    background: #f3f4f6;
}

/* ===== PASSWORD REQUIREMENTS ===== */
.st-password-requirements {
    margin-top: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #e5e7eb;
}

.st-password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}

.st-password-requirements li {
    display: flex;
    align-items: center;
    font-size: 1.3rem !important;
    padding: 4px 0;
    transition: all 0.3s ease;
}

.st-password-requirements li i {
    margin-right: 8px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

/* Requirement States */
.st-password-requirements li.invalid {
    color: #6b7280;
}

.st-password-requirements li.invalid i {
    color: #d1d5db;
}

.st-password-requirements li.valid {
    color: #059669;
    font-weight: 500;
}

.st-password-requirements li.valid i {
    color: #10b981;
}

/* Password Match Indicator */
#st-password-match {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

#st-password-match.valid {
    color: #059669;
    background: #d1fae5;
}

#st-password-match.invalid {
    color: #dc2626;
    background: #fee2e2;
}

/* ===== BUTTON STYLES ===== */
.st-password-actions,
.st-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}


.st-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.st-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color2));
    color: white;
}

.st-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #2563eb, #1e40af);
}

.st-btn-secondary:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #d1d5db;
}

/* ===== VALIDATION STATES ===== */
.st-password-input.valid {
    border-color: #10b981;
}

.st-password-input.invalid {
    border-color: #ef4444;
}

/* ===== DELETE ACCOUNT MODAL ===== */
/* Modal Overlay */
.st-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

/* Modal Content */
.st-modal-content {
    background-color: #fff;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal Header */
.st-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

.st-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.st-modal-icon {
    font-size: 24px;
    color: #dc2626;
}

.st-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

/* Close Button */
.st-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: #6b7280;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.st-close-btn:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.st-close-btn i {
    font-size: 20px;
}

/* Modal Body */
.st-modal-body {
    padding: 24px;
}

/* Warning Text */
.st-warning-text {
    background-color: #fef2f2;
    border-left: 4px solid #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #991b1b;
    font-size: 14px;
}

/* Delete Consequences */
.st-delete-consequences {
    background-color: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.st-delete-consequences h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-delete-consequences ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-delete-consequences li {
    font-size: 14px;
    color: #4b5563;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.st-delete-consequences li i {
    width: 18px;
    color: #6b7280;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.st-delete-consequences li span {
    flex: 1;
}

/* Hover effect for better UX on desktop */
@media (min-width: 769px) {
    .st-delete-consequences li:hover {
        color: #1f2937;
    }

    .st-delete-consequences li:hover i {
        color: var(--primary-color);
    }
}

/* Tablet Responsive */
@media (max-width: 768px) {
    .st-delete-consequences {
        padding: 16px;
        border-radius: 10px;
    }

    .st-delete-consequences h4 {
        font-size: 15px;
        margin-bottom: 14px;
    }

    .st-delete-consequences ul {
        gap: 10px;
    }

    .st-delete-consequences li {
        font-size: 13.5px;
        gap: 10px;
    }

    .st-delete-consequences li i {
        width: 16px;
        font-size: 13px;
    }
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .st-delete-consequences {
        padding: 14px;
        border-radius: 8px;
        margin-bottom: 14px;
    }

    .st-delete-consequences h4 {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .st-delete-consequences ul {
        gap: 10px;
    }

    .st-delete-consequences li {
        font-size: 13px;
        gap: 10px;
    }

    .st-delete-consequences li i {
        width: 16px;
        font-size: 12px;
        margin-top: 1px;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .st-delete-consequences {
        padding: 12px;
        border-radius: 8px;
    }

    .st-delete-consequences h4 {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .st-delete-consequences ul {
        gap: 8px;
    }

    .st-delete-consequences li {
        font-size: 12px;
        gap: 8px;
    }

    .st-delete-consequences li i {
        width: 14px;
        font-size: 11px;
        margin-top: 1px;
    }
}

/* Alternative: Grid layout for larger screens (optional) */
@media (min-width: 1024px) {
    .st-delete-consequences ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 16px;
    }

    .st-delete-consequences li {
        margin-bottom: 0;
    }
}

/* Touch-friendly for mobile devices */
@media (max-width: 768px) and (hover: none) {
    .st-delete-consequences li {
        padding: 4px 0;
        min-height: 44px; /* Better touch target */
        align-items: center;
    }
}

/* Retention Notice */
.st-retention-notice {
    background-color: #eff6ff;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1e40af;
    font-size: 12px;
}

/* Confirmation Section */
.st-confirmation-section {
    margin-top: 20px;
}

.st-confirm-label {
    display: flex;
    align-items: center;
    gap: 8px !important;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
}

/* Form Group */
.st-form-group {
    margin-bottom: 20px;
}

.st-form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #374151;
}

/* Password Input */
.st-password-input {
    position: relative;
    display: flex;
    align-items: center;
}

.st-password-input input {
    width: 100%;
    padding: 10px 40px 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1.45rem;
    transition: border-color 0.2s;
}

.st-password-toggle {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #6b7280;
}

.st-delete-confirm-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1.45rem;
    font-family: monospace;
    font-weight: 600;
}

.st-password-input input:focus,
.st-delete-confirm-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Modal Actions */
.st-modal-actions {
    display: flex;
    gap: 12px;
    padding: 20px 24px !important;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
    border-radius: 0 0 12px 12px;
}

.st-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 1.45rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.st-btn-secondary {
    background-color: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.st-btn-secondary:hover {
    background-color: #f3f4f6;
}

.st-btn-danger {
    background-color: #dc2626;
    color: #fff;
}

.st-btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
}

.st-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile Responsive Styles */
@media (max-width: 640px) {
    .st-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .st-modal-content {
        max-height: 100vh;
        border-radius: 16px 16px 0 0;
        max-width: 100%;
    }

    .st-modal-header {
        padding: 16px 20px;
    }

    .st-modal-title {
        font-size: 18px;
    }

    .st-modal-icon {
        font-size: 20px;
    }

    .st-modal-body {
        padding: 20px;
    }

    .st-delete-consequences ul {
        padding-left: 16px;
    }

    .st-delete-consequences li {
        font-size: 13px;
    }

    .st-modal-actions {
        flex-direction: column-reverse;
        padding: 16px 20px;
        gap: 10px;
    }

    .st-btn {
        padding: 12px 16px;
        font-size: 15px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .st-modal-body {
        padding: 16px;
    }

    .st-warning-text {
        font-size: 13px;
        padding: 10px 12px;
    }

    .st-form-label {
        font-size: 1.5rem;
    }

    .st-password-input input,
    .st-delete-confirm-input {
        font-size: 1.5rem;
        padding: 8px 12px;
    }

    .st-confirm-label {
        font-size: 1.5rem;
    }
}

.st-confirm-label input[type="checkbox"] {
    accent-color: var(--primary-color);
    width: 14px;
    height: 14px;
    border-radius: 5px;
    cursor: pointer;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .st-settings-card {
        padding: 16px;
        margin-bottom: 10px;
    }

    .st-settings-list li {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 12px 0;
    }

    .st-settings-list li > div:first-child {
        min-width: auto;
        padding-bottom: 8px;
        border-bottom: 1px solid #f1f3f4;
    }

    .st-setting-control {
        max-width: none;
    }

    /* Display & Interface mobile */
    .st-settings-card:first-child .st-radio-group {
        flex-direction: column;
        gap: 8px;
    }

    .st-settings-card:first-child .st-radio-option {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        min-height: auto;
        padding: 16px;
        font-size:1.35rem;
    }

    .st-settings-card:first-child .st-radio-option::after {
        position: static;
        margin-right: 12px;
    }

    .st-settings-card:first-child .st-radio-option::before {
        right: auto;
        left: 21px;
        top: 50%;
    }

    .st-card-header {
        margin-bottom: 16px;
    }

    .st-card-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .st-card-title {
        font-size: 1.1rem;
    }

    /* Password form responsive */
    .st-password-requirements ul {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .st-password-actions,
    .st-actions {
        flex-direction: column;
        gap: 8px;
    }

    .st-btn {
        width: 100%;
        padding: 14px 24px;
    }

    /* Modal responsive */
    .st-modal-overlay {
        padding: 10px;
    }

    .st-modal-content {
        max-height: 95vh;
    }

    .st-modal-actions {
        flex-direction: column;
    }

    .st-modal-actions .st-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .st-radio-option {
        padding: 12px;
    }

    .st-password-input input {
        padding: 14px 12px;
    }

    .st-password-toggle {
        padding: 14px 12px;
    }

    .st-password-requirements {
        padding: 12px;
    }

    .st-password-requirements li {
        font-size: 1rem !important;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes radioCheck {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.st-radio-option input[type="radio"]:checked::before {
    animation: radioCheck 0.3s ease-out;
}

@keyframes requirementCheck {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.st-password-requirements li.valid {
    animation: requirementCheck 0.3s ease-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.st-password-input.invalid {
    animation: shake 0.5s ease-in-out;
}


/* Focus indicators for better accessibility */
.st-password-toggle:focus-visible,
.st-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.st-password-input input:focus-visible {
    outline: none;
}


/* NEW PREDICTION */

.prediction-card {
    background: white;
    border-radius: 16px;
    padding: 20px !important;
    margin-bottom: 0px;
    border: 1px solid #F0F0F0;
    transition: all 0.3s ease;
}

.prediction-card:hover {
    border-color: #E8E8E8;
}

.prediction-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
}

.prediction-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.profile-link:hover {
    opacity: 0.9;
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background-color: #10b981;
    border-radius: 50%;
    border: 2px solid white;
}

.profile-info {
    /* display: flex; */
    /* flex-direction: column; */
}

.c-flex {
    font-weight: 600;
    font-size: 1.4rem;
    /* color: #1f2937; */
    line-height: 2rem !important;
    display: flex !important;
}

.prediction-date {
    font-size: 1.1rem !important;
    color: #6b7280;
}

.follow-action {
    margin-left: auto;
}

i.fa-circle.c-user-date-separator {
  font-size: 0.6rem !important;
  color:#808080;
}

.prediction-content {
    margin: 10px 0 0 0 !important;
}

/*  */

/* Mobile-specific styles */
@media (max-width: 768px) {
  /* Hide icon, show text on mobile */
  .expand-icon {
    display: none;
  }

  .mobile-only {
    display: inline;
    font-weight: 500;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .mobile-only {
    display: none; /* Hide "Copy" text on tablet */
  }
}

/* Desktop styles */
@media (min-width: 1025px) {
  .mobile-only {
    display: none; /* Hide "Copy" text on desktop */
  }

  .expand-icon {
    display: inline-block;
    font-size: 1.1rem;
  }
}

/* Optional: Add copy feedback animation */
@keyframes copyFeedback {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.mobile-only {
    display: none;
}

/* Mobile styles */
@media (max-width: 768px) {
    .mobile-only {
        display: inline-block;
        font-size: 1.2rem;
    }

    .modal-header #matchesModalTitle {
      font-size: 1.8rem !important;
    }
}


/*  */
.expand-icon {
    color: var(--primary-color2);
    font-size: 1.4rem;
    float: right;
}

.stat-item {
    /* display: flex; */
    align-items: center;
    gap: 8px;
}

.stat-count {
    font-weight: 600;
    color: #374151;
    font-size: 1.4rem;
}

.stat-divider {
    width: 1px;
    height: 20px;
    background: #d1d5db;
}

.prediction-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.confidence-meter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.confidence-label {
    font-size: 1.4rem;
    color: #6b7280;
    white-space: nowrap;
}

.confidence-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.confidence-percent {
    font-weight: 600;
    color: #10b981;
    font-size: 1.4rem;
    min-width: 40px;
}

.cta-button {
    padding: 10px 24px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

@media only screen and (max-width: 576px) {
  .prediction {
    padding: 0 !important ;
  }

  .prediction-card {
        padding: 1px;
    }
}

@media (max-width: 768px) {
    .prediction-card {
        padding: 5px !important;
    }

    .prediction-header {
        flex-direction: column;
        gap: 12px;
    }

    .jackpot-tag {
      align-self: flex-start;
    }

    .btk-jackpot-tag,
    .sp-jackpot-tag {
      font-size: 1.4rem !important;
    }

    .prediction-footer {
        flex-direction: column;
        gap: 16px;
    }

    .confidence-meter {
        width: 100%;
    }

    .cta-button {
        width: 100%;
        justify-content: center;
    }
}

/*  */
/* Modal Overlay */
.share-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Modal Container */
.share-popup {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideUp 0.3s ease;
}

/* Header */
.share-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.share-popup-header h3 {
    margin: 0;
    font-size: 1.75rem !important;
    font-weight: 600;
    color: #1f2937;
}

.share-popup-close,
.close-modal-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #adadad !important;
    padding: 4px;
    line-height: 1;
    border-radius: 50px;
    transition: color 0.2s, background-color 0.2s;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-popup-close {
  font-size: 2.8rem;
}

.close-modal-btn {
  font-size: 2rem;
}

.share-popup-close:hover,
.close-modal-btn:hover {
    color: #999999 !important;
    background-color: #f3f4f6;
}

/* Body */
.share-popup-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Share Platforms Grid */
.share-platforms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.share-platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px !important;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 80px;
}

.share-platform:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    color: #fff !important;
    opacity: 0.9;
}

.share-platform:active {
    opacity: 0.9;
}

.share-platform i {
    font-size: 2.4rem;
    margin-bottom: 8px;
}

.share-platform span {
    font-size: 1.4rem;
    font-weight: 500;
}

/* Platform Colors */
.twitter { background: #1DA1F2; }
.facebook { background: #4267B2; }
.whatsapp { background: #25D366; }
.telegram { background: #0088cc; }

/* URL Section */
.share-url-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* border-top: 1px solid #e5e7eb; */
}

.share-url-label {
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
    color: #374151;
    font-size: 1.4rem !important;
}

.share-url-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-url-input {
    flex: 1;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1.4rem;
    background: #f9fafb;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-appearance: none;
}

.share-url-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: white;
}

.copy-url-btn {
    padding: 14px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.copy-url-btn:hover {
    background: #2563eb;
}

.copy-url-btn:active {
    background: #1d4ed8;
}

.copy-url-btn.copied {
    background: #10b981;
}

/* Animation */
@keyframes modalSlideUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mobile-specific styles */
@media (max-width: 480px) {
    .share-popup {
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        margin-top: auto;
        margin-bottom: 0;
    }

    .share-popup-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .share-popup-header {
        padding: 18px 20px;
    }

    .share-popup-body {
        padding: 20px;
    }

    .share-platforms {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .share-platform {
        flex-direction: row;
        justify-content: flex-start;
        padding: 16px 20px;
        text-align: left;
        min-height: 60px;
    }

    .share-platform i {
        margin-bottom: 0;
        margin-right: 12px;
        font-size: 2rem;
    }

    .share-url-container {
        flex-direction: column;
    }

    .share-url-input {
        font-size: 1.3rem;
        padding: 12px 16px;
    }

    .copy-url-btn {
        padding: 14px;
        font-size: 1.5rem;
    }
}

/* Tablet adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    .share-popup {
        max-width: 90%;
    }

    .share-platforms {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .share-platform {
        min-height: 100px;
    }

    .share-url-container {
        flex-direction: row;
    }
}

/* Large mobile landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .share-popup {
        max-height: 80vh;
        max-width: 600px;
    }

    .share-platforms {
        grid-template-columns: repeat(4, 1fr);
    }

    .share-platform {
        min-height: 90px;
    }
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}


/*  */
/* Base Card */
.pricing-card {
    background: white;
    border: var(--container-border) !important;
    border-radius: var(--container-border-radius) !important;
    padding: 24px;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

/* Header - Price Section */
.pricing-card__header {
    text-align: center;
    margin-bottom: 20px;
}

.pricing-card__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pricing-card__amount {
    font-size: 42px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pricing-card__type {
    font-size: 1.4rem;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Primary CTA - Large and Prominent */
.pricing-card__primary-cta {
    padding: 15px;
}

.buy-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color2));
    color: #fff !important;
    text-decoration: none;
    border-radius: 14px;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.buy-button:hover {
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    color: #fff !important;
}

.buy-button i {
    font-size: 2rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Compact Feature List */
.pricing-card__features-compact {
    margin-bottom: 20px;
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e5e7eb;
}

.compact-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 1.4rem;
    color: #374151;
    font-weight: 500;
}

.compact-feature:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}

.compact-feature i {
    color: #10b981;
    font-size: 1.6rem;
    flex-shrink: 0;
}

/* Secondary CTA */
.pricing-card__secondary-cta {
    text-align: center;
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

.secondary-button:hover {
    background: #e5e7eb;
    transform: translateX(4px);
}

.secondary-button i {
    font-size: 1.4rem;
    transition: transform 0.3s ease;
}

.secondary-button:hover i {
    transform: translateX(4px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .pricing-card {
        padding: 20px;
        max-width: 100%;
        margin: 0 !important;
    }

    .pricing-card__amount {
        font-size: 36px;
    }

    .buy-button {
        padding: 16px 20px;
        font-size: 1.7rem;
    }

    .pricing-card__features-compact {
        padding: 14px;
    }

    .compact-feature {
        font-size: 1.3rem;
        padding: 7px 0;
    }

    .compact-feature i {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .pricing-card {
        padding: 16px;
        margin: 0;
        border-radius: 14px;
    }

    .pricing-card__amount {
        font-size: 32px;
    }

    .pricing-card__type {
        font-size: 1.3rem;
    }

    .buy-button {
        padding: 14px 18px;
        font-size: 1.6rem;
        border-radius: 12px;
    }

    .pricing-card__features-compact {
        padding: 12px;
        border-radius: 10px;
    }

    .compact-feature {
        font-size: 1.2rem;
        padding: 6px 0;
        gap: 10px;
    }

    .compact-feature i {
        font-size: 1.4rem;
    }

    .secondary-button {
        padding: 10px 20px;
        font-size: 1.4rem;
    }
}

/* Extra Small Mobile */
@media (max-width: 360px) {
    .pricing-card {
        padding: 14px;
        margin: 0 8px;
    }

    .pricing-card__amount {
        font-size: 28px;
    }

    .buy-button {
        padding: 12px 16px;
        font-size: 1.5rem;
    }

    .buy-button i {
        font-size: 1.6rem;
    }

    .pricing-card__features-compact {
        padding: 10px;
    }

    .compact-feature {
        font-size: 1.1rem;
        padding: 5px 0;
    }
}

/* Animation for CTA entrance */
@keyframes ctaEntrance {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pricing-card__primary-cta {
    animation: ctaEntrance 0.6s ease-out 0.1s both;
}

/* Sticky CTA for mobile (optional) */
@media (max-width: 768px) {
    .sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 12px 16px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        display: flex;
        justify-content: center;
    }

    .sticky-cta .buy-button {
        max-width: 320px;
        margin: 0 auto;
    }
}


/*  */

.ntf-controls-wrapper {
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
    border-radius: 12px;
    padding: 1.25rem;
    /* border: 1px solid rgba(0,0,0,0.08); */
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.05); */
    margin-bottom: 1.5rem;
}

/* Color Variables */
:root {
    --primary-gold: #d4af37;
    --primary-gold-dark: #b18819;
    --primary-gold-light: #f0e6d2;
    --unread-color: #2ecc71;
    --unread-color-dark: #27ae60;
    --read-color: #95a5a6;
    --read-color-dark: #7f8c8d;
}

/* Mobile Styles */
.ntf-controls-mobile {
    animation: slideInUp 0.3s ease-out;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width:100%;
}

.ntf-action-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* box-shadow: 0 2px 6px rgba(0,0,0,0.08); */
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ntf-action-btn-mobile:first-child {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%);
    color: white;
}

.ntf-action-btn-mobile:last-child {
    background: white;
    color: #fa5252;
    border: 1.5px solid #ffe3e3;
}

.ntf-action-btn-mobile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.ntf-action-btn-mobile:active {
    transform: translateY(0);
}

.ntf-action-btn-mobile i {
    font-size: 1.1rem;
    margin-right: 0.5rem;
}

/* Desktop Styles */
.ntf-controls-desktop {
    animation: fadeIn 0.4s ease-out;
}

.ntf-action-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid transparent;
    position: relative;
    overflow: hidden;
}

.ntf-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1) !important;
}

.ntf-action-btn:active {
    transform: translateY(0);
}

#ntf-mark-all-read-btn-desktop {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%);
    color: white;
    border: none;
}

#ntf-mark-all-read-btn-desktop:hover {
    background: linear-gradient(135deg, var(--primary-gold-dark) 0%, #9a7615 100%);
}

#ntf-clear-all-btn-desktop {
    color: #fa5252;
    border-color: #fa5252;
}

#ntf-clear-all-btn-desktop:hover {
    background: #fa5252;
    color: white;
    border-color: #fa5252;
}

.ntf-btn-badge {
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.ntf-action-btn:hover .ntf-btn-badge {
    opacity: 1;
    transform: scale(1);
}

/* Filter Buttons - Fixed Active State Handling */
.ntf-filter-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 8px !important;
    margin: 0 0.125rem;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1.5px solid #dee2e6 !important;
    color: #495057;
    background: white;
}

/* Hover states for all filter buttons */
.ntf-filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: var(--primary-gold) !important;
    color: var(--primary-gold);
    background: var(--primary-gold-light);
}

/* Specific hover colors for each filter type */
.ntf-filter-btn[data-filter="unread"]:hover {
    border-color: var(--unread-color) !important;
    color: var(--unread-color);
    background: rgba(46, 204, 113, 0.1);
}

.ntf-filter-btn[data-filter="read"]:hover {
    border-color: var(--read-color) !important;
    color: var(--read-color);
    background: rgba(149, 165, 166, 0.1);
}

/* Active states - These styles only apply when button has BOTH classes */
.ntf-filter-btn.active {
    border-color: transparent !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Active state for ALL filter */
.ntf-filter-btn[data-filter="all"].active {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%);
    border-color: transparent !important;
}

/* Active state for UNREAD filter */
.ntf-filter-btn[data-filter="unread"].active {
    background: linear-gradient(135deg, var(--unread-color) 0%, var(--unread-color-dark) 100%);
    border-color: transparent !important;
}

/* Active state for READ filter */
.ntf-filter-btn[data-filter="read"].active {
    background: linear-gradient(135deg, var(--read-color) 0%, var(--read-color-dark) 100%);
    border-color: transparent !important;
}

/* Badge styling for active states */
.ntf-filter-btn.active .ntf-badge {
    background: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

/* Badge styling for inactive states */
.ntf-filter-btn:not(.active) .ntf-badge {
    color: white;
}

.ntf-filter-btn[data-filter="all"]:not(.active) .ntf-badge {
    background: var(--primary-gold) !important;
}

.ntf-filter-btn[data-filter="unread"]:not(.active) .ntf-badge {
    background: var(--unread-color) !important;
}

.ntf-filter-btn[data-filter="read"]:not(.active) .ntf-badge {
    background: var(--read-color) !important;
}

.ntf-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    transition: all 0.3s ease;
    font-weight: 600;
}

.ntf-filter-btn:hover .ntf-badge {
    transform: scale(1.1);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Effects */
.ntf-action-btn::before,
.ntf-filter-btn::before,
.ntf-action-btn-mobile::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.ntf-action-btn:hover::before,
.ntf-filter-btn:hover::before,
.ntf-action-btn-mobile:hover::before {
    width: 300px;
    height: 300px;
}

a.user-name {
  font-size: 1.3rem !important;
  font-weight: 600;
}

.c-follow-user.follow-btn {
    font-size: 1.3rem !important;
    border:1px solid var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ntf-controls-wrapper {
        padding: 1rem;
        border-radius: 10px;
    }

    .ntf-action-btn-mobile {
        padding: 0.625rem 0.875rem;
        font-size: 0.9rem;
    }

    .ntf-filter-btn {
        padding: 0.375rem 0.875rem;
        font-size: 0.9rem;
    }

    .c-follow-user.follow-btn {
      font-size: 1.4rem !important;
    }

    .follow-btn,
    .unfollow-btn {
        padding:6px 16px;
        font-size:12px;
    }
}

@media (max-width: 576px) {
  .user-name {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 200px;
      font-size: 1.4rem !important;
    }

    .action-buttons {
        grid-template-columns: 1fr;
    }

    .ntf-filter-btn .ntf-filter-text {
        font-size: 0.85rem;
    }

    .ntf-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
    }

    .c-follow-user.follow-btn {
      font-size: 1.4rem !important;
    }
}

/* JavaScript helper class - add this to your JS */
.ntf-filter-btn:not(.active):hover {
    /* This ensures hover works properly for inactive buttons */
    z-index: 2;
}


/*  */

.ellipsis::after {
    content: '...';
    animation: ellipsis 1.5s infinite;
    display: inline-block;
    width: 20px;
    text-align: left;
}

@keyframes ellipsis {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}


/*  */
/* Updated Ad Card with top-value bottom-label stats */
.adg-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.adg-card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.adg-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eaeef2;
    border-radius: 12px 12px 0 0;
    object-fit: cover !important;
}

.adg-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.adg-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.adg-meta {
    margin-bottom: 12px;
}

/* Badge Status Styles */
.adg-status-badge {
    /* Layout */
    display: inline-block;
    padding: 4px 14px;

    /* Shape */
    border-radius: 50px;

    /* Typography */
    font-size: 0.95rem !important;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.5px;

    /* Visual */
    background: #e0e0e0;
    color: #333;
    border: 1px solid transparent;

    /* Interaction */
    cursor: default;
    user-select: none;

    /* Spacing */
    line-height: 1.5;
    white-space: nowrap;
}

/* Status colors remain the same */
.adg-status-badge.active { background: linear-gradient(135deg, #10b981, #34d399); color: white; }
.adg-status-badge.pending { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: white; }
.adg-status-badge.paused { background: linear-gradient(135deg, #64748b, #94a3b8); color: white; }
.adg-status-badge.ended { background: linear-gradient(135deg, #ef4444, #f87171); color: white; }
.adg-status-badge.draft { background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: white; }
.adg-status-badge.rejected { background: linear-gradient(135deg, #dc2626, #ef4444); color: white; }
.adg-status-badge.visible { background: linear-gradient(135deg, #d1e7dd, #d4edda); color: #0a3622; }
.adg-status-badge.hidden { background: linear-gradient(135deg, #e2e3e5, #d3d6d8); color: #1e1f22; }

.adg-description {
    font-size: 1.3rem;
    color: #5e6f88;
    line-height: 1.5;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* UPDATED AD STATS - Value top, Label bottom */
.adg-stats {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 0;
    border-top: 1px solid #eaeef2;
    border-bottom: 1px solid #eaeef2;
}

.adg-stat-item {
    flex: 1;
    text-align: center;
}

.adg-stat-value {
    font-size: 1.7rem !important;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.3;
}

.adg-stat-label {
    font-size: 1.2rem !important;
    color: #8a9cb0;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

/* Ad Actions */
.adg-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    width: 100%;
}

/* View Ad Button */
.adg-view-ad-btn {
    flex: 1;
    min-width: 0;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adg-view-ad-btn:hover {
    opacity: 0.9;
}

.adg-view-ad-btn i {
    font-size: 1.3rem;
    flex-shrink: 0;
}



.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    background: linear-gradient(to bottom, transparent, #cbd5e1, transparent);
}

/* Label at the BOTTOM */
.ad-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

/* Responsive */
@media (max-width: 768px) {
    .ad-stats {
        padding: 1rem 0.75rem;
    }

    .adg-title {
        font-size: 2rem;
    }

    .adg-meta {
        margin-bottom: 12px;
    }

    .adg-status-badge {
        font-size: 1.35rem;
    }

    .adg-description {
      font-size: 1.5rem !important;
    }

    .adg-view-ad-btn {
      font-size: 1.5rem;
    }

    .stat-card-minimal__value {
        font-size: 2.2rem !important;
    }

    .stat-card-minimal__label {
        font-size: 1.8rem !important;
    }

    .adg-stat-value {
        font-size: 1.8rem !important;
    }

    .adg-stat-label {
        font-size: 1.3rem !important;
    }
}

/* Simplified version */
.ad-stats.simple {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: transparent;
    border: none;
}

.ad-stats.simple .stat-item {
    flex: 1;
    background: #f8fafc;
    border-radius: 8px;
    padding: 0.75rem;
}

.ad-stats.simple .stat-value {
    font-size: 1.5rem;
}

.ad-stats.simple .stat-label {
    font-size: 0.75rem;
    padding-top: 0.25rem;
}

.ad-stats.simple .stat-item:not(:last-child)::after {
    display: none;
}

#loading-indicator {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}


/*  */
/* Predictions Tab Styles */
.predictions-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.heading-icon {
    font-size: 1.5rem;
}

.stat-card-success {
    border-top: 4px solid #2ec4b6;
    background-color: linear-gradient(135deg, #f0fffd 0%, #fff 100%);
}

.stat-card-accent .stat-icon {
    background-color: rgba(114, 9, 183, 0.1);
    color: #7209b7;
}

.stat-card-success .stat-icon {
    background-color: rgba(46, 196, 182, 0.1);
    color: #2ec4b6;
}

.stat-value .total-value {
    color: #4361ee;
}

.stat-value .unique-value {
    color: #7209b7;
}

.stat-divider {
    color: #adb5bd;
    margin: 0 0.5rem;
}

.stat-details {
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-label {
    font-size: 1.3rem !important;
    color: #6c757d;
}

.detail-value {
    font-size: 1.3rem !important;
    font-weight: 600;
    color: #343a40;
}

/* Performance Grid */
.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.performance-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.performance-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

.performance-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.performance-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.performance-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #343a40;
}

.performance-content {
    text-align: center;
}

.performance-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2ec4b6;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.performance-description {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.4;
}

.engagement-metrics {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-label {
    font-size: 0.9rem;
    color: #6c757d;
}

.metric-values {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #343a40;
}

.metric-label-small {
    font-size: 0.85rem;
    color: #6c757d;
}

.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(46, 196, 182, 0.1);
    border-radius: 50px;
    margin-bottom: 0.75rem;
}

.trend-arrow {
    width: 32px;
    height: 32px;
    background: #2ec4b6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.trend-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #343a40;
}

.trend-description {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    /* margin-top: 2.5rem;
    padding-top: 2rem; */
    /* border-top: 1px solid #e9ecef; */
}

.refresh-btn {
    background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
    color: white;
}

.refresh-btn:hover {
    box-shadow: 0 6px 12px rgba(67, 97, 238, 0.3);
}

.export-btn {
    background: white;
    color: #4361ee;
    border: 2px solid #4361ee;
}

.export-btn:hover {
    background: rgba(67, 97, 238, 0.1);
    transform: translateY(-2px);
}

.compare-btn {
    background: linear-gradient(135deg, #7209b7 0%, #560bad 100%);
    color: white;
}

.compare-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(114, 9, 183, 0.3);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .performance-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .performance-value {
        font-size: 2rem;
    }
}

/*  */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes pulseHighlight {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(67, 97, 238, 0.1);
    }
    100% {
        background-color: transparent;
    }
}

.clicked {
    animation: buttonClick 0.3s ease;
}

@keyframes buttonClick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}


/*  */
.c-profile-pic {
  width:2.4rem !important;
  height:2.4rem !important;
  object-fit:cover !important;
  border-radius:100% !important;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========== AD CONTAINER STYLES ========== */
.ad-placeholder {
    margin-bottom: 8px !important;
    position: relative;
}

.ad-container {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    /* border: 1px solid #e8e8e8; */
    position: relative;
    min-height: 180px;
}

.ad-container:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    border-color: #d8d8d8;
}

/* ========== AD CONTENT LAYOUT ========== */
.ad-content {
    padding: 16px;
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

/* ========== HIDE ICON - TOP RIGHT ========== */
.ad-hide-icon {
    position: absolute;
    top: 50%; /* Start at middle */
    right: 0;
    transform: translateY(-50%); /* Adjust to true center */
    background: white;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0.7;
    transition: all 0.2s ease;
    color: #666;
    font-size: 1.6rem;
    border-radius: 50%;
    padding: 0;
    margin: 0;
}

.ad-hide-icon:hover {
    opacity: 1;
    background: #f8f8f8;
    border-color: #ccc;
}

/* ========== AD BADGE ========== */
.ad-badge {
    order: 1; /* First item */
    flex-shrink: 0;
    margin: 0 !important;
    color: #666;
    padding: 0 !important;
    border-radius: 12px;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    z-index: 100;
}

/* ========== AD HEADER SECTION ========== */
.ad-header {
    position: relative; /* This is IMPORTANT */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1px;
    padding-right: 40px; /* Space for hide icon */
    min-height: 32px; /* Minimum height for proper centering */
    width: 100%;
    /* background: yellow; */
}

.ad-header-content {
    order: 2; /* Second item */
    margin-left: auto; /* Push to right */
    display: flex;
    align-items: center;
    gap: 12px;
}

.ad-sponsor-label {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #666;
}

.ad-sponsor-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background: #f0f0f0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0rem;
    color: #888;
}

.ad-logo-container {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.ad-logo {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-right: 8px;
    object-fit: cover;
    background: #f0f0f0;
}

.ad-company-name {
    font-size: 1.2rem;
    color: #666;
    font-weight: 500;
}

/* ========== AD BODY SECTION ========== */
.ad-body {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex: 1;
}

/* ========== AD IMAGE ========== */
.ad-image-container {
    flex: 0 0 120px;
    border-radius: 4px;
    overflow: hidden;
    background: #f8f8f8;
}

.ad-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

/* ========== AD TEXT CONTENT ========== */
.ad-text-container {
    flex: 1;
    min-width: 0; /* Prevent overflow */
}

.ad-title {
    margin: 0 0 8px 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.ad-description {
    margin: 0 0 12px 0;
    font-size: 1.3rem;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== ACTION BUTTON ========== */
.ad-action-button {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a73e8;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 36px;
    min-width: 100px;
}

.ad-action-button:hover {
    background: #1557b0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ========== AD FOOTER SECTION ========== */
.ad-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.ad-metrics {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    color: #888;
    gap: 12px;
}

.ad-metric {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ad-metric-icon {
    font-size: 1.0rem;
}

/* ========== VERTICAL LAYOUT (For Mobile or no-image ads) ========== */
.ad-layout-vertical .ad-body {
    flex-direction: column;
    gap: 12px;
}

.ad-layout-vertical .ad-image-container {
    flex: 0 0 auto;
    width: 100%;
}

.ad-layout-vertical .ad-image {
    height: 160px;
}

/* ========== HIDDEN AD MESSAGE ========== */
.ad-hidden-message {
    padding: 24px;
    text-align: center;
    color: #666;
    font-size: 1.4rem;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.ad-hidden-message i {
    font-size: 2.4rem;
    margin-bottom: 12px;
    color: #aaa;
}

.ad-hidden-message p {
    margin: 0 0 6px 0;
    font-weight: 500;
}

.ad-hidden-message small {
    color: #888;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.ad-undo-button {
    padding: 6px 16px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ad-undo-button:hover {
    background: #e8e8e8;
    border-color: #ccc;
}

/* ========== LOADING STATE ========== */
.ad-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 180px;
    color: #888;
    font-size: 1.4rem;
}

.ad-loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #1a73e8;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: ad-spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes ad-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========== MOBILE RESPONSIVENESS ========== */
@media (max-width: 768px) {
    .ad-placeholder {
        margin: 16px 0;
        padding: 0 !important;
    }

    .ad-container {
        border-radius: 6px;
    }

    .ad-content {
        min-height: 160px;
    }

    /* .ad-hide-icon {
        top: 10px;
        right: 10px;
        width: 22px;
        height: 22px;
    } */

    .ad-header {
        padding-right: 35px;
    }

    .ad-body {
        flex-direction: column;
        gap: 12px;
    }

    .ad-image-container {
        width: 100% !important;
        height: auto;
        max-height: 200px; /* Prevent too tall images */
        margin-bottom: 2px;
        border-radius: 8px;
        background: #f8f8f8;
    }

    .ad-image {
        width: 100% !important;
        height: auto;
        max-height: 200px;
        object-fit: cover; /* Maintain aspect ratio while filling container */
        border-radius: 8px;
    }

    .ad-title {
        font-size: 1.5rem;
    }

    .ad-description {
        font-size: 1.2rem;
    }

    .ad-action-button {
        padding: 7px 14px;
        font-size: 1.2rem;
        height: 34px;
        min-width: 90px;
    }

    .ad-badge {
        bottom: 10px;
        left: 10px;
        font-size: 1.2rem;
        padding: 2px 6px;
    }

    .ad-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ad-metrics {
        width: 100%;
        justify-content: space-between;
    }

    /* For ads without images, adjust layout */
    .ad-content:not(:has(.ad-image)) .ad-text-container {
        margin-top: 0;
    }
}

/* ========== UTILITY CLASSES ========== */
.ad-no-image .ad-body {
    flex-direction: column;
}

.ad-no-image .ad-image-container {
    display: none;
}

/* Focus styles for accessibility */
.ad-hide-icon:focus,
.ad-action-button:focus,
.ad-undo-button:focus {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}


/*  */
/* ========== FEEDBACK MODAL OVERLAY ========== */
.ad-feedback-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(2px);
}

/* Mobile full-screen */
@media (max-width: 768px) {
    .ad-feedback-modal-overlay {
        padding: 0;
        background: #ffffff;
    }
}

/* Active state */
.ad-feedback-modal-overlay.show {
    opacity: 1;
}

/* ========== MODAL CONTAINER ========== */
.ad-feedback-modal {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 440px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Mobile full-screen */
@media (max-width: 768px) {
    .ad-feedback-modal {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ========== MODAL HEADER ========== */
.ad-feedback-modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    flex-shrink: 0;
}

/* Mobile header adjustments */
@media (max-width: 768px) {
    .ad-feedback-modal-header {
        padding: 20px 16px 12px;
        border-bottom: 1px solid #e8e8e8;
        background: #ffffff;
    }
}

.ad-feedback-modal-header h3 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    text-align: center;
    padding-right: 30px;
}

/* Mobile header text adjustments */
@media (max-width: 768px) {
    .ad-feedback-modal-header h3 {
        font-size: 1.6rem;
        padding-right: 40px;
    }
}

/* ========== CLOSE BUTTON ========== */
.ad-feedback-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 2rem;
    color: #666;
    padding: 0;
    margin: 0;
    transition: all 0.2s ease;
    line-height: 1;
    z-index: 10;
}

/* Mobile close button adjustment */
@media (max-width: 768px) {
    .ad-feedback-close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 2.2rem;
        background: transparent;
    }

    .ad-feedback-close:hover {
        background: transparent;
    }

    .ad-feedback-close:active {
        background: #f5f5f5;
    }
}

.ad-feedback-close:hover {
    background: #e8e8e8;
    color: #333;
}

.ad-feedback-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

/* ========== MODAL BODY ========== */
.ad-feedback-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex-grow: 1;
    background: #fff;
}

/* ========== ADDITIONAL MOBILE SAFE AREA SUPPORT ========== */
/* For devices with notches (iPhone X and newer) */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .ad-feedback-modal-header {
            padding-top: max(20px, env(safe-area-inset-top));
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }

        .ad-feedback-modal-body {
            padding-bottom: max(16px, env(safe-area-inset-bottom));
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }

        .ad-feedback-close {
            top: max(12px, env(safe-area-inset-top));
            right: max(12px, env(safe-area-inset-right));
        }
    }
}

/* ========== FOOTER (if you have one) ========== */
.ad-feedback-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e8e8e8;
    background: #fafafa;
    flex-shrink: 0;
}

/* Mobile footer adjustments */
@media (max-width: 768px) {
    .ad-feedback-modal-body {
        padding: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .ad-feedback-modal-footer {
        padding: 16px;
        border-top: 1px solid #e8e8e8;
        background: #ffffff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
    }

    .ad-feedback-question {
       font-size: 1.4rem;
       padding: 10px 15px !important;
       margin-top: 12px !important;
       margin-bottom: 6px !important;
    }

    .ad-feedback-options {
      padding: 0;
    }
}

/* ========== QUESTION ========== */
.ad-feedback-question {
    margin-bottom: 20px;
    font-size: 1.6rem;
    font-weight: 600;;
    color: #333;
    line-height: 1.5;
    /* text-align: center; */
    padding: 0;
}

/* ========== OPTIONS ========== */
.ad-feedback-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.ad-feedback-option {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 4px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}

.ad-feedback-option:hover {
    font-weight: 600;
}

.ad-feedback-option.selected {
    font-weight: 600;
}

/* Hide default radio button */
.ad-feedback-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom radio indicator */
.ad-feedback-option::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all 0.2s ease;
    background-color: white;
}

.ad-feedback-option.selected::before {
    border-color: var(--primary-color);
    background-color: #fff;
    box-shadow: inset 0 0 0 3px var(--primary-color);;
}

.ad-feedback-option-label {
    flex: 1;
    font-size: 1.4rem;
    color: #333;
    line-height: 1.5;
    font-weight: 400;
}

/* ========== TEXTAREA ========== */
.ad-feedback-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1.4rem;
    color: #333;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: all 0.2s ease;
    background: white;
    margin-top: 16px;
    display: none; /* Hidden by default */
}

.ad-feedback-textarea:focus {
    outline: none;
    /* border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1); */
}

.ad-feedback-textarea::placeholder {
    color: #999;
}

/* Show textarea when "other" is selected */
.ad-feedback-option[data-reason="other"]:checked ~ .ad-feedback-textarea,
.ad-feedback-option.selected[data-reason="other"] ~ .ad-feedback-textarea {
    display: block;
}

/* ========== MODAL FOOTER ========== */
.ad-feedback-modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #e8e8e8;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: white;
    flex-shrink: 0;
}

.ad-feedback-btn {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    min-width: 80px;
    text-align: center;
}

.ad-feedback-submit {
    background: var(--primary-color);
    color: white;
    opacity: 0.6;
    cursor: not-allowed;
    border-color: var(--primary-color);
}

.ad-feedback-submit:not(:disabled) {
    opacity: 1;
    cursor: pointer;
}

.ad-feedback-submit:not(:disabled):hover {
    background: var(--primary-color2);
    border-color: var(--primary-color2);
}

.ad-feedback-submit:disabled {
    background: #cccccc;
    border-color: #cccccc;
    cursor: not-allowed;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
    .ad-feedback-modal-overlay {
        padding: 4px;
        align-items: flex-end;
    }

    .ad-feedback-modal {
        max-height: 85vh;
        margin-bottom: 0;
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        animation: modalSlideUpMobile 0.25s ease;
    }

    @keyframes modalSlideUpMobile {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .ad-feedback-modal-header {
        padding: 20px 20px 16px;
    }

    .ad-feedback-modal-header h3 {
        font-size: 1.7rem;
        padding-right: 40px;
    }

    .ad-feedback-close {
        top: 16px;
        right: 16px;
    }

    .ad-feedback-modal-body {
        padding: 16px 20px 20px;
    }

    .ad-feedback-options {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 4px;
    }

    .ad-feedback-option {
        padding: 12px 14px;
    }

    .ad-feedback-option-label {
        font-size: 1.4rem;
    }

    .ad-feedback-modal-footer {
        padding: 16px 20px;
        flex-direction: column-reverse;
        gap: 10px;
    }

    .ad-feedback-btn {
        width: 100%;
        padding: 12px;
        font-size: 1.5rem;
    }
}

/* ========== ACCESSIBILITY ========== */
.ad-feedback-close:focus-visible,
.ad-feedback-option:focus-visible,
.ad-feedback-btn:focus-visible,
.ad-feedback-textarea:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .ad-feedback-option.selected {
        outline: 2px solid #1a73e8;
        outline-offset: -2px;
    }

    .ad-feedback-btn {
        border-width: 2px;
    }
}


/*  */
/* Base styles */
.prediction-actions {
    display: flex;
    justify-content:space-evenly !important;
    align-items: center !important;
    width: 100%;
    padding: 8px 0;
    gap: 2px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border-radius: 20px;
    border: none;
    /* background: linear-gradient(135deg, #eef2f7, #e2e8f0); */
    background-color: #fff !important;
    color: #6c757d;
    cursor: pointer;
    font-size: 1.2rem !important;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 80px;
}

.action-btn:hover {
    background-color: #f8f9fa;
    color: #495057;
}

.action-btn:hover .action-icon {
    color: #495057;
}

/* ========== BUTTON HOVER STATES ========== */

/* View Details Button */
.view-details-btn:hover {
    background-color: #e3f2fd;
    color: #1976d2;
}

.view-details-btn:hover .action-icon {
    color: #1976d2;
}

/* Like Button States */
.like-btn:hover {
    background: rgba(249, 24, 128, 0.1) !important;
    color: #f91880 !important;
}

.like-btn:hover .action-icon,
.like-btn:hover .action-count {
    color: #f91880 !important;
}

.like-btn.liked {
    color: #e91e63;
}

.like-btn.liked .action-icon,
.like-btn.liked .action-count {
    color: #e91e63;
}

.like-btn.liked .action-count.active {
    font-weight: 600;
}

/* Comment Button */
.comment-btn:hover {
    background-color: #e8f5e9;
    color: #388e3c;
}

.comment-btn:hover .action-icon {
    color: #388e3c;
}

/* Bookmark/Favorite Button */
.bookmark-btn .action-icon,
.bookmark-btn .action-count {
    color: #6c757d;
}

.bookmark-btn:hover .action-icon,
.bookmark-btn:hover .action-count {
    color: #f57c00;
}

.bookmark-btn.bookmarked .action-icon,
.bookmark-btn.bookmarked .action-count {
    color: #f57c00 !important;
}

.bookmark-btn:hover,
.bookmark-btn.bookmarked {
    background-color: #fff3e0;
}

.fas.fa-bookmark {
    color: var(--primary-color);
}

/* ========== ACTION ICON ========== */
.action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #6c757d;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

/* ========== DESKTOP/MOBILE CLASSES ========== */

/* Hide mobile-only elements on desktop */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: flex !important;
    }

    .prediction-actions {
        justify-content: space-between;
    }
}

/* Hide desktop-only elements on mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block;
    }

    .prediction-actions {
        justify-content: space-around;
        padding: 12px 8px;
        gap: 4px;
    }

    .action-btn:not(.overflow-toggle) {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        max-width: 72px;
        padding: 10px 6px;
        border-radius: 16px;
        gap: 2px;
    }

    .action-icon {
        width: 20px;
        height: 20px;
        font-size: 1.6rem;
        margin-bottom: 2px;
    }

    .action-count {
        font-size: 1.2rem;
        font-weight: 600;
        min-width: 24px;
        height: 18px;
        line-height: 1.2;
    }
}

/* ========== OVERFLOW MENU STYLES ========== */
.action-overflow {
    position: relative;
}

.overflow-toggle {
    min-width: 50px !important;
    justify-content: center;
    background: #f8f9fa;
}

.overflow-toggle i {
    font-size: 1.6rem;
    color: #6c757d;
}

.overflow-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 8px;
    min-width: 140px;
    display: none;
    z-index: 1000;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
}

.overflow-menu.show {
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: fadeIn 0.2s ease;
    z-index: 9999 !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Style for buttons inside overflow menu */
.overflow-menu .action-btn {
    min-width: 120px;
    padding: 8px 12px;
    justify-content: flex-start;
    border-radius: 8px;
    background: white;
    gap: 8px;
}

.overflow-menu .action-btn:hover {
    background-color: #f8f9fa;
}

/* Arrow for overflow menu */
.overflow-menu::before {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: white;
    transform: rotate(45deg);
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

/* ========== MOBILE OPTIMIZATION ========== */

/* Small phones optimization */
@media (max-width: 480px) {
    .prediction-actions {
        padding: 10px 4px;
        gap: 2px;
    }

    .action-btn:not(.overflow-toggle) {
        min-width: 56px;
        max-width: 60px;
        padding: 8px 4px;
    }

    .overflow-toggle {
        flex-direction: column;
        min-width: 56px;
        max-width: 60px;
        padding: 8px 4px;
        border-radius: 16px;
    }

    .action-count {
        font-size: 1.1rem;
        min-width: 20px;
    }

    .overflow-menu {
        min-width: 120px;
    }

    .overflow-menu .action-btn {
        min-width: 100px;
        padding: 6px 10px;
    }
}


/* ========== OVERFLOW ACTION BUTTON SPECIFIC STYLES ========== */

/* Optional: Different styling for overflow menu items */
.overflow-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background-color: none;
    color: #333;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    text-align: left;
    transition: background-color 0.2s ease;
}

.overflow-action-btn:hover {
    background-color: #f8f9fa;
}

.overflow-action-btn i {
    width: 20px;
    text-align: center;
    color: #6c757d;
}

.overflow-action-btn:hover i {
    color: #495057;
}

/* Overflow count style */
.overflow-count {
    font-size: 1.3rem;
    font-weight: 500;
    color: #6c757d;
    margin-left: auto;
    min-width: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ========== TRANSITION EFFECTS ========== */

/* Smooth transitions for all interactive elements */
.action-btn,
.action-icon,
.action-count,
.overflow-action-btn,
.overflow-count {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== ACTIVE STATE ENHANCEMENTS ========== */

/* Focus states for accessibility */
.action-btn:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* ========== PRINT STYLES ========== */
@media print {
    .prediction-actions {
        display: none !important;
    }
}

/*  */
/* Overflow action button bookmarked state */
.overflow-action-btn.bookmarked i,
.overflow-action-btn.bookmarked .overflow-count {
    color: #f57c00 !important;
}

.overflow-action-btn.bookmarked:hover {
    background-color: #fff3e0 !important;
}

.overflow-action-btn.bookmarked:hover i {
    color: #f57c00 !important;
}

/* Bookmark hover state */
.overflow-action-btn[data-action="bookmark"]:hover i {
    color: #f57c00 !important;
}

.overflow-action-btn[data-action="bookmark"]:hover {
    background-color: #fff3e0 !important;
}

/* Share hover state */
.overflow-action-btn[data-action="share"]:hover i {
    color: #7b1fa2 !important;
}

.overflow-action-btn[data-action="share"]:hover {
    background-color: #f3e5f5 !important;
}


/*  */
.tl-header,
.adtl-header,
.ntp-header,
.pd-header-container,
.adsc-success-header,
.ib-header,
.adv-header {
  background: linear-gradient(135deg, var(--primary-color2) 0%, var(--primary-color) 100%);
  color: white !important;
  padding: 2.5rem !important;
  border-radius: 0 0 20px 20px !important;
  margin-bottom: 20px !important;
  /* box-shadow: 0 4px 20px rgba(29, 53, 87, 0.15); */
}

.tl-header__container {
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.tl-header__text {
  flex: 1;
}

.tl-header__title {
  font-size: 2.5rem !important;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 1px;
  color: #fff;
}

.tl-header__title-main {
  display: block;
  /* background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%); */
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  background-clip: text;
}

.tl-header__title-secondary {
  display: block;
  color: #4299e1;
  font-size: 2.5rem;
  font-weight: 800;
}

.tl-header__description {
  font-size: 1.25rem;
  color: #f8f8f8;
  line-height: 1.6;
  margin-bottom: 0;
}

.tl-header__tagline,
.adcr-header__tagline {
  display: block;
  margin-top: 0.5rem;
  color: var(--tagline-color);
  font-weight: 600;
}

.tl-header__icon {
  font-size: 4rem;
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  background-clip: text;
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
  .tl-header__container {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .tl-header__title {
    font-size: 2.25rem;
  }

  .tl-header__title-secondary {
    font-size: 2rem;
  }

  .tl-header__description {
    font-size: 1.125rem;
  }

  .tl-header__icon {
    font-size: 3rem;
  }
}

/*  */
/* Header Styles */
.adtl-header {
    /* background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); */
    padding: 2rem 0;
    /* border-bottom: 1px solid #e2e8f0; */
}

.adtl-header__container {
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.adtl-header__text {
    flex: 1;
}

/* Top Row with Title and Button */
.adtl-header__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.adtl-header__title {
    font-size: 3rem !important;
    font-weight: 800;
    line-height: 1.1;
    color: #fff !important;
    margin: 0;
}

.adtl-header__title-main {
    display: inline-block;
    position: relative;
    color: #fff;
}

/* Create Button Styles */
.adtl-header__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff !important;
    color: var(--primary-color2) !important;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    /* box-shadow: 0 4px 12px rgba(66, 153, 225, 0.2); */
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.adtl-header__button .adtl-button__text,
.adtl-header__button i {
    color: var(--primary-color2) !important;
}

.adtl-header__button:hover {
    /* background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%); */
    /* transform: translateY(-2px); */
    /* box-shadow: 0 6px 20px rgba(66, 153, 225, 0.3); */
    color: white !important;
    text-decoration: none;
    opacity: 0.9;
}

.adtl-button__icon {
    font-size: 1.5rem;
}

.adtl-button__text {
    white-space: nowrap;
    color:#fff;
}

/* Description */
.adtl-header__description {
    font-size: 1.35rem !important;
    color: #fff;
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
}

.adtl-header__tagline {
    color: var(--tagline-color);
    font-weight: 600;
}

/* Icon */
.adtl-header__icon {
    font-size: 3.5rem;
    /* background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-color2) 100%); */
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
    margin-top: 0.5rem;
    flex-shrink: 0;
    animation: adtl-float 3s ease-in-out infinite;
}

@keyframes adtl-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .adtl-header__container {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .adtl-header__top-row {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .adtl-header__title {
        font-size: 2.25rem !important;
        width: 100%;
    }

    .adtl-header__title-main::after {
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
    }

    .adtl-header__button {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 1.6rem;
    }

    .adv-dropdown-item {
        font-size: 1.6rem;
    }

    .adv-dropdown-item i {
        font-size: 1.6rem;
    }

    .adtl-header__icon {
        order: 2;
        margin-top: 0;
        font-size: 3rem;
    }

    .adtl-header__description {
        font-size: 1.125rem;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .adtl-header__container {
        padding: 0 2rem;
    }

    .adtl-header__title {
        font-size: 2.25rem !important;
    }

    .adtl-header__icon {
        font-size: 3rem;
    }
}

/* Accessibility */
.adtl-header__button:focus {
    outline: 3px solid rgba(66, 153, 225, 0.5);
    outline-offset: 2px;
}

.adtl-header__button:focus:not(:focus-visible) {
    outline: none;
}

/*  */
/* Minimalist Stats Cards */
.stats-cards-minimal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem 1rem 0 1rem;
}

.stat-card-minimal {
    background-color: white;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.stat-card-minimal__icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-card-minimal__content {
    flex: 1;
}

.stat-card-minimal__value {
    font-size: 1.8rem !important;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
    line-height: 1;
}

.stat-card-minimal__label {
    font-size: 1.4rem !important;
    color: #6b7280;
    font-weight: 500;
}

@media (max-width: 768px) {
    .stats-cards-minimal {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-cards-minimal {
        grid-template-columns: 1fr;
    }
}


/*  */
/* Notifications Page */
.ntp-page {
    min-height: 100vh;
    background-color: #f8f9fa;
    border-radius: var(--container-border-radius);
}

/* Container */
.ntp-container {
    margin: 0 auto;
    padding: 0;
    border-radius: var(--container-border-radius);
}

.ntp-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ntp-header-left {
    flex: 1;
}

.ntp-title {
    margin: 0 0 0.25rem 0;
    font-size: 2.0rem;
    font-weight: 600;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ntp-title i {
    color: #6c757d;
}

.ntp-subtitle {
    margin: 0;
    color: #6c757d;
    font-size: 1.4rem !important;
}

/* Dropdown Styling - Clean and Professional */
.ntp-dropdown {
    position: relative;
    display: inline-block;
}

.ntp-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: white;
    color: #495057;
    font-size: 1.4rem !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.ntp-btn:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.ntp-btn-outline {
    background: transparent;
}

.ntp-btn-sm {
    padding: 0.25rem 1.5rem !important;
    font-size: 1.3rem;
}

.ntp-dropdown-toggle::after {
    display: none;
}

.ntp-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 160px;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.ntp-stats-menu {
  background: var(--primary-color);
  /* border:1px solid var(--primary-color); */
  color:#fff;
}

.ntp-stats-dropdown .ntp-dropdown-toggle {
  background: var(--primary-color2) !important;
  color:#fff;
  border:1px solid var(--primary-color2) !important;
}

.ntp-stats-dropdown .ntp-dropdown-toggle:hover {
  background: var(--primary-color2) !important;
  color:#fff;
  border:1px solid var(--primary-color2) !important;
}

.ntp-dropdown-menu.show {
    display: block;
}

.ntp-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: #212529;
    text-decoration: none;
    font-size: 1.35rem;
    transition: background-color 0.2s ease;
}

.ntp-dropdown-item:hover {
    background-color: #f8f9fa;
}

.ntp-dropdown-item.ntp-active {
    background-color: #e9ecef;
}

/* Stats Dropdown */
.ntp-stats-menu {
    min-width: 200px;
    padding: 1rem;
}

.ntp-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.ntp-stat-item {
    text-align: center;
}

.ntp-stat-value {
    font-size: 1.7rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.125rem;
}

.ntp-stat-label {
    font-size: 1.1rem;
    color: #f8f8f8;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

/* Text Colors */
.ntp-text-warning {
    color: #ffc107 !important;
}

.ntp-text-success {
    color: #198754 !important;
}

.ntp-text-danger {
    color: #dc3545 !important;
}

/* Badges */
.ntp-badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    color: white;
}

.ntp-bg-warning {
    background-color: #ffc107 !important;
}

.ntp-bg-success {
    background-color: #198754 !important;
}

/* Spacing Utilities */
.ntp-ms-1 {
    margin-left: 0.25rem !important;
}

/* Controls */
.ntp-controls {
    margin-bottom: 1.5rem;
}

.ntp-controls-desktop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ntp-controls-mobile {
    display: none;
}

.ntp-mobile-row {
    display: flex;
    gap: 0.5rem;
}

.ntp-form-select {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1.3rem !important;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    appearance: none;
}

.ntp-form-select-sm {
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Notifications List - Consistent with navbar dropdown */
.ntp-list-container {
    background: white;
    /* border: 1px solid #dee2e6; */
    border-radius: var(--container-border-radius) !important;
    /* overflow: hidden; */
}

.ntp-list {
    max-height: 600px;
    overflow-y: auto;
    border-radius: var(--container-border-radius) !important;
}

/* Notification Item - Matches navbar dropdown style */
.ntp-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
    position: relative;
}

.ntp-item:hover {
    background-color: #f8f9fa;
}

.ntp-item:last-child {
    border-bottom: none;
}

.ntp-item.ntp-unread {
    background-color: #f8f9ff;
}

.ntp-item.ntp-unread:hover {
    background-color: #eef2ff;
}

.ntp-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
    color: #6c757d;
}

.ntp-item-content {
    flex: 1;
    min-width: 0;
}

.ntp-item-title {
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
    font-size: 1.4rem;
}

.ntp-item-message {
    color: #495057;
    font-size: 1.35rem;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.ntp-item-time {
    color: #6c757d;
    font-size: 1.2rem !important;
}

.ntp-unread-dot {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0d6efd;
}

/* Action Dropdown for Individual Notifications */
.ntp-item-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ntp-item:hover .ntp-item-actions {
    opacity: 1;
}

.ntp-action-dropdown .ntp-btn {
    padding: 0.125rem 0.25rem;
    border: none;
    background: transparent;
    color: #6c757d;
}

.ntp-action-dropdown .ntp-btn:hover {
    background: transparent;
    color: #495057;
}

.ntp-dropdown-menu-end {
    right: 0;
    left: auto;
}

/* Loading State */
.ntp-loading-state {
    padding: 3rem;
    text-align: center;
    color: #6c757d;
    border-radius: var(--container-border-radius);
}

.ntp-loading-spinner {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #6c757d;
}

.ntp-loading-text {
    margin: 0;
}

/* Empty State */
.ntp-empty-state {
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-radius: var(--container-border-radius);
}

.ntp-empty-icon {
    font-size: 3rem;
    color: #dee2e6;
}

.ntp-empty-title {
    color: #6c757d;
    margin: 0;
    font-weight: 600;
}

.ntp-empty-text {
    color: #adb5bd;
    margin: 0;
}

/* Load More */
.ntp-load-more-container {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid #e9ecef;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ntp-controls-desktop {
        display: none;
    }

    .ntp-controls-mobile {
        display: block;
    }

    .ntp-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .ntp-list {
        max-height: none;
    }

    .ntp-item {
        padding: 0.75rem;
    }

    .ntp-item-actions {
        opacity: 1; /* Always show on mobile */
    }
}

/* Extra notification data */
.ntp-item-extra {
    margin-bottom: 0.5rem;
}

.ntp-match-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.ntp-match-teams {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.ntp-team {
    padding: 0.125rem 0.375rem;
    border-radius: 0.125rem;
    background: white;
}

.ntp-match-vs {
    color: #6c757d;
    font-size: 0.75rem;
}

.ntp-bg-primary {
    background-color: #0d6efd !important;
    color: white !important;
}

.ntp-prediction-result {
    margin-bottom: 0.5rem;
}

.ntp-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.ntp-result-success {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.ntp-result-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Toast Notifications */
.ntp-toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1060;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.ntp-toast.ntp-show {
    transform: translateY(0);
    opacity: 1;
}

.ntp-toast-success {
    border-left: 4px solid #198754;
}

.ntp-toast-error {
    border-left: 4px solid #dc3545;
}

.ntp-toast-info {
    border-left: 4px solid #0dcaf0;
}

.ntp-toast-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ntp-toast-content i {
    font-size: 1.25rem;
}

.ntp-toast-success .ntp-toast-content i {
    color: #198754;
}

.ntp-toast-error .ntp-toast-content i {
    color: #dc3545;
}

.ntp-toast-info .ntp-toast-content i {
    color: #0dcaf0;
}


/*  */
/* Professional Edit Header */
.ed-header--professional {
    /* background: linear-gradient(135deg, #ffffff 0%, var(--primary-color) 100%); */
    border-bottom: 1px solid #e2e8f0;
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

/* .ed-header--professional::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4299e1, #38b2ac);
} */

.ed-header__container {
    margin: 0 auto;
    padding: 0 1.5rem;
}

.ed-header__main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ed-header__title-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.ed-header__title-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 300px;
}

.ed-header__icon-wrapper {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.2);
}

.ed-header__icon {
    font-size: 1.5rem;
    color: white;
}

.ed-header__title {
    font-size: 2rem;
    font-weight: 800;
    color: #2d3748;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ed-header__title-text {
    display: inline-block;
    position: relative;
}

/* .ed-header__title-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #4299e1, transparent);
    border-radius: 1px;
} */

.ed-header__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.ed-header__badge--editing {
    background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(237, 137, 54, 0.2);
}

.ed-header__subtitle {
    font-size: 1.125rem;
    color: #718096;
    line-height: 1.5;
    margin: 0;
    max-width: 600px;
}

.ed-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: #edf2f7;
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.ed-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
}

.ed-meta-icon {
    color: #4299e1;
    font-size: 0.875rem;
}

.ed-meta-label {
    color: #718096;
    font-weight: 500;
}

.ed-meta-value {
    color: #2d3748;
    font-weight: 600;
}

.ed-meta-value--good {
    color: #38a169;
}

.ed-header__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
}

.ed-action-group {
    display: flex;
    gap: 0.75rem;
    /* margin-left: auto; */
}

.ed-btn__icon {
    font-size: 0.875rem;
}

.ed-btn--secondary {
    background: #f7fafc !important;
    padding: 10px 20px !important;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ed-btn--secondary:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #4a5568;
}

.ed-btn--primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.2);
}

.ed-btn-primary:hover {
    /* background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%); */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .ed-header__title-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .ed-header__icon-wrapper {
        width: 48px;
        height: 48px;
    }

    .ed-header__title {
        font-size: 1.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .ed-header__title-text::after {
        width: 80px;
    }

    .ed-header__meta {
        width: 100%;
        justify-content: center;
    }

    .ed-header__actions {
        flex-direction: column;
        gap: 1rem;
    }

    .ed-action-group {
        width: 100%;
        justify-content: stretch;
    }

    .ed-btn {
        flex: 1;
        justify-content: center;
    }
}

/* Emoji styles (consistent with Find Tips/Add Ad) */
.ed-header__emoji {
    font-size: 3rem;
    line-height: 1;
    margin-right: 1rem;
    flex-shrink: 0;
    animation: ed-float 3s ease-in-out infinite;
}

/* Meta emojis */
.ed-meta-emoji {
    font-size: 1rem;
    margin-right: 0.5rem;
    opacity: 0.7;
}

/* Button emojis */
.ed-btn__emoji {
    font-size: 1rem;
    margin-right: 0.5rem;
}

/* Remove the old icon wrapper styles */
.ed-header__icon-wrapper {
    /* Remove background, border, etc. */
    background: none;
    border: none;
    box-shadow: none;
    width: auto;
    height: auto;
    display: inline;
}

/* Float animation for emoji */
@keyframes ed-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/*  */
/* All headers have subtle animation */
.tl-header__icon { /* Find Tips */
    animation: float 3s ease-in-out infinite;
}

.adtl-header__icon { /* Add Ad */
    animation: float 3s ease-in-out infinite;
}

.ed-header__emoji { /* Edit Ad */
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/*  */
/* Consistent with other headers */
.adcr-header {
    background: var(--header-bg-color);
    padding: 3rem;
    border-bottom: 1px solid #e2e8f0;
    border-radius: var(--container-border-radius);
    margin-bottom: var(--header-margin-bottom) !important;
}

.adcr-header__container {
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.adcr-header__text {
    flex: 1;
}

.adcr-header__title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: #2d3748;
    margin-bottom: 0.75rem;
}

.adcr-header__title-main {
    display: block;
    color: #2d3748;
}

.adcr-header__title-accent {
    display: block;
    color: #4299e1;
    font-size: 2.2rem;
    font-weight: 800;
}

.adcr-header__description {
    font-size: 1.125rem;
    color: #718096;
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
}

.adcr-header__highlight {
    color: #2d3748;
    font-weight: 600;
    position: relative;
}

.adcr-header__highlight::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #4299e1, transparent);
    border-radius: 1px;
}

.adcr-header__icon {
    font-size: 3.5rem;
    /* background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); */
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
    margin-top: 0.5rem;
    flex-shrink: 0;
    animation: adcr-float 3s ease-in-out infinite;
}

@keyframes adcr-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .adcr-header__container {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .adcr-header__title {
        font-size: 2rem;
    }

    .adcr-header__title-accent {
        font-size: 1.8rem;
    }

    .adcr-header__icon {
        order: 2;
        margin-top: 0;
        font-size: 3rem;
        align-self: center;
    }

    .adcr-header__description {
        font-size: 1rem;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .adcr-header__container {
        padding: 0 2rem;
    }

    .adcr-header__title {
        font-size: 2.25rem;
    }

    .adcr-header__icon {
        font-size: 3rem;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .adcr-header {
        background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
        border-bottom-color: #4a5568;
    }

    .adcr-header__title {
        color: #f7fafc;
    }

    .adcr-header__title-main {
        color: #f7fafc;
    }

    .adcr-header__description {
        color: #cbd5e0;
    }

    .adcr-header__highlight {
        color: #e2e8f0;
    }
}


/*  */
/* Additional styles for the information page */
.adcr-quick-nav .adcr-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.adcr-quick-nav .adcr-nav-link:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
}

.adcr-quick-nav .adcr-nav-link i {
    color: #0d6efd;
}

.adcr-section {
    scroll-margin-top: 30px;
}

.adcr-card {
    background: white;
    border-radius: 12px;
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.08); */
    margin-bottom: 20px;
    /* border: 1px solid #e9ecef; */
}

.adcr-card-header {
    padding: 0px 25px;
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    /* color: white; */
    border-radius: 12px 12px 0 0 !important;
}

.adcr-card-header h3 {
    margin: 0;
    font-size: 1.6rem;
}

.adcr-card-body {
    padding: 25px;
}

.adcr-card-body i {
  color: var(--primary-color) !important;
}

.adcr-process-steps {
    position: relative;
}

.adcr-process-steps:before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #667eea, #764ba2);
}

.adcr-process-step {
    display: flex;
    margin-bottom: 30px;
    position: relative;
}

.adcr-step-content,
.content-step {
    padding-top: 10px;
}

.adcr-step-content h5,
.content-step h5 {
    color: #282828;
    margin-bottom: 8px;
    font-weight: 600 !important;
}

.adcr-step-content p,
.content-step p {
    color: #666;
    margin: 0;
}

.adcr-guideline {
    display: flex;
    align-items: flex-start;
    height: 100%;
}

.adcr-guideline-icon {
    font-size: 1.8rem;
    margin-right: 15px;
    margin-top: 5px;
}

.adcr-guideline-content h5 {
    color: #333;
    margin-bottom: 10px;
}

.adcr-guideline-content ul {
    padding-left: 20px;
    margin-bottom: 0;
}

.adcr-guideline-content li {
    margin-bottom: 5px;
    color: #555;
}

.adcr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.adcr-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    padding: 15px;
    border-bottom: 2px solid #dee2e6;
    font-size: 1.4rem !important;
}

.adcr-table td {
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.adcr-table tbody tr:hover {
    background-color: #f8f9fa;
}

.adcr-plan-recommendation .adcr-alert {
    border-left: 4px solid #28a745;
}

.adcr-cta-section .adcr-btn {
    padding: 12px 30px;
    font-size: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .adcr-process-steps:before {
        left: 20px;
    }

    .adcr-table {
        display: block;
        overflow-x: auto;
    }
}


/* Reuse existing styles */
.adcr-stat-card {
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.adcr-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.adcr-stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 5px;
}

.adcr-stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Category Cards */
.adcr-category-card {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    height: 100%;
    transition: transform 0.3s ease;
}

.adcr-category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.adcr-category-card__icon {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-right: 15px;
    margin-top: 5px;
}

.adcr-category-card__content h5 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.adcr-category-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.adcr-category-list li {
    padding: 5px 0;
    color: #666;
    font-size: 1.3rem !important;
}

/* Targeting Cards */
.adcr-targeting-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    height: 100%;
    transition: transform 0.3s ease;
}

.adcr-targeting-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.adcr-targeting-card__header {
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
}

.adcr-targeting-card__header h5 {
    margin: 0;
    color: #333;
    font-size: 1.4rem;
}

.adcr-targeting-card__header i {
  color: var(--primary-color) !important;
}

.adcr-targeting-card__body {
    padding: 15px;
}

.adcr-targeting-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.adcr-targeting-chip {
    background: #e9ecef;
    color: #495057;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 1.25rem !important;
    transition: all 0.3s ease;
}

.adcr-targeting-chip:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

/* Policy List */
.adcr-policy-list {
    list-style-type: none;
    padding-left: 0;
}

.adcr-policy-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    color: #666;
}

/* Practice Cards */
.adcr-practice-card {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    height: 100%;
    transition: transform 0.3s ease;
}

.adcr-practice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.adcr-practice-card__icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-right: 15px;
    margin-top: 5px;
}

.adcr-practice-card__content h5 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.45rem !important;
}

.adcr-practice-card__content p {
    color: #666;
    margin: 0;
    font-size: 1.35rem !important;
}

/* Alert Styles */
.adcr-alert {
    border-radius: 8px;
    border: none;
    padding: 15px 20px;
}

.adcr-alert a.alert-link {
    color: var(--success-color);
    font-weight: 600;
    text-decoration: none;
}

.adcr-alert a.alert-link:hover {
    text-decoration: underline;
}

/* CTA Buttons */
.adcr-btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.adcr-btn-outline:hover {
    color: var(--primary-color) !important;
    opacity: 0.9;
}

/* Quick Navigation */
.adcr-quick-nav .adcr-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.adcr-quick-nav .adcr-nav-link:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    color: #0d6efd;
}

.adcr-quick-nav .adcr-nav-link i {
    color: #0d6efd;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .adcr-stat-number {
        font-size: 2rem;
    }

    .adcr-category-card,
    .adcr-practice-card {
        padding: 15px;
    }

    .adcr-targeting-chips {
        gap: 6px;
    }

    .adcr-targeting-chip {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
}

/* Reuse existing styles from ads info page */
.adcr-policies-container {
    padding-top: 0;
}

.adcr-policy-item {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    height: 100%;
    margin-bottom: 2px;
    transition: transform 0.3s ease;
}

.adcr-policy-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.adcr-policy-item__icon {
    font-size: 1.5rem;
    margin-right: 15px;
    margin-top: 5px;
}

.adcr-policy-item__content h5 {
    color: #333;
    margin-bottom: 8px;
    font-size: 1.45rem !important;
}

.adcr-policy-item__content p {
    color: #666;
    margin: 0;
    font-size: 1.25rem !important;
}

.adcr-policy-list {
    list-style-type: none;
    padding-left: 0;
}

.adcr-policy-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #555;
}

.adcr-policy-list li:before {
    content: '•';
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.adcr-policy-list ol {
    counter-reset: item;
    padding-left: 0;
}

.adcr-policy-list ol li {
    counter-increment: item;
    margin-bottom: 10px;
}

.adcr-policy-list ol li:before {
    content: counter(item) ".";
    color: #0d6efd;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.adcr-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 1.2rem !important;
    font-weight: 600;
}

.adcr-badge-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.adcr-info-card {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    height: 100%;
}

.adcr-info-card__icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.adcr-info-card__content h6 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.4rem !important;
}

.adcr-info-card__content p {
    color: #666;
    font-size: 1.25rem !important;
    margin: 0;
}

.adcr-warning-card {
    text-align: center;
    padding: 20px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    height: 100%;
}

.adcr-warning-card__icon {
    font-size: 2rem;
    color: #856404;
    margin-bottom: 15px;
}

.adcr-warning-card__content h6 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.5rem !important;
}

.adcr-warning-card__content p {
    color: #856404;
    font-size: 1.25rem !important;
    margin: 0;
}

.adcr-table-responsive {
    overflow-x: auto;
}

.adcr-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.adcr-table td {
    vertical-align: middle;
}

/* Process steps */
.adcr-process-steps {
    position: relative;
    margin: 30px 0;
}

.adcr-process-steps:before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #667eea, #764ba2);
}

.adcr-process-step {
    display: flex;
    margin-bottom: 25px;
    position: relative;
}

.adcr-step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%) !important;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
    z-index: 1;
}

.adcr-step-content h6,
.content-step h6 {
    color: #282828 !important;
    margin-bottom: 5px;
    font-weight: 600 !important;
}

.adcr-step-content p,
.content-step p {
    color: #333;
    margin: 0;
    font-size: 1.2rem !important;
}

/* Alert styles */
.adcr-alert {
    border-radius: 8px;
    border: none;
    padding: 15px 20px;
}

.adcr-alert i {
    font-size: 1.2rem;
}

/* Quick nav */
.adcr-quick-nav .adcr-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.adcr-quick-nav .adcr-nav-link:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    color: #0d6efd;
}

.adcr-quick-nav .adcr-nav-link i {
    color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .adcr-process-steps:before {
        left: 20px;
    }

    .adcr-step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .adcr-policy-item {
        padding: 12px;
    }

    .adcr-policy-item__icon {
        font-size: 1.2rem;
    }
}


/*  */
/* Improved stats scrollbar */
.scroll-container {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 8px;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.scroll-container::-webkit-scrollbar {
    height: 4px;
}

.scroll-container::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 2px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

/* Scroll indicators */
.scroll-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.scroll-container:hover .scroll-indicator {
    opacity: 0.7;
}

.scroll-indicator:hover {
    opacity: 1 !important;
    background: #f8f9fa;
}

.left-indicator {
    left: 8px;
}

.right-indicator {
    right: 8px;
}

.scroll-indicator i {
    font-size: 1.2rem;
    color: #666;
}

/* Stats items layout */
.prediction-stats {
    display: flex;
    gap: 16px;
    padding: 0 16px;
    min-width: max-content;
}

.sta-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    flex-shrink: 0;
}

.sta-stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    line-height: 1;
    margin-bottom: 2px;
}

.sta-stat-label {
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    white-space: nowrap;
}

/* Action button states */
.pd-action-btn {
    transition: all 0.2s ease;
}

.pd-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pd-like-btn.active {
    color: #ff6961 !important;
}

.pd-like-btn.active i {
    animation: heartBeat 0.3s ease;
}

.pd-fav-btn.active {
    color: #f59e0b !important;
}

.pd-fav-btn.active i {
    animation: bounce 0.3s ease;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

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

/* Loading state for actions */
.pd-action-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.pd-action-btn.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/*  */
.jpt-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jpt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.jpt-header {
    position: relative;
}

.jpt-badge {
    position: absolute;
    top: -8px;
    right: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.jpt-badge-text {
    display: inline-block;
    animation: jpt-pulse 1.5s infinite;
}

@keyframes jpt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.jpt-meta {
    margin-top: 8px;
}

.jpt-title-container {
    margin-bottom: 20px;
}

.jpt-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 8px 0;
    line-height: 1.2;
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jpt-title-text {
    display: inline-block;
}

.jpt-title-underline {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
}

.jpt-date-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f1f5f9;
    border-radius: 10px;
    border-left: 4px solid #667eea;
}

.jpt-date-icon {
    color: #667eea;
    display: flex;
    align-items: center;
}

.jpt-date-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jpt-date-label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

.jpt-date-value {
    font-size: 1rem;
    color: #1e293b;
    font-weight: 600;
}

/* Responsive design */
@media (max-width: 640px) {
    .jpt-card {
        padding: 20px;
    }

    .jpt-title {
        font-size: 1.5rem;
    }

    .jpt-badge {
        position: relative;
        top: 0;
        display: inline-block;
        margin-bottom: 16px;
    }
}

/* Optional utility classes with jpt- prefix */
.jpt-loading {
    color: #94a3b8;
    font-style: italic;
}

.jpt-highlight {
    background-color: #fef3c7;
    color: #92400e;
    padding: 2px 6px;
    border-radius: 4px;
}

.jpt-warning {
    background-color: #fef2f2;
    color: #dc2626;
    border-left: 4px solid #dc2626;
}

.jpt-success {
    background-color: #f0fdf4;
    color: #16a34a;
    border-left: 4px solid #16a34a;
}


/*  */
/* Other Information Menu Styles */
.about-menu {
    background: #fff;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid #f8f8f8;
    margin-bottom: 10px;
    justify-content:space-evenly !important;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
    /* z-index: 1000; */
}

.about-menu-container {
    margin: 0 auto;
    padding: 0 40px;
}

.about-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}

.about-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 1.5rem;
}

.about-brand i {
    margin-right: 0.5rem;
    font-size: 1.5rem;
}

.about-nav-items {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.about-nav-item {
    margin: 0 0.5rem;
}

.about-nav-link {
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    font-size: 1.3rem;
}

.about-nav-link i {
    margin-right: 0.5rem;
}

.about-nav-link:hover {
    color: var(--primary-color);
    background-color: #f1f5f9;
}

.about-nav-link.active {
    color: var(--primary-color);
    background-color: #eff6ff;
    font-weight: 600;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #1e293b;
    cursor: pointer;
    padding: 0.5rem;
}

/* Page Content Styles - Show/hide based on active page */
.page-content {
    display: none;
}

.page-content.active {
    display: block;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .about-nav {
        flex-wrap: wrap;
    }

    .menu-toggle {
        display: block;
    }

    .about-nav-items {
        flex-direction: column;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .about-nav-items.show {
        max-height: 500px;
        margin-top: 1rem;
    }

    .about-nav-item {
        margin: 0.25rem 0;
        width: 100%;
    }

    .about-nav-link {
        padding: 0.75rem 1rem;
        width: 100%;
        border-radius: 8px;
    }

    .about-brand span {
        font-size: 1.4rem;
    }
}


/*  */
/* Header Container */
.pd-header-container {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

/* Optional subtle background pattern */
.pd-header-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 123, 255, 0.03) 0%, transparent 70%);
    z-index: 0;
}

/* Header Content Layout */
.pd-header-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 16px;
    align-items: start;
}

/* Badge Positioning */
.pd-header-badge {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Badge States */
.pd-header-badge.loading {
    background: linear-gradient(135deg, #adb5bd 0%, #6c757d 100%);
}

.pd-header-badge.current {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}

.pd-header-badge.past {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}

.pd-header-badge.hot {
    background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.pd-badge-icon {
    font-size: 1.0rem;
}

/* Title Section */
.pd-header-title-group {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.pd-title-wrapper {
    margin-bottom: 8px;
}

.pd-main-title {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-title-underline {
    width: 60px;
    height: 3px;
    margin-top: 4px;
}

/* Meta Information */
.pd-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-top: 8px;
}

.pd-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.4rem;
    color: #6c757d;
}

.pd-meta-icon {
    font-size: 1.2rem;
    color: #007bff;
    width: 16px;
    text-align: center;
}

.pd-meta-label {
    font-weight: 500;
    color: #fff !important;
    font-size: 1.2rem;
}

.pd-meta-value {
    font-weight: 600;
    color: #fff;
    text-align: center;
    font-size: 1.1rem !important;
}

/* Actions Toolbar */
.pd-header-actions {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    display: flex;
    gap: 8px;
}

/* Loading State */
.pd-main-title.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
    height: 28px;
    width: 250px;
}

.pd-meta-value.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border: none;
    height: 20px;
    min-width: 120px;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .pd-header-container {
        padding: 16px;
    }

    .pd-header-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 12px;
    }

    .pd-header-badge {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        margin-top: 4px;
    }

    .pd-header-title-group {
        grid-column: 1;
        grid-row: 1;
    }

    .pd-header-actions {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        margin-top: 8px;
    }

    .pd-main-title {
        font-size: 2rem;
    }

    .pd-meta-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .pd-meta-value {
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .pd-header-container {
        padding: 12px;
    }

    .pd-main-title {
        font-size: 1.8rem;
    }

    .pd-meta-item {
        font-size: 1.3rem;
    }

    .pd-meta-value {
        font-size: 1.3rem;
        min-width: 90px;
    }

    .pd-header-actions {
        width: 100%;
        justify-content: center;
    }
}

/*  */
.ft-form-row {
    margin-bottom: 0;
}

.ft-form-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.ft-input-with-button {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ft-form-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1.3rem !important;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.ft-form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ft-search-btn {
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.3rem !important;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ft-search-btn:hover {
    opacity: 0.9;
}

/* Responsive for smaller screens */
@media (max-width: 640px) {
    .ft-input-with-button {
        flex-direction: column;
        align-items: stretch;
    }

    .ft-search-btn {
        width: 100%;
        justify-content: center;
    }
}

/*  */
.adsc-success-container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.adsc-success-header {
    color: white;
    text-align: center;
}

.adsc-checkmark-circle {
    width: 70px;
    height: 70px;
    background: green;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.adsc-checkmark {
    color: #fff;
    font-size: 3.2rem;
}

.adsc-success-header h1 {
    font-size: 2.3rem;
    margin-bottom: 2px;
    font-weight: 700 !important;
    color:#f8f8f8;
}

.adsc-success-header p {
    font-size: 1.2rem;
    opacity: 0.95;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
    color:#F5F5F5;
}

.adsc-content-wrapper {
    padding: 15px;
}

/* Payment Details Section */
.adsc-payment-details-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #e2e8f0;
}

.adsc-payment-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    padding: 12px 0;
    margin: 0;
}

.adsc-payment-header:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.adsc-payment-header h2 {
    font-size: 1.45rem;
    color: #10b981;
    font-weight: 600;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.adsc-payment-header h2 i {
    color: #10b981;
}

.adsc-toggle-icon {
    font-size: 1.5rem;
    color: #64748b;
    transition: transform 0.3s ease;
}

.adsc-payment-header .fa-receipt {
  font-size: 1.8rem !important;
}

.adsc-payment-header.active .adsc-toggle-icon {
    transform: rotate(180deg);
}

.adsc-payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    transition: max-height 0.5s ease, opacity 0.3s ease, margin-top 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
}

.adsc-payment-grid.show {
    max-height: 500px;
    opacity: 1;
    margin-top: 20px;
}

.adsc-payment-item {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}

.adsc-payment-item:last-child {
    border-bottom: none;
}

.adsc-payment-label {
    font-size: 1.15rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 4px;
}

.adsc-payment-value {
    font-size: 1.30rem;
    color: #1e293b;
    font-weight: 600;
}

.adsc-status-badge {
    display: inline-block;
    background: #d1fae5;
    color: #065f46 !important;
    text-transform: capitalize;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 1.15rem !important;
    font-weight: 600;
    width: fit-content;
}

/* Campaign Info Section */
.adsc-campaign-info {
    transition: max-height 0.5s ease, opacity 0.3s ease, margin-top 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
}

.adsc-campaign-info.show {
    max-height: 280px; /* Increased to accommodate header */
    opacity: 1;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #e2e8f0;
}

/* Campaign Header - Separate row */
.adsc-campaign-header {
    margin-bottom: 20px; /* Space between header and grid */
    display: block; /* Ensures it's on its own row */
    width: 100%;
}

.adsc-campaign-header h3 {
    font-size: 1.4rem;
    color: #475569;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.adsc-campaign-header h3 i {
    color: #8b5cf6;
}

/* Campaign Grid - Only for the 4 items, separate from header */
.adsc-campaign-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
}

.adsc-campaign-item {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}

/* Remove borders for 2nd and 4th items in desktop view */
.adsc-campaign-item:nth-child(2),
.adsc-campaign-item:nth-child(4) {
    border-bottom: none;
}

/* Adjust padding for items in second row */
.adsc-campaign-item:nth-child(3),
.adsc-campaign-item:nth-child(4) {
    padding-top: 0;
}

.adsc-campaign-label {
    font-size: 1.15rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 4px;
}

.adsc-campaign-value {
    font-size: 1.3rem;
    color: #1e293b;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .adsc-campaign-info.show {
        max-height: 350px; /* Increased for mobile */
    }

    .adsc-campaign-grid {
        grid-template-columns: 1fr;
    }

    .adsc-campaign-item {
        border-bottom: 1px solid #e2e8f0;
        padding: 2px 0;
    }

    /* Reset borders for mobile single column */
    .adsc-campaign-item:nth-child(2),
    .adsc-campaign-item:nth-child(3) {
        border-bottom: 1px solid #e2e8f0;
    }

    .adsc-campaign-item:nth-child(4) {
        border-bottom: none;
    }

    /* Reset padding for mobile */
    .adsc-campaign-item:nth-child(3),
    .adsc-campaign-item:nth-child(4) {
        padding-top: 12px;
    }

    .adsc-campaign-header {
        margin-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .adsc-campaign-header h3 {
        font-size: 1.1rem;
    }

    .adsc-campaign-info.show {
        max-height: 370px;
    }
}

/* Action Buttons Section */
.adsc-action-section {
    margin-bottom: 32px;
}

.adsc-action-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 0 auto;
}

.adsc-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 50px !important;
    font-weight: 500;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    text-decoration: none;
    min-height: 52px;
}

.adsc-btn-dashboard {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: white !important;
}

.adsc-btn-dashboard:hover {
    opacity: 0.9;
    color: white !important;
}

.adsc-btn-print {
    background: white;
    color: #475569;
    border: 2px solid #e2e8f0;
}

.adsc-btn-print:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    opacity: 0.9;
}

/* Help Section */
.adsc-help-section {
    background: #f0f9ff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #bae6fd;
}

.adsc-help-note {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.adsc-help-icon {
    width: 36px;
    height: 36px;
    background: var(--secondary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.adsc-help-icon i {
    color: white;
    font-size: 1.1rem;
}

.adsc-help-content {
    flex: 1;
}

.adsc-help-content h3 {
    font-size: 1.3rem;
    color: #0c4a6e;
    margin: 0 0 6px 0;
    font-weight: 600;
}

.adsc-help-content p {
    margin: 0;
    color: #0c4a6e;
    font-size: 1.15rem;
    line-height: 1.5;
}

.adsc-help-content a {
    color: var(--secondary-color);
    font-weight: 600;
    text-decoration: none;
}

.adsc-help-content a:hover {
    text-decoration: underline;
}

.adsc-status-update-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    color: #333;
}

.adsc-status-update-content p {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 1.225rem;
}

.adsc-status-update-content ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.adsc-status-update-content ul li {
    padding: 5px 0;
    color: #555;
    font-size: 1.175rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.adsc-status-update-content ul li i {
    color: #28a745;
}

.adsc-status-update-section {
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid #ffc107;
}

.adsc-status-update-note {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.adsc-status-update-icon {
    font-size: 2.0rem !important;
    color: #ffc107;
    margin-top: 5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .adsc-success-header {
        padding: 30px 20px;
    }

    .adsc-content-wrapper {
        padding: 30px 20px;
    }

    .adsc-payment-details-section {
        padding: 20px;
    }

    .adsc-payment-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .adsc-campaign-details {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .adsc-action-buttons {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .adsc-campaign-info.show {
        max-height: 250px;
    }
}

@media (max-width: 480px) {
    .adsc-success-header h1 {
        font-size: 1.7rem;
    }

    .adsc-success-header p {
        font-size: 1rem;
    }

    .adsc-checkmark-circle {
        width: 60px;
        height: 60px;
    }

    .adsc-checkmark {
        font-size: 2.8rem;
    }

    .adsc-payment-header h2 {
        font-size: 1.2rem;
    }

    .adsc-action-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
}

/*  */
.adcr-banner-placeholder {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: #6c757d;
    min-height: 150px;
}

.adcr-banner-placeholder i {
    font-size: 3rem;
    margin-bottom: 10px;
    color: #adb5bd;
}

#adcr-mobileBannerPreview img {
    border-radius: 8px 8px 0 0;
}

.modal-payment-content .modal-header h3 {
  font-size: 1.8rem !important;
}

.modal-payment-content .payment-summary {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  margin: 12px;
}

.modal-payment-content .payment-summary h4 {
  font-size: 1.4rem !important;
}

.modal-payment-content .payment-summary span,
.modal-payment-content .payment-summary strong {
  font-size: 1.3rem !important;
}

.modal-payment-content .modal-footer button {
  font-size: 1.4rem !important;
}

.adsc-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.adsc-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: adsc-spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes adsc-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.adsc-status-success {
    background-color: #d4edda;
    color: #155724;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85em;
}

.adsc-status-pending {
    background-color: #fff3cd;
    color: #856404;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85em;
}

.adsc-status-failed {
    background-color: #f8d7da;
    color: #721c24;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85em;
}

.adsc-checkmark-circle.adsc-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.adsc-checkmark-circle.adsc-error .adsc-checkmark {
    color: #721c24;
}

/*  */
.js-cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
    z-index: 9999;
}

.js-cookie-consent button {
    background-color: var(--primary-color2);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    margin-left: 1rem;
    cursor: pointer;
    border-radius: 4px;
}

.js-cookie-consent button:hover {
  opacity: 0.9;
}

p.cookie-consent__message {
  line-height: 2.2rem !important;
  margin-bottom: 10px;
}

.cookie-consent__message a {
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.cookie-consent__message a:hover {
  color: var(--primary-color2);
}

@media (max-width: 768px) {
  .js-cookie-consent {
     margin-bottom:80px;
  }

  .cookie-consent__message {
     font-size: 1.2rem;
  }

  .cookie-consent__agree {
    font-size: 1.3rem;
  }
}

/*  */
.adsc-status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
}

.adsc-status-success {
    background: #d4edda;
    color: #155724;
}

.adsc-status-pending {
    background: #fff3cd;
    color: #856404;
}

.adsc-status-failed {
    background: #f8d7da;
    color: #721c24;
}

.adsc-status-completed {
    background: #cce5ff;
    color: #004085;
}

.adsc-status-other {
    background: #e2e3e5;
    color: #383d41;
}

.adsc-performance-section {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.adsc-performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.adsc-performance-item {
    text-align: center;
    padding: 15px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.adsc-performance-label {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 5px;
}

.adsc-performance-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
}

/*  */
.modal-comments-section {
    margin-top: 20px;
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
}

.modal-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.modal-comments-header h4 {
    margin: 0;
    font-size: 1.8rem;
    color: #333;
}

.modal-comment-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}

.modal-comments-list {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 15px;
}

.modal-comment {
    background: white;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e5e7eb;
}

.modal-comment-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
}

.modal-comment-post-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.modal-comment-post-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.modal-comment-post-btn:hover:not(:disabled) {
    background: #2563eb;
}

.modal-reply-box {
    margin-top: 10px;
    padding: 10px;
    background: #f1f5f9;
    border-radius: 4px;
}

.modal-replies-container {
    margin-top: 10px;
    margin-left: 20px;
    border-left: 2px solid #e5e7eb;
    padding-left: 15px;
}

/*  */
/* Add basic styles if missing */
.predictions-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0;
}

.prediction-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
}

.empty-state {
    text-align: center;
    padding: 10px 20px;
    color: #666;
}

.empty-state .empty-icon {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 20px;
}

.load-more-container {
    text-align: center;
    margin: 30px 0;
}

.btn-load-more {
    padding: 12px 30px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.6rem;
}

.btn-load-more:hover {
    background: #0056b3;
}

/*  */
/* Modal Backdrop Styles */
.modal.comments-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1000 !important;
    align-items: center;
    justify-content: center;
    padding: 20px !important;
    box-sizing: border-box;
}

.modal-content.modal-payment-content {
  height: 55vh !important;
}

/* Modal Body */
.comments-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Comment Input Section */
.comment-input-section {
    padding: 10px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.comments-modal .c-comment-box {
    background: white;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.comments-modal .comment-meta {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.comments-modal .comment-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comments-modal .c-profile-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.comments-modal .comment-username {
    font-weight: 600;
    color: #333;
    font-size: 1.4rem;
}

.comments-modal .comment-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 150px;
    padding: 12px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    resize: vertical;
    font-size: 0.95rem;
    line-height: 1.5;
    transition: border 0.2s ease;
}

.comments-modal .comment-textarea:focus {
    outline: none;
    border: 1px solid var(--primary-color);
}

.comments-modal .comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

/* Comments Thread */
.comment-thread {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    max-height: 50vh;
}

/* Loading States */
.loading-comments {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #6c757d;
    font-size: 0.95rem;
}

.empty-comments {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

.empty-comments-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.comment-error {
    text-align: center;
    padding: 20px;
    color: #dc3545;
    font-size: 0.95rem;
}

.comment-error i {
    font-size: 24px;
    margin-bottom: 10px;
    color: #dc3545;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .comment-input-section {
        padding: 8px;
    }

    .comments-modal .c-comment-box {
        padding: 12px;
    }

    .comments-modal .c-profile-img {
        width: 32px;
        height: 32px;
    }

    .comments-modal .comment-textarea {
        min-height: 70px;
        font-size: 0.9rem;
        padding: 10px;
    }

    .comment-content p {
       font-size: 1.3rem !important;
    }

    .comment-thread {
        padding: 16px;
        max-height: 45vh;
    }
}

@media (max-width: 480px) {
    .comment-thread {
        max-height: calc(100vh - 250px);
    }
}

/* Scrollbar Styling */
.comment-thread::-webkit-scrollbar {
    width: 6px;
}

.comment-thread::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.comment-thread::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.comment-thread::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.badge.jp-status {
  font-size: 1.0rem !important;
}

.jp-badge {
  font-size: 1.0rem !important;
}

/*  */
/* Ellipsis Menu Styles - Positioned for each card */
.prediction-card {
    position: relative; /* Add this for positioning context */
    /* Keep your existing card styles */
}

.ellipsis-menu {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.ellipsis-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    font-size: 1.4rem;
}

.ellipsis-btn:hover {
    background: #f5f5f5;
    color: #333;
    border-color: #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.ellipsis-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 1000;
    display: none;
    margin-top: 5px;
    animation: fadeIn 0.2s ease;
}

.ellipsis-dropdown.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1.5rem;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
    font-size: 1.4rem;
}

/* Color coding for different actions */
.dropdown-item.save-prediction i { color: #28a745; }
.dropdown-item.report-prediction i { color: #dc3545; }
.dropdown-item.copy-link i { color: #17a2b8; }
.dropdown-item.share-prediction i { color: #007bff; }
.dropdown-item.edit-prediction i { color: #6c757d; }
.dropdown-item.delete-prediction i { color: #dc3545; }

/*  */
/* Ellipsis Menu Styles */
.prediction-card {
    position: relative;
}

.ellipsis-menu {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.ellipsis-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    font-size: 1.4rem;
}

.ellipsis-btn:hover {
    background: #f5f5f5;
    color: #333;
    border-color: #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.ellipsis-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 1000;
    display: none;
    margin-top: 5px;
}

.ellipsis-dropdown.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1.4rem;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.drop-down-action-count {
  background: #f8f8f8;
}

.dropdown-item:hover .drop-down-action-count {
  background: #f2f2f2;
}

.dropdown-item i {
    width: 20px;
    margin-right: 4px;
    text-align: center;
    font-size: 1.4rem;
}

.bookmark-action-item {
  background-color: yellow;
}

/*  */
.btk-jackpot-tag,
.sp-jackpot-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px !important;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-size: 1.2rem !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btk-jackpot-tag {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    /* box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2); */
}

.btk-jackpot-tag:hover {
    /* box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); */
    opacity: 0.9;
    color: #fff !important;
}

.sp-jackpot-tag {
    background: linear-gradient(135deg, #0098E2, #274152);
    /* box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2); */
}

.sp-jackpot-tag:hover {
    /* box-shadow: 0 4px 20px rgba(0, 152, 226, 0.25); */
    opacity: 0.9;
    color: #fff !important;
}

/*  */
ul.dropdown-menu.action-dropdown-menu li button {
  font-size: 1.2rem !important;
  padding: 2px 10px !important;
}

ul.dropdown-menu.action-dropdown-menu li button i {
  font-size: 1.0rem !important;
}

/*  */
.prediction-actions-menu {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
}

.prediction-actions-menu .dropdown.position-static {
    position: static !important;
}

.prediction-actions-menu .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
}

/* Prevent button movement on click */
.ellipsis-menu-btn {
    position: relative !important;
    background: none !important;
    color: #6c757d !important;
    font-size: 1.8rem !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ellipsis-menu-btn::after {
    display: none; /* Hide Bootstrap's dropdown arrow */
}

.ellipsis-menu-btn:not(.collapsed) {
    background-color: #f8f9fa;
    transform: none !important; /* Prevent any transform movement */
}

/*  */
/* 1. Structure the entire button as a flexible row */
.action-item {
    display: flex;
    align-items: center; /* Vertically centers icon and text */
    width: 100%; /* Takes full width of dropdown */
    padding: 10px 16px; /* Adjust padding as needed */
    text-align: left;
    gap: 12px; /* Spacing BETWEEN icon and text-wrapper */
}

/* 2. Group the text label and count together */
.action-text-wrapper {
    display: flex;
    justify-content: space-between; /* Puts max space between text & count */
    align-items: center;
    flex: 1; /* Makes this group take up all remaining space */
    min-width: 0; /* Prevents overflow issues with long text */
}

/* 3. Style for the count */
.action-count {
    color: #666; /* Dark grey text */
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 500;
    white-space: nowrap; /* Prevents count from breaking into two lines */
    transition: color 0.2s ease;
    text-align: center;
}

/* 4. Optional: Style for the text label */
.action-label {
    font-weight: 500; /* Makes the action text slightly bold */
    flex: 1; /* Allows the label to take available space */
}

/*  */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/*  */
.prediction-actions-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}

.ellipsis-menu-btn {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.ellipsis-menu-btn:hover {
    background-color: #f8f9fa;
    color: #495057;
}

.action-dropdown-menu {
    min-width: 200px;
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #dee2e6;
}

.action-dropdown-menu .dropdown-item {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    color: #495057;
    transition: all 0.2s ease;
}

.action-dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #212529;
}

.action-dropdown-menu .dropdown-item i {
    width: 20px;
    text-align: center;
    font-size: 1.4rem;
}

.action-dropdown-menu .dropdown-item.text-danger {
    color: #dc3545;
}

.action-dropdown-menu .dropdown-item.text-danger:hover {
    background-color: #f8d7da;
    color: #dc3545;
}

.action-dropdown-menu .dropdown-divider {
    margin: 4px 0;
}

/* Ensure the header has relative positioning */
.prediction-header {
    position: relative;
    padding-right: 40px; /* Make space for the ellipsis button */
}

/*  */
/* .close-modal {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(----gray-color) !important;
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
} */


.prediction-modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/*  */
.trn-table-container {
   background-color: #ffffff;
   padding: 0;
   margin-top: 1.5rem;
}

#trnTransactionsTable {
    min-height: 200px; /* Prevents layout shift */
    transition: all 0.3s ease;
}

.trn-filters {
    background: white;
    padding: 10px;
    border-radius: 12px;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.08); */
    border: 1px solid #E8E8E8;
    margin-bottom: 30px;
}

.trn-filters h2 {
    margin-bottom: 20px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.trn-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.trn-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trn-filter-group label {
    color: #475569;
    font-size: 1.2rem !important;
}

.trn-filter-group input,
.trn-filter-group select {
    padding: 10px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1.25rem !important;
    transition: border-color 0.3s;
}

.trn-filter-group input:focus,
.trn-filter-group select:focus {
    outline: none;
    border-color: #667eea;
}

.trn-filter-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
    width:100% !important;
}

.trn-btn {
    padding: 12px 24px !important;
    border: none;
    border-radius: 50px !important;
    font-size: 1.3rem !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    align-items: center !important;
    gap: 8px;
    justify-content: center;
}

.trn-btn-primary {
    background: var(--primary-color);
    color: white;
}

.trn-btn-primary:hover {
    opacity: 0.9;
}

.trn-btn-secondary {
    background: #e2e8f0;
    color: #475569;
}

.trn-btn-secondary:hover {
    background: #cbd5e1;
}

.trn-btn i {
   font-size:12px !important;
   margin-right: 4px;
}

.trn-badge-success { background: #d1fae5; color: #065f46; }
.trn-badge-warning { background: #fef3c7; color: #92400e; }
.trn-badge-danger { background: #fee2e2; color: #991b1b; }
.trn-badge-info { background: #dbeafe; color: #1e40af; }
.trn-badge-primary { background: #e0e7ff; color: #4f46e5; }
.trn-badge-secondary { background: #f1f5f9; color: #475569; }

.trn-amount {
    font-weight: bold;
    color: #1e293b;
}

.trn-amount-positive {
    color: #065f46;
}

.trn-amount-negative {
    color: #991b1b;
}

.trn-reference {
    font-family: monospace;
    font-size: 1.4rem !important;
    color: var(--primary-color);
}

.trn-email {
    font-size: 0.9rem;
    color: #475569;
    word-break: break-all;
}

.trn-timestamp {
    font-size: 0.85rem;
    color: #94a3b8;
}

.trn-pagination-info {
    color: #64748b;
    font-size: 1.25rem;
}

.trn-pagination-controls {
    display: flex;
    gap: 10px;
}

.trn-pagination-btn {
    padding: 8px 16px;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    color: #475569;
    transition: all 0.3s;
}

.trn-pagination-btn:hover:not(:disabled) {
    background: #e2e8f0;
}

.trn-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.trn-page-number {
    padding: 8px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: #64748b;
    transition: all 0.3s;
    min-width: 40px;
    text-align: center;
}

.trn-page-number:hover {
    background: #f8fafc;
    border-color: #c7d2fe;
    color: #4f46e5;
}

.trn-page-number.active {
    background: #4f46e5;
    color: white;
    border-color: #4f46e5;
}

.trn-loading {
    text-align: center;
    padding: 3rem;
    color: #6c7a8d;
}

.trn-loading i {
    font-size: 2rem;
    margin-bottom: 1rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes trn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.trn-error {
    text-align: center;
    padding: 40px 20px;
    color: #dc2626;
    background: #fef2f2;
    border-radius: 8px;
    margin: 20px;
}

.trn-no-data {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.trn-no-data i {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #e2e8f0;
}

@media (max-width: 768px) {
    .trn-filter-grid {
        grid-template-columns: 1fr;
    }

    .trn-transactions-table {
        display: block;
        overflow-x: auto;
    }

    .trn-pagination {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .trn-pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Desktop Table Styles */
.trn-transactions-table {
    border-collapse: collapse;
    background: white;
    font-size: 1.2rem !important;
    border:1px solid #E8E8E8 !important;
}

.trn-transactions-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.trn-transactions-table th {
    padding: 18px 20px;
    text-align: left;
    font-weight: 600;
    color: white;
    font-size: 1.2rem !important;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    border: none;
    position: relative;
}

.trn-transactions-table th:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.trn-transactions-table th:last-child:after {
    display: none;
}

.trn-transactions-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.trn-transactions-table tbody tr:hover {
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.trn-transactions-table td {
    padding: 20px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    font-size:1.2rem !important;
}

.trn-transactions-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Cell Specific Styles */
.trn-transactions-table .trn-email {
    color: #475569;
    font-size: 1.2rem !important;
    word-break: break-all;
    max-width: 200px;
}

.trn-transactions-table .trn-timestamp {
    font-size: 1.2rem !important;
    color: #94a3b8;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.trn-transactions-table .trn-timestamp i {
    font-size: 1.2rem !important;
}

.trn-transactions-table .trn-amount {
    font-weight: 700;
    font-size: 1.2rem !important;
    color: #1e293b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.trn-transactions-table .trn-amount-positive {
    color: #059669;
}

.trn-transactions-table .trn-amount-negative {
    color: #dc2626;
}

/* Badge Styles */
.trn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 1.0rem !important;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    line-height: 1;
}

.trn-badge-primary {
    background: #e0e7ff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
}

.trn-badge-success {
    background: #d1fae5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.trn-badge-warning {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.trn-badge-danger {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.trn-badge-info {
    background: #dbeafe;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.trn-badge-secondary {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* Table Row Status Indicators */
.trn-transactions-table tr.trn-row-success {
    border-left: 4px solid #059669;
}

.trn-transactions-table tr.trn-row-pending {
    border-left: 4px solid #d97706;
}

.trn-transactions-table tr.trn-row-failed {
    border-left: 4px solid #dc2626;
}

.trn-transactions-table tr.trn-row-processing {
    border-left: 4px solid #2563eb;
}

/* Column Widths */
.trn-transactions-table th:nth-child(1), /* Reference */
.trn-transactions-table td:nth-child(1) {
    width: 15%;
    min-width: 150px;
}

.trn-transactions-table th:nth-child(2), /* Email */
.trn-transactions-table td:nth-child(2) {
    width: 18%;
    min-width: 180px;
}

.trn-transactions-table th:nth-child(3), /* Product */
.trn-transactions-table td:nth-child(3) {
    width: 20%;
    min-width: 200px;
}

.trn-transactions-table th:nth-child(4), /* Amount */
.trn-transactions-table td:nth-child(4) {
    width: 10%;
    min-width: 100px;
    text-align: right;
}

.trn-transactions-table th:nth-child(5), /* Type */
.trn-transactions-table td:nth-child(5) {
    width: 12%;
    min-width: 120px;
}

.trn-transactions-table th:nth-child(6), /* Status */
.trn-transactions-table td:nth-child(6) {
    width: 12%;
    min-width: 120px;
}

.trn-transactions-table th:nth-child(7), /* Initiated */
.trn-transactions-table td:nth-child(7) {
    width: 10%;
    min-width: 120px;
}

.trn-transactions-table th:nth-child(8), /* Verified */
.trn-transactions-table td:nth-child(8) {
    width: 10%;
    min-width: 120px;
}

.trn-transactions-table th:nth-child(9), /* Actions */
.trn-transactions-table td:nth-child(9) {
    width: 8%;
    min-width: 100px;
}

/* Amount column alignment */
.trn-transactions-table td:nth-child(4) {
    text-align: right;
}

/* Hover Effects for Specific Cells */
.trn-transactions-table tbody tr:hover .trn-reference {
    color: #4f46e5;
}

.trn-transactions-table tbody tr:hover .trn-email {
    color: #334155;
}

.trn-transactions-table tbody tr:hover .trn-amount {
    display: inline-block;
}

/* Status badge hover effects */
.trn-transactions-table tbody tr:hover .trn-badge-success {
    background: #a7f3d0;
}

.trn-transactions-table tbody tr:hover .trn-badge-warning {
    background: #fde68a;
}

.trn-transactions-table tbody tr:hover .trn-badge-danger {
    background: #fecaca;
}

/* Table Loading State */
.trn-transactions-table-loading {
    position: relative;
    min-height: 200px;
}

.trn-transactions-table-loading:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f1f5f9;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: trn-spin 1s linear infinite;
}

@keyframes trn-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Empty State */
.trn-table-empty {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.trn-table-empty i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #e2e8f0;
}

.trn-table-empty h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #475569;
}

.trn-table-empty p {
    font-size: 1rem;
    color: #94a3b8;
}

/* Table Footer (for summary info) */
.trn-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: #64748b;
}

.trn-table-footer-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trn-table-footer-actions {
    display: flex;
    gap: 10px;
}

/* Sortable Column Headers */
.trn-sortable-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.3s ease;
}

.trn-sortable-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.trn-sortable-header.sort-asc:after,
.trn-sortable-header.sort-desc:after {
    content: '';
    display: inline-block;
    margin-left: 8px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.trn-sortable-header.sort-asc:after {
    border-bottom: 4px solid white;
}

.trn-sortable-header.sort-desc:after {
    border-top: 4px solid white;
}

/* Responsive adjustments for medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
    .trn-transactions-table {
        font-size: 1.2rem !important;
    }

    .trn-transactions-table th,
    .trn-transactions-table td {
        padding: 15px;
    }

    .trn-transactions-table .trn-amount {
        font-size: 1rem;
    }

    .trn-transactions-table .trn-badge {
        padding: 5px 10px;
        font-size: 1.1rem !important;
    }
}

/* Print Styles */
@media print {
    .trn-transactions-table {
        border: 1px solid #ddd;
    }

    .trn-transactions-table th {
        background: #f1f5f9 !important;
        color: #334155 !important;
        border-bottom: 2px solid #ddd;
    }

    .trn-transactions-table th:after {
        display: none;
    }

    .trn-action-btn {
        display: none;
    }

    .trn-transactions-table tbody tr:hover {
        background: none;
        transform: none;
        box-shadow: none;
    }
}

/*  */
/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .trn-filters h6 {
        font-size: 1.35rem;
        margin-bottom: 15px;
    }

    .trn-filter-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .trn-filter-actions {
        flex-direction: column;
        gap: 10px;
    }

    .trn-filter-actions .trn-btn {
        width: 100%;
        justify-content: center;
    }

    /* Hide table headers on mobile */
    .trn-transactions-table thead {
        display: none;
    }

    /* Make table rows stack vertically */
    .trn-transactions-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 15px;
        background: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .trn-transactions-table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border: none;
        border-bottom: 1px solid #f1f5f9;
    }

    .trn-transactions-table tbody td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .trn-transactions-table tbody td:first-child {
        padding-top: 0;
    }

    /* Add labels for mobile view */
    .trn-transactions-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #475569;
        font-size: 0.85rem;
        flex: 0 0 120px;
        text-align: left;
    }

    .trn-transactions-table tbody td .trn-reference,
    .trn-transactions-table tbody td .trn-email,
    .trn-transactions-table tbody td .trn-amount,
    .trn-transactions-table tbody td .trn-timestamp {
        flex: 1;
        text-align: right;
    }

    /* Adjust badge styles for mobile */
    .trn-badge {
        padding: 4px 10px;
        font-size: 1.1rem !important;
    }

    /* Pagination adjustments */
    .trn-pagination {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .trn-pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    .trn-page-numbers {
        order: 1;
        width: 100%;
        margin-top: 10px;
        justify-content: center;
    }

    .trn-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Desktop styles remain the same */
.trn-transactions-table {
    width: 100%;
    border-collapse: collapse;
}

.trn-transactions-table thead {
    background: #f8fafc;
}

.trn-transactions-table th {
    padding: 15px 20px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
}

.trn-transactions-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.trn-transactions-table tbody tr:hover {
    background: #f8fafc;
}

/*  */
.trn-mobile-transactions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.trn-mobile-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 5px;
}

.trn-mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.trn-mobile-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trn-mobile-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.trn-mobile-label {
    font-weight: 600;
    color: #475569;
    font-size: 1.4rem !important;
    flex: 0 0 100px;
}

.trn-mobile-value {
    color: #334155;
    font-size: 1.6rem !important;
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.trn-mobile-card-footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.trn-mobile-card-footer .trn-action-btn {
    width: 100%;
    justify-content: center;
}

.trn-detail-label {
  text-transform: capitalize !important;
}

.trn-detail-label,
.trn-detail-value {
  font-size:1.2rem !important;
}

/*  */
/* Make the entire leaderboard widget scrollable */
.user-predictions-leaderboard {
    max-height: 600px; /* Adjust this value as needed */
    overflow-y: auto;  /* Enables vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #cbd5e0 #f7fafc; /* For Firefox */
}

/* Custom scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.user-predictions-leaderboard::-webkit-scrollbar {
    width: 8px;
}

.user-predictions-leaderboard::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 4px;
}

.user-predictions-leaderboard::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.user-predictions-leaderboard::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/*  */
/* COMPACT SIDEBAR LEADERBOARD */
.sidebar-leaderboard {
    /* max-height: 500px; */
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    border-radius: 0 0 8px 8px !important;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

.sidebar-leaderboard::-webkit-scrollbar {
    width: 4px;
}

.sidebar-leaderboard::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 2px;
}

/* Header */

/* Tabs - Compact */
.sideboard-tabs {
    display: flex;
    background-color: #f7fafc;
    border-radius: 8px 8px 0 0;
    padding: 10px 5px 5px 5px;
    margin-top: 8px;
    font-size: 1.2rem !important;
    gap: 10px;
}

.sideboard-tab {
    flex: 1;
    padding: 2px 10px;
    border: 1px solid #DCDCDC;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 500;
    color: #6c757d;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.sideboard-tab.active {
    font-weight: 600;
    color: #fff;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.sideboard-tab:hover {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* User List - Compact */
.sideboard-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Avatar - Tiny */
.sideboard-avatar {
    position: relative;
    width: 28px;
    height: 28px;
}

.sideboard-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.sideboard-level {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: 2px solid white;
    background: #10b981;
    color: white;
}

.sideboard-score-label {
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    margin-top: 1px;
}

.sideboard-badge.jackpot {
    background: #fef3c7;
    color: #92400e;
}

.sideboard-badge.excellent {
    background: #e0e7ff;
    color: #3730a3;
}

.sideboard-badge.bonus {
    background: #d1fae5;
    color: #065f46;
}

/* Footer */
.sideboard-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

.sideboard-view-all {
    font-size: 1.1rem;
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sideboard-view-all:hover {
    color: var(--secondary-color) !important;
    text-decoration: underline !important;
}

/* Loading & Empty States */
.sideboard-loading {
    padding: 30px 0;
    text-align: center;
    color: #94a3b8;
    font-size: 1.1rem;
}

.sideboard-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-top-color: var(--primary-color2);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.sideboard-empty {
    padding: 20px 0;
    text-align: center;
    color: #94a3b8;
    font-size: 1.1rem;
}

/* Performance Level Colors */
.sideboard-user-card.level-expert .sideboard-level { background: #8b5cf6; }
.sideboard-user-card.level-advanced .sideboard-level { background: #3b82f6; }
.sideboard-user-card.level-intermediate .sideboard-level { background: #10b981; }
.sideboard-user-card.level-beginner .sideboard-level { background: #6b7280; }

/* Hover Effects */
.sideboard-user-card:hover .sideboard-username {
    color: var(--primary-color);
}

/* Follow Button - Compact */
.c-follow-user {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
    /* line-height: 1.4; */
}

.c-follow-user.not-following {
    background-color: #3b82f6;
    color: white;
}

.c-follow-user.not-following:hover {
    background-color: #2563eb;
}

.c-follow-user.following {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 6px 11px;
}

.c-follow-user.following:hover {
    background-color: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Follow Button */
.c-follow-user {
    padding: 1px 14px !important;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.c-follow-user.not-following {
    background: white;
    color: #374151;
}

.c-follow-user.not-following:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.c-follow-user.following {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.c-follow-user.following:hover {
    background: #059669;
}

/* ===== BASE STYLES ===== */
@media (max-width: 768px) {
  .mn-navbar {
    border-bottom: none !important;
    box-shadow: none !important;
  }
}

/* ========== DESKTOP SEARCH STYLES ========== */
.mn-search-container {
    flex: 1;
    max-width: 450px;
    margin: 0 20px;
    position: relative;
}

.mn-search {
    position: relative;
    width: 100%;
}

.mn-search-input {
    width: 100%;
    padding: 6px 45px 6px 20px;
    border: 1px solid #e9ecef;
    border-radius: 30px;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    font-weight: 500;
}

.mn-search-input:focus {
    outline: none;
    border-color: #b18819;
    box-shadow: 0 0 0 3px rgba(177, 136, 25, 0.1);
    background-color: #fff;
}

.mn-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 50%;
    transition: all 0.2s;
}

.mn-search-btn:hover {
    color: #b18819;
    background-color: rgba(0, 0, 0, 0.05);
}

.mn-search-predictions {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    max-height: 500px;
    overflow-y: auto;
    animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mn-search-loading {
    padding: 30px;
    text-align: center;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mn-search-results {
    padding: 8px 0;
}

.mn-search-section-title {
    padding: 12px 20px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #6c757d;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.mn-search-result-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: #212529;
    border-bottom: 1px solid #f8f9fa;
}

.mn-search-result-item:hover {
    background-color: #f8f9fa;
}

.mn-search-result-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
    flex-shrink: 0;
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    color: white;
    overflow: hidden;
}

.mn-search-result-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mn-search-result-content {
    flex: 1;
    min-width: 0;
}

.mn-search-result-title {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mn-search-result-username {
    color: #495057;
    font-size: 13px;
    font-weight: normal;
}

.mn-search-result-description {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

.mn-search-result-stats {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 11px;
    color: #adb5bd;
}

.mn-search-result-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mn-search-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background-color: #e9ecef;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
}

.mn-search-result-badge.verified {
    background-color: #d4edda;
    color: #155724;
}

.mn-search-result-badge.badge-user {
    background-color: #fff3cd;
    color: #856404;
}

.mn-search-footer {
    padding: 12px 20px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.mn-search-view-all {
    background-color: none;
    border: none;
    color: #b18819;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    width: 100%;
    transition: all 0.2s;
    border-radius: 8px;
    font-size: 14px;
}

.mn-search-view-all:hover {
    background-color: #f8f9fa;
}

/* ========== MOBILE SEARCH MODAL STYLES ========== */
.mn-mobile-search-result-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mn-mobile-search-footer {
    padding: 16px;
    text-align: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Action Buttons for Search Results */
.mn-search-result-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.mn-search-result-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.mn-search-result-btn-primary {
    background: linear-gradient(135deg, #b18819 0%, #d4af37 100%);
    color: white !important;
}

.mn-search-result-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(177, 136, 25, 0.3);
    color: white !important;
}

.mn-search-result-btn-secondary {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #e9ecef;
}

.mn-search-result-btn-secondary:hover {
    background: #e9ecef;
    color: #b18819;
}

/* Mobile Action Buttons */
.mn-mobile-search-result-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.mn-mobile-search-result-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 16px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    flex: 1;
    cursor: pointer;
    border: none;
}

.mn-mobile-search-result-btn-primary {
    background: linear-gradient(135deg, #b18819 0%, #d4af37 100%);
    color: white;
}

.mn-mobile-search-result-btn-primary:active {
    transform: scale(0.98);
}

.mn-mobile-search-result-btn-secondary {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #e9ecef;
}

.mn-mobile-search-result-btn-secondary:active {
    background: #e9ecef;
    transform: scale(0.98);
}

/* Adjust result item padding for buttons */
.mn-search-result-item {
    padding: 16px 20px;
}

.mn-mobile-search-result-icon {
    margin-bottom: 12px;
}

/* Stats styling */
.mn-search-result-stats {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #6c757d;
    flex-wrap: wrap;
}

.mn-search-result-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mn-search-result-stats i {
    font-size: 11px;
}

/* Mobile stats */
.mn-mobile-search-result-meta {
    font-size: 12px;
    color: #adb5bd;
    margin-top: 6px;
    margin-bottom: 8px;
}

.mn-mobile-search-result-description {
    margin-bottom: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mn-search-result-actions {
        flex-direction: column;
    }

    .mn-search-result-btn {
        justify-content: center;
    }

    .mn-mobile-search-result-actions {
        width: 100%;
    }

    .mn-mobile-search-result-btn {
        font-size: 12px;
        padding: 4px 12px;
    }
}

@media (min-width: 769px) {
    .mn-mobile-search-result-actions {
        flex-direction: row;
    }
}


/* ===== NAVIGATION ITEMS ===== */
.mn-nav-items {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mn-nav-item {
    height: 100%;
}

.mn-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 72px;
    text-decoration: none;
    color: #65676b;
    position: relative;
    transition: all 0.2s ease;
}

.mn-nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #b18819;
}

.mn-nav-link.active {
    color: #b18819;
}

.mn-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #b18819;
}

.mn-nav-icon {
    font-size: 1.8rem;
}

/* Tooltips */
.mn-nav-tooltip {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1001;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.mn-nav-tooltip::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #1a1a1a;
}

.mn-nav-link:hover .mn-nav-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: -36px;
}

/* ===== RIGHT MENU ===== */
.mn-right-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Quick Actions */
.mn-quick-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f0f2f5;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #65676b;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.mn-quick-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #b18819;
}

/* Badges */
.mn-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #e41e3f;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
}

.mn-badge.pulse {
    animation: mn-pulse 1.5s infinite;
}

@keyframes mn-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* User Menu */
.mn-user-menu {
    position: relative;
}

.mn-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 50px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mn-user-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mn-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #b18819;
}

/* ===== DROPDOWN SYSTEM ===== */
.mn-dropdown {
    position: relative;
}

.mn-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 380px;
    max-height: 500px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dddfe2;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    overflow: hidden;
    display: block !important;
}

.mn-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
}

/* Dropdown Components */
.mn-dropdown-header {
    padding: 16px;
    border-bottom: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
}

.mn-dropdown-header h6 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #000;
}

.mn-dropdown-actions {
    display: flex;
    gap: 8px;
}

.mn-dropdown-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #dddfe2;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #65676b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mn-dropdown-action:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #b18819;
}

.mn-mark-all-read {
    background: none;
    border: none;
    color: #b18819;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.mn-mark-all-read:hover {
    background-color: #f3f4f6;
}

.mn-dropdown-footer {
    padding: 12px 16px;
    border-top: 1px solid #dddfe2;
    background: #fff;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.mn-dropdown-footer-link {
    color: #b18819;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mn-dropdown-footer-link:hover {
    color: #d4af37;
}

/* Loading & Empty States */
.mn-loading-state {
    padding: 40px 20px;
    text-align: center;
}

.mn-loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #b18819;
    border-radius: 50%;
    animation: mn-spin 1s linear infinite;
    margin: 0 auto 12px;
}

@keyframes mn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mn-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #65676b;
}

.mn-empty-state-icon {
    width: 60px;
    height: 60px;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #65676b;
    font-size: 2.4rem;
    opacity: 0.5;
}

.mn-empty-state h6 {
    color: #000;
    font-weight: 600;
    margin-bottom: 8px;
}

.mn-empty-state p {
    margin: 0;
    font-size: 1.4rem;
}

/* ===== NOTIFICATIONS ===== */
.mn-notifications-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    border-bottom: 1px solid #dddfe2;
    background: #f0f2f5;
    overflow-x: auto;
}

.mn-notifications-tab {
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: 16px;
    font-size: 1.3rem;
    font-weight: 500;
    color: #65676b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mn-notifications-tab:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mn-notifications-tab.active {
    background: #b18819;
    color: #fff;
}

.mn-notifications-status {
    padding: 8px 16px;
    font-size: 1.3rem;
    color: #65676b;
    background: #f0f2f5;
    border-bottom: 1px solid #dddfe2;
}

.mn-notifications-list {
    max-height: 350px;
    overflow-y: auto;
}

/* Notification Items */
.mn-notification-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.mn-notification-item:hover {
    background-color: #f9fafb;
}

.mn-notification-item.unread {
    background-color: #fefce8;
}

.mn-notification-item.unread:hover {
    background-color: #fef9c3;
}

/* Notification icon */
.mn-notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.mn-notification-icon i {
    font-size: 18px;
}

/* Type-specific icon colors */
.type-prediction {
    background-color: #e0f2fe;
    color: #0284c7;
}

.type-comment {
    background-color: #dcfce7;
    color: #16a34a;
}

.type-like {
    background-color: #ffe4e6;
    color: #e11d48;
}

.type-follow {
    background-color: #e0e7ff;
    color: #4f46e5;
}

.type-mention {
    background-color: #fef3c7;
    color: #d97706;
}

.type-badge {
    background-color: #fae8ff;
    color: #c026d3;
}

.type-tip {
    background-color: #fed7aa;
    color: #ea580c;
}

.type-message {
    background-color: #cffafe;
    color: #0891b2;
}

.type-default {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* Notification content */
.mn-notification-content {
    flex: 1;
    min-width: 0;
}

.mn-notification-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 4px;
    flex-wrap: wrap;
    gap: 8px;
}

.mn-notification-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    flex: 1;
}

.mn-notification-actions {
    position: relative;
}

.mn-notification-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    color: #6b7280;
    transition: background-color 0.2s;
}

.mn-notification-action-btn:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.mn-notification-action-dropdown {
     position: absolute;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    min-width: 150px;
    z-index: 1000;
    margin: 0;
}

/*  */
/* Global dropdown menu */
.mn-global-action-dropdown {
    position: absolute;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 10000;
    overflow: hidden;
    animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mn-dropdown-menu-content {
    padding: 8px 0;
}

.mn-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    border-radius: 0 !important;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: left;
}

.mn-dropdown-item:hover {
    background-color: #f3f4f6;
}

.mn-dropdown-item i {
    width: 18px;
    font-size: 14px;
}

.mn-dropdown-item.text-danger {
    color: #dc2626;
}

.mn-dropdown-item.text-danger:hover {
    background-color: #fef2f2;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .mn-global-action-dropdown {
        min-width: 140px;
    }

    .mn-dropdown-item {
        padding: 12px 16px;
        font-size: 15px;
    }
}
/*  */

/* Positioning classes */
.mn-notification-action-dropdown.dropdown-below {
    top: 100%;
    bottom: auto;
}

.mn-notification-action-dropdown.dropdown-above {
    top: auto;
    bottom: 100%;
}

.mn-notification-action-dropdown.dropdown-right {
    left: auto;
    right: 0;
}

.mn-notification-action-dropdown.dropdown-left {
    left: 0;
    right: auto;
}

.mn-notification-action-dropdown.dropdown-center {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
}

.mn-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: background-color 0.2s;
}

.mn-action-item:hover {
    background-color: #f3f4f6;
}

.mn-action-item i {
    width: 16px;
    font-size: 13px;
}

.mn-action-item.text-danger {
    color: #dc2626;
}

.mn-action-item.text-danger:hover {
    background-color: #fef2f2;
}

.mn-notification-type-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.badge-prediction {
    background-color: #e0f2fe;
    color: #0284c7;
}

.badge-comment {
    background-color: #dcfce7;
    color: #16a34a;
}

.badge-like {
    background-color: #ffe4e6;
    color: #e11d48;
}

.badge-follow {
    background-color: #e0e7ff;
    color: #4f46e5;
}

.badge-mention {
    background-color: #fef3c7;
    color: #d97706;
}

.badge-badge {
    background-color: #fae8ff;
    color: #c026d3;
}

.badge-tip {
    background-color: #fed7aa;
    color: #ea580c;
}

.badge-message {
    background-color: #cffafe;
    color: #0891b2;
}

.badge-default {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* Notification message */
.mn-notification-message {
    font-size: 13px;
    color: #4b5563;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

/* Notification meta */
.mn-notification-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.mn-notification-time {
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mn-notification-mark-read {
    background: none;
    border: none;
    color: #b18819;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.mn-notification-mark-read:hover {
    background-color: #f3f4f6;
    color: #8a6b12;
}

.mn-notification-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mn-notification-time {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #65676b;
    font-size: 1.2rem;
}

.mn-notification-type {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: capitalize;
}

.mn-notification-type.prediction {
    background: rgba(177, 136, 25, 0.1);
    color: #b18819;
}

.mn-notification-type.vote {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

.mn-notification-type.comment {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.mn-notification-type.follow {
    background: rgba(155, 89, 182, 0.1);
    color: #8e44ad;
}

.mn-notification-mark-read {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #dddfe2;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color:  #65676b;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.2s ease;
}

.mn-notification-item:hover .mn-notification-mark-read {
    opacity: 1;
}

.mn-notification-mark-read:hover {
    background:  #b18819;
    border-color:  #b18819;
    color: #fff;
}

/* ===== MESSAGES ===== */
.mn-messages-search {
    position: relative;
    padding: 12px 16px;
    border-bottom: 1px solid #dddfe2;
}

/* ===== VARIABLES ===== */
/* All variables replaced with actual values */

.mn-messages-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid #dddfe2;
    border-radius: 20px;
    font-size: 1.4rem;
    background: #f0f2f5;
    color: #000000;
    transition: all 0.2s ease;
}

.mn-messages-search-input:focus {
    outline: none;
    border-color: #b18819;
    background: #ffffff;
}

.mn-messages-search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #65676b;
    font-size: 1.4rem;
}

.mn-messages-status {
    padding: 8px 16px;
    font-size: 1.3rem;
    color: #65676b;
    background: #f0f2f5;
    border-bottom: 1px solid #dddfe2;
}

.mn-messages-list {
    max-height: 350px;
    overflow-y: auto;
}

/* Message Items */
.mn-message-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #dddfe2;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    gap: 12px;
}

.mn-message-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mn-message-item.unread {
    background: rgba(177, 136, 25, 0.05);
}

.mn-message-avatar {
    position: relative;
    flex-shrink: 0;
}

.mn-message-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.mn-message-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.mn-message-status.online { background: #2ecc71; }
.mn-message-status.offline { background: #65676b; }
.mn-message-status.away { background: #f39c12; }

.mn-message-content {
    flex: 1;
    min-width: 0;
}

.mn-message-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.mn-message-name {
    font-weight: 600;
    font-size: 1.4rem;
    color: #000000;
    margin: 0;
}

.mn-message-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mn-message-text {
    margin: 0;
    font-size: 1.3rem;
    color: #65676b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.mn-message-text.you {
    color: #b18819;
}

.mn-message-badge {
    background: #b18819;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Typing Indicator */
.mn-message-typing {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mn-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b18819;
    animation: mn-typing 1.4s infinite ease-in-out both;
}

.mn-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.mn-typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes mn-typing {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ===== SCROLLBARS ===== */
.mn-notifications-list::-webkit-scrollbar,
.mn-messages-list::-webkit-scrollbar {
    width: 6px;
}

.mn-notifications-list::-webkit-scrollbar-track,
.mn-messages-list::-webkit-scrollbar-track {
    background: #f0f2f5;
    border-radius: 3px;
}

.mn-notifications-list::-webkit-scrollbar-thumb,
.mn-messages-list::-webkit-scrollbar-thumb {
    background: #65676b;
    border-radius: 3px;
    opacity: 0.5;
}

.mn-notifications-list::-webkit-scrollbar-thumb:hover,
.mn-messages-list::-webkit-scrollbar-thumb:hover {
    opacity: 0.7;
}

/* ===== USER DROPDOWN ===== */
.mn-dropdown-menu.user-menu {
    min-width: 280px;
    width: 280px;
}

.mn-dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    color: #000000;
    transition: all 0.2s ease;
    border: none;
    background-color: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    gap: 12px;
}

.mn-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.mn-dropdown-icon {
    width: 20px;
    color: #65676b;
    font-size: 1.2rem;
    text-align: center;
}

.mn-dropdown-text {
    flex: 1;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 1100px) {
    .mn-nav-link {
        width: 60px;
    }

    .mn-nav-icon {
        font-size: 1.6rem;
    }
}

/* Small Tablet */
@media (max-width: 900px) {
    .mn-nav-items {
        flex: 1;
        justify-content: space-around;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .mn-nav-items {
        display: none;
    }

    .mn-mobile-toggle {
        display: block;
        background: none;
        border: none;
        color: #65676b;
        font-size: 2rem !important;
        padding: 8px;
        cursor: pointer;
        margin-right: 8px;
    }

    .mn-quick-btn {
        width: 36px;
        height: 36px;
    }

    /* Mobile Dropdowns */
    .mn-dropdown-menu {
        position: fixed;
        top: 56px !important;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-height: none !important;
        height: calc(100vh - 56px);
        border-radius: 0;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        margin-top: 0;
    }

    .mn-dropdown-menu.show {
        transform: translateX(0);
    }

    .mn-dropdown-header {
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 3;
    }

    .mn-notifications-tabs {
        justify-content: flex-start;
        padding: 12px 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mn-notifications-list,
    .mn-messages-list {
        max-height: none !important;
        height: calc(100vh - 200px);
    }

    .mn-dropdown-footer {
        position: sticky;
        bottom: 0;
        background: #ffffff;
        z-index: 3;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .mn-nav-container {
        padding: 0 12px;
    }

    .mn-brand-link span {
        display: none;
    }

    .mn-user-avatar {
        width: 28px;
        height: 28px;
    }

    .mn-notification-item,
    .mn-message-item {
        padding: 10px 12px;
    }

    .mn-notification-avatar {
        width: 36px;
        height: 36px;
    }

    .mn-message-avatar img {
        width: 40px;
        height: 40px;
    }
}

/* Text danger support for logout */
.mn-dropdown-item.text-danger .mn-dropdown-icon,
.mn-dropdown-item.text-danger .mn-dropdown-text h6 {
    color: #e41e3f;
}

.mn-dropdown-item.text-danger:hover .mn-dropdown-icon,
.mn-dropdown-item.text-danger:hover .mn-dropdown-text h6 {
    color: #c53030;
}

/* Bootstrap display utilities (if not using Bootstrap) */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-block { display: block !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-flex { display: flex !important; }
    .d-md-block { display: block !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-block { display: block !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-block { display: block !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
}

/* Bootstrap margin utilities */
.ms-2 { margin-left: 0.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }

/* Bootstrap text utilities */
.text-muted { color: #65676b !important; }
.text-danger { color: #e41e3f !important; }

/* Bootstrap flex utilities */
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }

/* Hide mobile toggle on desktop */
.mn-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: #65676b;
    font-size: 1.5rem;
    padding: 8px;
    cursor: pointer;
    margin-right: 8px;
}

@media (max-width: 768px) {
    .mn-mobile-toggle {
        display: block;
    }
}

/* ===== MOBILE MENU ===== */
.mn-mobile-menu {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mn-mobile-menu.show {
    transform: translateX(0);
}

/* Mobile Profile */
.mn-mobile-profile {
    display: flex;
    align-items: center;
    padding: 20px 16px;
    border-bottom: 1px solid #dddfe2;
    gap: 12px;
}

.mn-mobile-profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #b18819;
}

.mn-mobile-profile-info h6 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
    color: #000000;
}

.mn-mobile-profile-info p {
    margin: 4px 0 0;
    font-size: 1.4rem;
    color: #65676b;
}

/* Mobile Navigation */
.mn-mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.mn-mobile-nav-link {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    text-decoration: none;
    color: #000000;
    gap: 16px;
    position: relative;
}

.mn-mobile-nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.mn-mobile-nav-link.active {
    background: rgba(177, 136, 25, 0.1);
    color: #b18819;
    font-weight: 600;
}

.mn-mobile-nav-link i {
    font-size: 1.4rem !important;
    width: 24px;
    text-align: center;
    color: #65676b;
}

.mn-mobile-nav-link.active i {
    color: #b18819;
}

.mn-mobile-nav-link span {
    flex: 1;
    font-size: 1.4rem !important;
}

.mn-mobile-nav-badge {
    background: #e41e3f;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* Mobile Settings */
.mn-mobile-settings {
    border-top: 1px solid #dddfe2;
    border-bottom: 1px solid #dddfe2;
}

/* Mobile Switch Toggle */
.mn-mobile-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.mn-mobile-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mn-mobile-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #65676b;
    transition: all 0.2s ease;
    border-radius: 34px;
}

.mn-mobile-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.mn-mobile-switch input:checked + .mn-mobile-switch-slider {
    background-color: #b18819;
}

.mn-mobile-switch input:checked + .mn-mobile-switch-slider:before {
    transform: translateX(20px);
}

/* Mobile Actions */
.mn-mobile-actions {
    display: flex;
    padding: 16px;
    gap: 12px;
}

.mn-mobile-action-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid #b18819;
    border-radius: 8px;
    background: transparent;
    color: #b18819;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mn-mobile-action-btn:hover {
    background: #b18819;
    color: #ffffff;
    text-decoration: none;
}

.mn-mobile-action-btn.primary {
    background: #b18819;
    color: #ffffff;
}

.mn-mobile-action-btn.primary:hover {
    background: #d4af37;
}

.mn-mobile-action-btn.logout {
    border-color: #e41e3f;
    color: #e41e3f;
}

.mn-mobile-action-btn.logout:hover {
    background: #e41e3f;
    color: #ffffff;
}

.mn-mobile-action-btn i {
    font-size: 1rem;
}

/* Mobile Overlay */
.mn-mobile-overlay {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mn-mobile-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* ===== SIDEBAR MENU ===== */
/* Modern Sidebar Styling */
.mn-left-sidebar {
    /* background: linear-gradient(180deg, #1a1f2e 0%, #1e2436 100%); */
    background: #ffffff;
    /* color: #fff; */
    width: 280px;
    height: 100vh;
    position: fixed;
    left: 100px;
    top: 60px !important;
    /* bottom: 0; */
    overflow-y: auto;
    overflow-x: hidden;
    /* box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2); */
    z-index: 99;
    transition: all 0.3s ease;
    /* font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; */
    border-right: 1px solid #dddfe2;
}

/* Custom Scrollbar */
.mn-left-sidebar::-webkit-scrollbar {
    width: 4px;
}

.mn-left-sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.mn-left-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.mn-left-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Section Titles */
.mn-sidebar-section {
    margin-bottom: 20px;
    padding: 0 16px;
}

.mn-sidebar-title {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7f8aa8;
    padding: 0 12px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-toggle {
    font-size: 1.0rem;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s;
}

.section-toggle:hover {
    opacity: 1;
}

/* Sidebar Items */
.mn-sidebar-item {
    margin-bottom: 0 !important;
}

.mn-sidebar-link {
    display: flex;
    align-items: center;
    padding: 6px 16px !important;
    color: #a0a8c0;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    line-height: 1.8rem;
}

.mn-sidebar-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    border-radius: 0 3px 3px 0;
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.mn-sidebar-link:hover {
    background: rgba(79, 70, 229, 0.05);
    color: var(--primary-color);
}

/* Active state for dropdown items */
.dropdown-item.active {
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.1) 0%, rgba(79, 70, 229, 0.05) 100%);
    color: var(--primary-color);
    border-left: 2px solid var(--primary-color);
}

.dropdown-item.active i {
    color: var(--primary-color);
}

.mn-sidebar-link:hover::before {
    transform: scaleY(1);
}

.mn-sidebar-link.active {
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.1) 0%, rgba(79, 70, 229, 0.05) 100%);
    border-left: 3px solid var(--primary-color);
    color: var(--primary-color);
    position: relative;
}

.link-icon-wrapper {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-right: 12px;
    /* background: rgba(255, 255, 255, 0.03); */
    transition: all 0.3s;
}

.mn-sidebar-icon {
    font-size: 1.6rem;
    color: inherit;
}

@keyframes slideIn {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 70%;
        opacity: 1;
    }
}

.link-text {
    flex: 1;
    font-size: 1.5rem !important;
    font-weight: 500;
}

/* Create Prediction Button - Prevent icon background change on hover */
.create-prediction-wrapper {
    padding: 0 16px;
    margin-top: 0;
}

.create-prediction {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%) !important;
    color: white !important;
    padding: 12px !important;
    transition: opacity 0.3s ease;
    border-radius: 50px;
}

.create-prediction:hover {
    opacity: 0.9;
    color: #fff !important;
}

.plus-icon {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: none; /* Remove any transition from plus icon too */
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-arrow {
    font-size: 1.0rem;
    opacity: 0.5;
    transition: all 0.3s;
    margin-left: 8px;
}

.dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.dropdown-menu-top {
    position: absolute;
    bottom: 100%;
    left: 12px;
    right: 12px;
    background: #2a2f42;
    border-radius: 12px;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.3);
    margin-bottom: 8px;
    display: none;
    z-index: 1001;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdown-menu-top::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
}

.dropdown-menu-top::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #2a2f42;
    z-index: 1001;
}

.dropdown:hover .dropdown-menu-top,
.dropdown-menu-top:hover {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #a0a8c0 !important;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 1.3rem;
}

.dropdown-item:hover {
    background: rgba(102, 126, 234, 0.15) !important;
    color: var(--primary-color) !important;
}

.dropdown-item-icon {
    width: 20px;
    margin-right: 12px;
    font-size: 1.4rem;
    color: #7f8aa8;
}

.dropdown-item:hover .dropdown-item-icon {
    color: #667eea;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 8px 0;
}

.logout:hover {
    color: #ef4444;
}

.logout:hover .dropdown-item-icon {
    color: #ef4444;
}

/* Quick Links Section */
.quick-links-section {
    /* border-top: 1px solid rgba(255, 255, 255, 0.05); */
    padding-top: 16px;
}

.mn-sidebar-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 0 12px;
}

.mn-sidebar-quick-link {
    color: #7f8aa8;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mn-sidebar-quick-link i {
    font-size: 1.0rem;
}

.mn-sidebar-quick-link:hover {
    color: #667eea;
}

/* Social Links */
.sidebar-social-links {
    display: flex;
    gap: 12px;
    padding: 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 12px;
}

.social-link {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7f8aa8;
    text-decoration: none;
    transition: all 0.3s;
}

.social-link:hover {
    background: var(--primary-color2);
    color: white !important;
}

/* Copyright */
.copyright {
    padding: 12px !important;
}

.copyright__content {
    color: #5a627a;
    font-size: 1.0rem !important;
    margin: 0 !important;
}

.copyright__content a {
    color: #7f8aa8;
    text-decoration: none;
}

.copyright__content a:hover {
    color: #667eea;
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mn-sidebar-item {
    animation: slideIn 0.3s ease forwards;
}

.mn-left-sidebar {
  display: none;
}

.mn-right-sidebar {
  display: none;
}

/* Tablet */
@media (min-width: 768px) {
 .mn-left-sidebar {
    display: block !important;
    width: 185px;
    left: 10px;
  }

  .mn-right-sidebar {
    display: block;
  }

  .mn-sidebar-link {
    padding: 6px 16px !important;
    line-height: 1.3rem;
}

 .mn-sidebar-link .link-text{
    font-size: 1.2rem !important;
    align-items: center;
    padding: 6px;
  }

  .link-icon-wrapper {
        width: 20px;
        height: 20px;
        margin-right: 2px;
    }

    .mn-sidebar-icon {
        font-size: 1.3rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
  .mn-left-sidebar {
    display: block;
    width: 240px;
    left: 60px;
  }

  .mn-sidebar-link .link-text{
    font-size: 1.4rem !important;
    display: flex;
    align-items: center;
    padding: 6px;
  }

  .mn-right-sidebar {
    display: block;
  }
}

@media (min-width: 1000px) {
  .mn-left-sidebar {
    display: block;
    width: 210px;
    left: 40px;
  }

  .mn-sidebar-link .link-text{
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    padding: 6px;
  }

  .mn-right-sidebar {
    display: block;
  }

  .mn-sidebar-link .link-text{
       font-size: 1.25rem;
       align-items: center;
       padding: 6px;
  }

  .link-icon-wrapper {
        width: 24px;
        height: 24px;
        margin-right: 2px;
    }

    .mn-sidebar-icon {
        font-size: 1.2rem;
    }
}

/* Large Desktop */
@media (min-width: 1280px) {
  .mn-left-sidebar {
    display: block;
    width: 260px;
    left: 80px;
  }

  .mn-right-sidebar {
    display: block;
  }

   .link-text {
        font-size: 1.5rem !important;
    }
}

@media (min-width: 1350px) {
  .mn-left-sidebar {
    display: block;
    width: 280px;
    left: 100px;
  }

  .mn-right-sidebar {
    display: block;
  }

  .link-text {
      font-size: 1.5rem;
    }
}

/* ===== RIGHT SIDEBAR ===== */

/* Right sidebar toggle button */
.mn-right-sidebar-toggle {
    position: fixed;
    right: 300px;
    top: 70px;
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 1px solid #dddfe2;
    border-right: none;
    border-radius: 4px 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    color: #65676b;
}

.mn-right-sidebar-toggle:hover {
    background: #b18819;
    color: #ffffff;
    border-color: #b18819;
}

.mn-right-sidebar.collapsed {
    transform: translateX(300px);
}

.mn-right-sidebar.collapsed + .mn-right-sidebar-toggle {
    right: 0;
}

.mn-right-sidebar-toggle i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.mn-right-sidebar.collapsed + .mn-right-sidebar-toggle i {
    transform: rotate(180deg);
}

/* Right sidebar content */
.mn-right-sidebar {
    padding: 0 15px;
    background: #ffffff;
    z-index: 98;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    height: 100vh;
}

/* Scrollbar styling */
.mn-right-sidebar::-webkit-scrollbar {
    width: 6px;
}

.mn-right-sidebar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.mn-right-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.mn-right-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Section styling */
.mn-right-sidebar-section {
    margin-bottom: 25px;
    /* padding-bottom: 25px; */
    border: 1px solid #dddfe2;
    padding:10px;
    border-radius:12px;
}

.mn-right-sidebar-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Header styling */
.mn-right-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.mn-right-sidebar-header h5 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mn-right-sidebar-header h5 i {
    color: #b18819;
    font-size: 1.2rem;
}

.mn-right-sidebar-view-all {
    font-size: 1.2rem;
    color: #b18819;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mn-right-sidebar-view-all:hover {
    color: #d4af37;
    text-decoration: underline;
}

.mn-right-sidebar-view-all i {
    font-size: 1.0rem;
}

/* Top Predictors */
.mn-top-predictor {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 8px;
    border: 1px solid transparent;
}

.mn-top-predictor:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #dddfe2;
    transform: translateX(-2px);
}

.mn-top-predictor-rank {
    width: 24px;
    height: 24px;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #65676b;
    margin-right: 12px;
    flex-shrink: 0;
}

.mn-top-predictor-rank.rank-1 {
    background: #ffd700;
    color: #1a1a1a;
}

.mn-top-predictor-rank.rank-2 {
    background: #c0c0c0;
    color: #1a1a1a;
}

.mn-top-predictor-rank.rank-3 {
    background: #cd7f32;
    color: #ffffff;
}

.mn-top-predictor-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dddfe2;
    margin-right: 12px;
    flex-shrink: 0;
}

.mn-top-predictor-info {
    flex: 1;
    min-width: 0;
}

.mn-top-predictor-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #000000;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mn-top-predictor-stats {
    display: flex;
    gap: 8px;
    font-size: 1.1rem;
    color: #65676b;
    margin-top: 2px;
}

.mn-top-predictor-accuracy {
    color: #2ecc71;
    font-weight: 600;
}

/* Active Polls */
.mn-active-poll {
    background: #f0f2f5;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.mn-active-poll:hover {
    background: #ffffff;
    border-color: #b18819;
    transform: translateY(-2px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mn-active-poll-question {
    font-size: 1.3rem;
    font-weight: 600;
    color: #000000;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.mn-active-poll-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.mn-poll-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #dddfe2;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mn-poll-option:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #b18819;
}

.mn-poll-option-votes {
    margin-left: auto;
    font-size: 1.1rem;
    color: #65676b;
    font-weight: 500;
}

.mn-active-poll-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
    color: #65676b;
}

.mn-poll-time-left {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f39c12;
    font-weight: 500;
}

/* Trending Predictions */
.mn-trending-prediction {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    background: #f0f2f5;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.mn-trending-prediction:hover {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mn-trending-prediction-match {
    flex: 1;
    min-width: 0;
}

.mn-trending-prediction-teams {
    font-size: 1.2rem;
    font-weight: 600;
    color: #000000;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mn-trending-prediction-tip {
    font-size: 1.1rem;
    color: #b18819;
    font-weight: 600;
    margin: 2px 0 0 0;
}

.mn-trending-prediction-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

.mn-trending-stat {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 1.1rem;
    color: #65676b;
}

.mn-trending-stat i {
    font-size: 1.0rem;
}

.mn-trending-stat.likes i {
    color: #e41e3f;
}

.mn-trending-stat.comments i {
    color: #3498db;
}

/* Upcoming Matches */
.mn-upcoming-match {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    background: #f0f2f5;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.mn-upcoming-match:hover {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mn-upcoming-match-teams {
    flex: 1;
    min-width: 0;
}

.mn-upcoming-match-team {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.mn-upcoming-match-team:last-child {
    margin-bottom: 0;
}

.mn-upcoming-match-name {
    font-weight: 600;
    color: #000000;
}

.mn-upcoming-match-odds {
    font-size: 1.1rem;
    font-weight: 700;
    color: #b18819;
}

.mn-upcoming-match-time {
    width: 60px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #65676b;
    padding: 4px 8px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #dddfe2;
    margin-left: 12px;
    flex-shrink: 0;
}

/* Quick Stats */
.mn-quick-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mn-quick-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #f0f2f5;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mn-quick-stat:hover {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.mn-quick-stat-icon {
    width: 32px;
    height: 32px;
    background: #b18819;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.mn-quick-stat-info {
    flex: 1;
}

.mn-quick-stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000000;
    line-height: 1;
}

.mn-quick-stat-label {
    display: block;
    font-size: 1.1rem;
    color: #65676b;
    margin-top: 2px;
}

/* Ad Section */
.mn-right-sidebar-ad {
    background: #f0f2f5;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dddfe2;
}

.mn-ad-label {
    background: #b18819;
    color: #ffffff;
    font-size: 1.0rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 12px;
    text-align: center;
    letter-spacing: 0.5px;
}

.mn-ad-content {
    padding: 12px;
    text-align: center;
}

.mn-ad-image {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 8px;
}

.mn-ad-text {
    font-size: 1.2rem;
    color: #65676b;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.mn-ad-button {
    width: 100%;
    padding: 6px 12px;
    background: #b18819;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mn-ad-button:hover {
    background: #d4af37;
}

/* Spacer */
.mn-right-sidebar-spacer {
    height: 20px;
}

/* Adjust main content for right sidebar */
@media (min-width: 1200px) {
    .mn-main-content {
        margin-right: 300px;
        transition: margin-right 0.3s ease;
    }

    .mn-right-sidebar.collapsed ~ .mn-main-content {
        margin-right: 0;
    }
}

/* Hide on mobile */
@media (max-width: 1199.98px) {
    .mn-right-sidebar-toggle {
        display: none !important;
    }

    .mn-main-content {
        margin-right: 0 !important;
    }
}

/* ===== PREDICTION POLLS SPECIFIC STYLES ===== */

/* Prediction Polls Container */
.mn-prediction-polls,
.bettors-list {
    margin-bottom: 0;
    padding: 0 !important;
}

/* Prediction Poll Item */
.mn-prediction-poll {
    background-color: #f0f2f5;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid #dddfe2;
    transition: all 0.2s ease;
    position: relative;
}

.mn-prediction-poll:hover {
    background-color: #ffffff;
    border-color: #b18819;
    transform: translateY(-2px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mn-prediction-poll-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mn-prediction-poll-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #000000;
    margin: 0;
    flex: 1;
    line-height: 1.4;
}

.mn-prediction-poll-category {
    font-size: 1.0rem;
    font-weight: 600;
    color: #ffffff;
    background: #b18819;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    flex-shrink: 0;
}

.mn-prediction-poll-category.debate {
    background: #3498db;
}

.mn-prediction-poll-category.trivia {
    background: #2ecc71;
}

/* Poll Options */
.mn-prediction-poll-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.mn-prediction-poll-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #dddfe2;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.mn-prediction-poll-option:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #b18819;
}

.mn-prediction-poll-option.selected {
    background: rgba(177, 136, 25, 0.1);
    border-color: #b18819;
}

.mn-prediction-poll-option-radio {
    width: 16px;
    height: 16px;
    border: 2px solid #dddfe2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.mn-prediction-poll-option.selected .mn-prediction-poll-option-radio {
    border-color: #b18819;
}

.mn-prediction-poll-option.selected .mn-prediction-poll-option-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #b18819;
    border-radius: 50%;
}

.mn-prediction-poll-option-text {
    flex: 1;
    font-size: 1.2rem;
    color: #000000;
    font-weight: 500;
}

.mn-prediction-poll-option-votes {
    font-size: 1.1rem;
    font-weight: 600;
    color: #b18819;
    background: rgba(177, 136, 25, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Poll Progress Bar */
.mn-prediction-poll-progress {
    height: 4px;
    background: #dddfe2;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
    position: relative;
}

.mn-prediction-poll-progress-bar {
    height: 100%;
    background: #b18819;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Poll Footer */
.mn-prediction-poll-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dddfe2;
    font-size: 1.1rem;
    color: #65676b;
}

.mn-prediction-poll-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mn-prediction-poll-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mn-prediction-poll-stat i {
    font-size: 1.0rem;
}

.mn-prediction-poll-stat.votes i {
    color: #b18819;
}

.mn-prediction-poll-stat.comments i {
    color: #3498db;
}

.mn-prediction-poll-time {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f39c12;
    font-weight: 500;
}

/* Polls Navigation Link */
.mn-polls-navigation {
    margin-top: 15px;
}

.mn-polls-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: linear-gradient(135deg, #b18819, #d4af37);
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(177, 136, 25, 0.2);
}

.mn-polls-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(177, 136, 25, 0.3);
    text-decoration: none;
    color: #ffffff;
}

.mn-polls-link i:first-child {
    font-size: 1.6rem;
    margin-right: 10px;
}

.mn-polls-link span {
    flex: 1;
    font-size: 1.3rem;
    font-weight: 600;
}

.mn-polls-link i:last-child {
    font-size: 1.2rem;
    margin-left: 8px;
}

/* Create Poll CTA */
.mn-create-poll-cta {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border: 1px solid #dddfe2;
    transition: all 0.2s ease;
}

.mn-create-poll-cta:hover {
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
    border-color: #b18819;
}

.mn-cta-icon {
    width: 48px;
    height: 48px;
    background: #b18819;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: #ffffff;
    font-size: 2rem;
}

.mn-create-poll-cta h6 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 6px 0;
}

.mn-create-poll-cta p {
    font-size: 1.2rem;
    color: #65676b;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.mn-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: #b18819;
    color: #ffffff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.mn-cta-button:hover {
    background: #d4af37;
    color: #ffffff;
    text-decoration: none;
    transform: scale(1.05);
}

/* Poll voting animation */
@keyframes votePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.mn-prediction-poll-option.voting {
    animation: votePulse 0.5s ease;
}

/* Poll results view */
.mn-prediction-poll.results .mn-prediction-poll-option {
    cursor: default;
    pointer-events: none;
}

.mn-prediction-poll.results .mn-prediction-poll-option:hover {
    background: #ffffff;
    border-color: #dddfe2;
}

/* Additional styles for prediction polls */
.mn-prediction-poll-option {
    position: relative;
}

.mn-prediction-poll-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    opacity: 0.3;
}

.mn-prediction-poll-option:hover .mn-prediction-poll-progress {
    opacity: 0.5;
}

/* Make sure the progress bar doesn't interfere with clicking */
.mn-prediction-poll-progress-bar {
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .mn-right-sidebar.collapsed {
        transform: translateX(280px);
    }

    .mn-right-sidebar-toggle {
        right: 280px;
    }

    @media (min-width: 1200px) {
        .mn-main-content {
            margin-right: 280px;
        }
    }
}

/* Loading state for polls */
.mn-prediction-poll.loading .mn-prediction-poll-options {
    opacity: 0.5;
    pointer-events: none;
}


/* ===== NAVBAR ===== */

.mn-navbar {
    background: var(--bg-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 56px;
    width: 100%;
}

.mn-nav-container {
    max-width: 1300px;
    margin: 0 auto;
    height: 100%;
    padding: 0 16px;
    display: flex;
    align-items: center;
}

/* ===== LOGO & BRAND ===== */
.mn-brand {
    padding: 0 8px !important;
    margin-right: 8px !important;
}

.mn-brand-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none;
    color: #b18819;
    font-weight: 700;
    font-size: 2rem !important;
}

.mn-brand-logo {
    margin-right: 5px;
    font-size: 2rem !important;
}

/* ===== SEARCH ===== */

/* ===== NAVIGATION ITEMS ===== */
.mn-nav-items {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mn-nav-item {
    height: 100%;
}

.mn-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 72px;
    text-decoration: none;
    color: #65676b;
    position: relative;
    transition: all 0.2s ease;
}

.mn-nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #b18819;
}

.mn-nav-link.active {
    color: #b18819;
}

.mn-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #b18819;
}

.mn-nav-icon {
    font-size: 1.8rem;
}

/* Tooltips */
.mn-nav-tooltip {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1001;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.mn-nav-tooltip::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #1a1a1a;
}

.mn-nav-link:hover .mn-nav-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: -36px;
}

/* ===== RIGHT MENU ===== */
.mn-right-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Quick Actions */
.mn-quick-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f0f2f5;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #65676b;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

.mn-quick-btn.open-prediction-modal {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%) !important;
  color:#fff !important;
}

.mn-quick-btn.open-prediction-modal:hover {
  opacity: 0.9;
}

.mn-quick-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #b18819;
}

/* Mobile Icons */
.mn-mobile-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #65676b;
    background: #f0f2f5;
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
}

.mn-mobile-icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #b18819;
}

/* Badges */
.mn-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #e41e3f;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #ffffff;
}

.mn-badge.pulse {
    animation: mn-pulse 1.5s infinite;
}

@keyframes mn-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* User Menu */
.mn-user-menu {
    position: relative;
}

.mn-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 50px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mn-user-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mn-user-avatar {
    width: 32px;
    height: 32px;
    min-width:32px;
    min-height:32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #b18819;
}

/* Mobile Menu Toggle */
.mn-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: #65676b;
    font-size: 1.5rem;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mn-mobile-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #b18819;
}

/* ===== DROPDOWN SYSTEM ===== */
.mn-dropdown {
    position: relative;
}

.mn-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 380px;
    max-height: 500px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dddfe2;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.mn-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* User dropdown specific */
.mn-dropdown-menu.user-menu {
    width: 280px;
    min-width: 280px;
}

/* Dropdown Components */
.mn-dropdown-header {
    padding: 16px;
    border-bottom: 1px solid #dddfe2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 2;
}

.mn-dropdown-header h6 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #000000;
}

.mn-dropdown-actions {
    display: flex;
    gap: 8px;
}

.mn-dropdown-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #dddfe2;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #65676b;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.mn-dropdown-action:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #b18819;
}

.mn-dropdown-footer {
    padding: 12px 16px;
    border-top: 1px solid #dddfe2;
    background: #ffffff;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.mn-dropdown-footer-link {
    color: #b18819;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mn-dropdown-footer-link:hover {
    color: #d4af37;
    text-decoration: none;
}

/* Loading & Empty States */
.mn-loading-state {
    padding: 40px 20px;
    text-align: center;
}

.mn-loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #b18819;
    border-radius: 50%;
    animation: mn-spin 1s linear infinite;
    margin: 0 auto 12px;
}

@keyframes mn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mn-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #65676b;
}

.mn-empty-state-icon {
    width: 60px;
    height: 60px;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #65676b;
    font-size: 2.4rem;
    opacity: 0.5;
}

.mn-empty-state h6 {
    color: #000000;
    font-weight: 600;
    margin-bottom: 8px;
}

.mn-empty-state p {
    margin: 0;
    font-size: 1.4rem;
}

/* ===== NOTIFICATIONS ===== */
.mn-notifications-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    border-bottom: 1px solid #dddfe2;
    background: #f0f2f5;
    overflow-x: auto;
}

.mn-notifications-tab {
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: 16px;
    font-size: 1.3rem;
    font-weight: 500;
    color: #65676b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mn-notifications-tab:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mn-notifications-tab.active {
    background: #b18819;
    color: #ffffff;
}

.mn-notifications-status {
    padding: 8px 16px;
    font-size: 1.3rem;
    color: #65676b;
    background: #f0f2f5;
    border-bottom: 1px solid #dddfe2;
}

.mn-notifications-list {
    max-height: 350px;
    overflow-y: auto;
}

/*  */
/* Make notifications dropdown scrollable */
.mn-notifications-menu {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Keep header and tabs fixed */
.mn-notifications-menu .mn-dropdown-header,
.mn-notifications-menu .mn-notifications-tabs,
.mn-notifications-menu .mn-notifications-status {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
}

/* Make the list scrollable */
.mn-notifications-list {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    max-height: 300px;
}

/* Custom scrollbar */
.mn-notifications-list::-webkit-scrollbar,
.mn-notifications-menu::-webkit-scrollbar {
    width: 6px;
}

.mn-notifications-list::-webkit-scrollbar-track,
.mn-notifications-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.mn-notifications-list::-webkit-scrollbar-thumb,
.mn-notifications-menu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.mn-notifications-list::-webkit-scrollbar-thumb:hover,
.mn-notifications-menu::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Notification Items */
.mn-notification-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #dddfe2;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
    gap: 12px;
}

.mn-notification-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mn-notification-item.unread {
    background: rgba(177, 136, 25, 0.05);
}

.mn-notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #b18819;
}

.mn-notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mn-notification-content {
    flex: 1;
    min-width: 0;
}

.mn-notification-text {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #000000;
}

.mn-notification-text strong {
    color: #b18819;
    font-weight: 600;
}

.mn-notification-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mn-notification-time {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #65676b;
    font-size: 1.2rem;
}

.mn-notification-type {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.mn-notification-type.prediction {
    background: rgba(177, 136, 25, 0.1);
    color: #b18819;
}

.mn-notification-type.vote {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

.mn-notification-type.comment {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.mn-notification-mark-read {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #dddfe2;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #65676b;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.2s ease;
    padding: 0;
}

.mn-notification-item:hover .mn-notification-mark-read {
    opacity: 1;
}

.mn-notification-mark-read:hover {
    background: #b18819;
    border-color: #b18819;
    color: #ffffff;
}

/* ===== MESSAGES ===== */
.mn-messages-search {
    position: relative;
    padding: 12px 16px;
    border-bottom: 1px solid #dddfe2;
}

.mn-messages-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid #dddfe2;
    border-radius: 20px;
    font-size: 1.4rem;
    background: #f0f2f5;
    color: #000000;
    transition: all 0.2s ease;
}

.mn-messages-search-input:focus {
    outline: none;
    border-color: #b18819;
    background: #ffffff;
}

.mn-messages-search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #65676b;
    font-size: 1.4rem;
}

.mn-messages-status {
    padding: 8px 16px;
    font-size: 1.3rem;
    color: #65676b;
    background: #f0f2f5;
    border-bottom: 1px solid #dddfe2;
}

.mn-messages-list {
    max-height: 350px;
    overflow-y: auto;
}

/* Message Items */
.mn-message-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #dddfe2;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    gap: 12px;
}

.mn-message-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mn-message-item.unread {
    background: rgba(177, 136, 25, 0.05);
}

.mn-message-avatar {
    position: relative;
    flex-shrink: 0;
}

.mn-message-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.mn-message-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.mn-message-status.online { background: #2ecc71; }
.mn-message-status.offline { background: #65676b; }
.mn-message-status.away { background: #f39c12; }

.mn-message-content {
    flex: 1;
    min-width: 0;
}

.mn-message-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.mn-message-name {
    font-weight: 600;
    font-size: 1.4rem;
    color: #000000;
    margin: 0;
}

.mn-message-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mn-message-text {
    margin: 0;
    font-size: 1.3rem;
    color: #65676b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.mn-message-text.you {
    color: #b18819;
}

.mn-message-badge {
    background: #b18819;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 8px;
}

/*  */
/* Navbar Messages Dropdown Styles */
.nav-message-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    transition: all 0.2s ease;
    cursor: pointer;
    background: #fff;
}

.nav-message-item:hover {
    background: #f8f9fa;
    transform: translateX(2px);
}

.nav-message-item--important {
    background: linear-gradient(90deg, #fff 0%, #fff8f0 100%);
    border-left: 3px solid #ffc107;
}

.nav-message-item--important:hover {
    background: linear-gradient(90deg, #f8f9fa 0%, #fff3e0 100%);
}

.nav-message-item--inactive {
    opacity: 0.7;
    background: #f8f9fa;
}

.nav-message-item--expired {
    opacity: 0.5;
    background: #f1f3f5;
    text-decoration: line-through;
}

/* Message Icon */
.nav-message-icon {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #667eea;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.nav-message-important-star {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ffc107;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Message Content */
.nav-message-content {
    flex: 1;
    min-width: 0;
}

.nav-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}

.nav-message-title {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-message-type {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 12px;
    background: #e9ecef;
    color: #495057;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-message-type.info { background: #e3f2fd; color: #1976d2; }
.nav-message-type.security { background: #ffebee; color: #c62828; }
.nav-message-type.announcement { background: #f3e5f5; color: #7b1fa2; }
.nav-message-type.alert { background: #fff3e0; color: #f57c00; }
.nav-message-type.billing { background: #e8f5e9; color: #388e3c; }
.nav-message-type.reminder { background: #fff9c4; color: #f9a825; }
.nav-message-type.promotion { background: #fce4ec; color: #d81b60; }
.nav-message-type.feedback { background: #e0f2f1; color: #00796b; }

/*  */
/* Messages List Styling */
.mn-messages-list {
    max-height: 400px;
    overflow-y: auto;
}

.mn-message-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.mn-message-item:hover {
    background-color: #f9fafb;
}

.mn-message-item.unread {
    background-color: #fefce8;
}

.mn-message-item.unread:hover {
    background-color: #fef9c3;
}

.mn-message-item.important {
    border-left: 3px solid #b18819;
}

.mn-message-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.mn-message-icon i {
    font-size: 18px;
}

.mn-message-content {
    flex: 1;
    min-width: 0;
    position: relative;
}

.mn-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: wrap;
    gap: 8px;
}

.mn-message-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.mn-message-time {
    font-size: 11px;
    color: #9ca3af;
}

.mn-message-preview {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mn-message-unread-dot {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #b18819;
    border-radius: 50%;
}

/* Custom scrollbar */
.mn-messages-list::-webkit-scrollbar {
    width: 6px;
}

.mn-messages-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.mn-messages-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.mn-messages-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}


/* Message Preview */
.nav-message-preview {
    font-size: 12px;
    color: #6c757d;
    margin: 0 0 6px 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Footer */
.nav-message-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
}

.nav-message-date {
    color: #adb5bd;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-message-date i {
    font-size: 10px;
}

.nav-message-important-badge,
.nav-message-expired-badge,
.nav-message-inactive-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.nav-message-important-badge {
    background: #fff3cd;
    color: #856404;
}

.nav-message-expired-badge {
    background: #f8d7da;
    color: #721c24;
}

.nav-message-inactive-badge {
    background: #e2e3e5;
    color: #383d41;
}

/* Scrollbar for dropdown */
.messages-dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

.messages-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.messages-dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.messages-dropdown-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.messages-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Empty state */
.messages-dropdown-empty {
    padding: 30px;
    text-align: center;
    color: #6c757d;
}

.messages-dropdown-empty i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/*  */
/* Unread message styling */
.nav-message-item--unread {
    background: #f0f7ff;
    border-left: 3px solid #4a90e2;
}

.nav-message-item--unread:hover {
    background: #e8f0fe;
}

.nav-message-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #4a90e2;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.nav-message-unread-indicator {
    color: #4a90e2;
    font-size: 12px;
    margin-right: 6px;
    display: inline-block;
}

.nav-message-unread-badge {
    background: #4a90e2;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

/* Read vs unread title styling */
.nav-message-item--unread .nav-message-title {
    font-weight: 700;
    color: #1a202c;
}

.nav-message-item:not(.nav-message-item--unread) .nav-message-title {
    font-weight: 500;
    color: #4a5568;
}


/* Typing Indicator */
.mn-message-typing {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mn-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b18819;
    animation: mn-typing 1.4s infinite ease-in-out both;
}

.mn-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.mn-typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes mn-typing {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ===== DROPDOWN ITEMS ===== */
.mn-dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    color: #000000;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    gap: 12px;
}

.mn-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.mn-dropdown-icon {
    width: 20px;
    color: #65676b;
    font-size: 1.2rem;
    text-align: center;
}

.mn-dropdown-text {
    flex: 1;
}

.mn-dropdown-text h6 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #000000;
}

.mn-dropdown-text p {
    margin: 2px 0 0;
    font-size: 1.3rem;
    color: #65676b;
}

.mn-dropdown-divider {
    height: 1px;
    background-color: #dddfe2;
    margin: 8px 0;
    border: none;
}

/* Text danger support for logout */
.mn-dropdown-item.text-danger .mn-dropdown-icon,
.mn-dropdown-item.text-danger .mn-dropdown-text h6 {
    color: #e41e3f;
}

.mn-dropdown-item.text-danger:hover .mn-dropdown-icon,
.mn-dropdown-item.text-danger:hover .mn-dropdown-text h6 {
    color: #c53030;
}

/* ===== MOBILE MENU ===== */
.mn-mobile-menu {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mn-mobile-menu.show {
    transform: translateX(0);
}

.mn-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #dddfe2;
}

.mn-mobile-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mn-mobile-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #b18819;
}

.mn-mobile-user-info h6 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #000000;
}

.mn-mobile-user-info small {
    display: block;
    font-size: 1.2rem;
    color: #65676b;
    margin-top: 4px;
}

.mn-mobile-close {
    background: none;
    border: none;
    color: #65676b;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.mn-mobile-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #b18819;
}

.mn-mobile-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

.mn-mobile-menu-item {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    text-decoration: none;
    color: #000000;
    gap: 16px;
    font-size: 1.4rem !important;
}

.mn-mobile-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: #b18819;
}

.mn-mobile-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 1.4rem !important;
}

.mn-mobile-menu-item.text-danger {
    color: #e41e3f;
}

.mn-mobile-menu-item.text-danger:hover {
    background: rgba(228, 30, 63, 0.1);
}

.mn-mobile-badge {
    margin-left: auto;
    background: #e41e3f;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.mn-mobile-nav-link {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    text-decoration: none;
    color: #000000;
    transition: all 0.2s ease;
    gap: 16px;
}

.mn-mobile-nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: #b18819;
}

.mn-mobile-nav-link i {
    width: 20px;
    text-align: center;
    font-size: 1.2rem;
    color: #65676b;
}

.mn-mobile-nav-link:hover i {
    color: #b18819;
}

.mn-mobile-footer {
    padding: 16px;
    border-top: 1px solid #dddfe2;
}

.mn-mobile-dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.mn-mobile-dark-mode-toggle span {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #000000;
}

.mn-mobile-dark-mode-toggle i {
    color: #b18819;
}

/* Switch toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #65676b;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #b18819;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Mobile Overlay */
.mn-mobile-overlay {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mn-mobile-overlay.show {
    opacity: 1;
    visibility: visible;
}

/*  */
/*  */
.mb-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.mb-modal__header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.mb-modal__header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mb-modal__fullscreen {
    background-color: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
    padding: 4px;
    border-radius: 6px;
}

.mb-modal__fullscreen:hover {
    color: #b18819;
    background-color: #f3f4f6;
}

.mb-modal__close {
    background-color: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
    line-height: 1;
    padding: 0 4px;
}

.mb-modal__close:hover {
    color: #374151;
}

.mb-modal__footer {
    display: flex;
    justify-content:space-between !important;
    align-items: center;
}

.mb-btn--link {
    background-color: none;
    color: #b18819 !important;
    text-decoration: none;
}

.mb-btn--link:hover {
    text-decoration: underline;
    background-color: none;
}

/* ===== SCROLLBARS ===== */
.mn-notifications-list::-webkit-scrollbar,
.mn-messages-list::-webkit-scrollbar,
.mn-mobile-body::-webkit-scrollbar {
    width: 6px;
}

.mn-notifications-list::-webkit-scrollbar-track,
.mn-messages-list::-webkit-scrollbar-track,
.mn-mobile-body::-webkit-scrollbar-track {
    background: #f0f2f5;
    border-radius: 3px;
}

.mn-notifications-list::-webkit-scrollbar-thumb,
.mn-messages-list::-webkit-scrollbar-thumb,
.mn-mobile-body::-webkit-scrollbar-thumb {
    background: #65676b;
    border-radius: 3px;
    opacity: 0.5;
}

.mn-notifications-list::-webkit-scrollbar-thumb:hover,
.mn-messages-list::-webkit-scrollbar-thumb:hover,
.mn-mobile-body::-webkit-scrollbar-thumb:hover {
    opacity: 0.7;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 1100px) {
    .mn-nav-link {
        width: 60px;
    }

    .mn-nav-icon {
        font-size: 1.6rem;
    }
}

/* Small Tablet */
@media (max-width: 900px) {
    .mn-nav-items {
        flex: 1;
        justify-content: space-around;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .mn-nav-items {
        display: none;
    }

    .mn-mobile-toggle {
        display: block;
    }

    .mn-quick-btn {
        width: 36px;
        height: 36px;
    }

    .mn-user-avatar {
        width: 28px;
        height: 28px;
    }

    /* Mobile Dropdowns */
    .mn-dropdown-menu {
        position: fixed;
        top: 56px !important;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-height: none !important;
        height: calc(100vh - 56px);
        border-radius: 0;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .mn-dropdown-menu.show {
        transform: translateX(0);
    }

    .mn-dropdown-header {
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 3;
    }

    .mn-notifications-tabs {
        justify-content: flex-start;
        padding: 12px 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mn-notifications-list,
    .mn-messages-list {
        max-height: none !important;
        height: calc(100vh - 200px);
    }

    .mn-dropdown-footer {
        position: sticky;
        bottom: 0;
        background: #ffffff;
        z-index: 3;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .mn-nav-container {
        padding: 0 12px;
    }

    .mn-brand-link span {
        display: none;
    }

    .mn-notification-item,
    .mn-message-item {
        padding: 10px 12px;
    }

    .mn-notification-avatar {
        width: 36px;
        height: 36px;
    }

    .mn-message-avatar img {
        width: 40px;
        height: 40px;
    }
}

/* ===== UTILITY CLASSES ===== */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-block { display: block !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-flex { display: flex !important; }
    .d-md-block { display: block !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-block { display: block !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-block { display: block !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
}

/* Bootstrap margin utilities */
.ms-auto { margin-left: auto !important; }
.me-2 { margin-right: 0.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }

/* Bootstrap text utilities */
.text-muted { color: #65676b !important; }
.text-danger { color: #e41e3f !important; }

/* Bootstrap flex utilities */
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }

/* ===== MAIN CONTENT ===== */
.mn-main-content {
    min-height: calc(100vh - 56px);
    background: #f0f2f5;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Form switch */
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 2.5em;
    margin-bottom: 0.125rem;
}

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0,0,0,.25);
    appearance: none;
}

.form-check-input[type=checkbox] {
    border-radius: 0.25em;
}

.form-check-input:checked {
    background-color: #b18819;
    border-color: #b18819;
}

.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: #b18819;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(177, 136, 25, 0.25);
}

.form-check-input:checked:focus {
    box-shadow: 0 0 0 0.25rem rgba(177, 136, 25, 0.25);
}

.form-switch {
    padding-left: 2.5em;
}

.form-switch .form-check-input {
    width: 2em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b18819'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.ms-2 {
    margin-left: 0.5rem !important;
}

/*  */
/* ============================================
   POLL SYSTEM CSS - ALL PL-PREFIXED CLASSES
   ============================================ */

/* ============ STATS CARDS ============ */
.pl-stat-card-small {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 0;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pl-stat-card-small:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.pl-stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

.pl-stat-icon i {
    color: var(--primary-color) !important;
}

.pl-stat-content {
    flex: 1;
    margin-left: 16px;
}

.pl-stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: #2d3748;
    margin-bottom: 4px;
}

.pl-stat-label {
    font-size: 0.875rem;
    color: #718096;
    font-weight: 500;
}

/* ============ LOADING SPINNER ============ */
.pl-loading-spinner {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin: 20px 0;
}

.pl-spinner {
    border: 4px solid var(--primary-color);
    border-top: 4px solid var(--primary-color2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: pl-spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes pl-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============ POLL CARDS ============ */
.pl-poll-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pl-poll-card:hover {
    background-color: var(--card-bg-hover);
}

.pl-poll-card:hover h5.pl-poll-title {
    color:#010102;
}

.pl-poll-card-featured {
    border-left: 5px solid #f59e0b;
    background-color: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
    position: relative;
    overflow: hidden;
}

.pl-poll-card-featured::before {
    content: '⭐ Featured';
    position: absolute;
    top: 10px;
    right: -30px;
    background-color: #f59e0b;
    color: white;
    padding: 4px 30px;
    font-size: 0.95rem;
    font-weight: 600;
    transform: rotate(45deg);
    transform-origin: center;
}

.pl-poll-header {
    margin-bottom: 20px;
    text-align: left;
}

.pl-poll-title {
    font-size: 1.8rem !important;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 8px;
    line-height: 1.4;
}

.pl-poll-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1.15rem !important;
    color: #718096;
}

.pl-poll-meta span {
    display: flex;
    align-items: center;
}

.pl-poll-meta i {
    margin-right: 4px;
    font-size: 1.15rem !important;
}

.pl-poll-meta .badge {
    font-size: 1.15rem !important;
}

.pl-poll-body {
    margin-top: 16px;
    text-align: left;
}

.pl-poll-body p {
  font-size: 1.25rem !important;
}

/* ============ VOTING SECTION ============ */
.pl-voting-section {
    background-color: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #e2e8f0;
}

.pl-vote-bars-container {
    display: flex;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    margin: 12px 0;
    position: relative;
    background: #e2e8f0;
}

.pl-vote-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    min-width: 40px;
}

.pl-vote-bar-yes {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
}

.pl-vote-bar-no {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: white;
}

.pl-bar-label {
    color: white;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    font-size: 1.3rem !important;
    padding: 0 8px;
    z-index: 1;
}

/* ============ POLL STATS ============ */
.pl-poll-stats {
    display: flex;
    gap: 24px;
    align-items: center;
}

.pl-poll-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4a5568;
    font-size: 1.2rem !important;
    font-weight: 500;
}

.pl-poll-time {
  font-size: 1.1rem;
}

.pl-poll-stat i {
    color: #3498db;
    font-size: 1rem;
}

.pl-view-poll-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    background: #2d3748;
    color: white;
    border: 2px solid #2d3748;
}

.pl-view-poll-btn:hover {
    background: #1a202c;
    border-color: #1a202c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============ EMPTY STATE ============ */
.pl-empty-state {
    text-align: center;
    padding: 60px 30px;
    background: #ffffff;
    border-radius: 16px;
    margin: 30px 0;
}

.pl-empty-state-icon {
    font-size: 4rem;
    color: #cbd5e0;
    margin-bottom: 24px;
    opacity: 0.7;
}

.pl-empty-state h4 {
    font-size: 1.6rem !important;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
}

.pl-empty-state p {
    color: #718096;
    font-size: 1.25rem;
    margin-bottom: 24px;
}

/* ============ MODAL SYSTEM ============ */
.pl-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.5);
    animation: pl-modal-fade-in 0.3s ease;
}

.pl-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

@keyframes pl-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pl-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.pl-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 800px;
    z-index: 9999;
    animation: pl-modal-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pl-modal-slide-up {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pl-modal-content {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.pl-modal-header {
    padding: 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pl-modal-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    display: flex;
    align-items: center;
}

.pl-modal-title i {
    margin-right: 12px;
    color: #3498db;
}

.pl-modal-close {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #718096;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.25rem;
}

.pl-modal-close:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
    transform: rotate(90deg);
}

.pl-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* ============ COMMENT SYSTEM ============ */
.pl-comment-section {
    margin-top: 32px;
}

.pl-comment-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 24px;
}

.pl-comment-section-header h5 {
    font-size: 1.6rem !important;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    display: flex;
    align-items: center;
}

.pl-comment-section-header i {
    margin-right: 10px;
    color: #3498db;
}

.pl-comment-count {
    background: #4a5568;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 1.1rem !important;
    font-weight: 600;
}

/* ============ COMMENT FORM ============ */
.pl-comment-form {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #e2e8f0;
}

.pl-comment-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.pl-comment-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.pl-comment-form-header div h6 {
    font-size: 1.3rem !important;
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 4px 0;
}

.pl-comment-form-header div small {
    color: #718096;
    font-size: 1.2rem !important;
}

.pl-comment-input-wrapper {
    margin-bottom: 20px;
}

.pl-comment-input {
    width: 100%;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    font-size: 1.2rem !important;
    line-height: 1.6;
    transition: all 0.3s ease;
    background: #ffffff;
}

.pl-comment-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
    background: #ffffff;
}

.pl-comment-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pl-comment-actions {
    display: flex;
    gap: 12px;
}

.pl-comment-action-btn {
    padding: 10px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-size: 1.2rem !important;
    font-weight: 500;
}

.pl-comment-action-btn:hover {
    background: #f8fafc;
    transform: translateY(-2px);
}

.pl-comment-action-btn.active {
    border-color: #3498db;
    background: #e3f2fd;
    color: #3498db;
}

.pl-comment-action-btn.yes.active {
    border-color: #10b981;
    background: #d1fae5;
    color: #065f46;
}

.pl-comment-action-btn.no.active {
    border-color: #ef4444;
    background: #fee2e2;
    color: #991b1b;
}

.pl-comment-submit-btn {
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--primary-color2) 0%, var(--primary-color) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 1.3rem !important;
}

.pl-comment-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-color2) 0%, var(--primary-color) 100%);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    opacity:0.5;
}

.pl-comment-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============ COMMENT ITEMS ============ */
.pl-comment-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pl-comment-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
}

.pl-comment-item:hover {
    background-color: #f8f8f8 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pl-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 16px;
}

.pl-comment-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl-comment-user-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem !important;
    flex-shrink: 0;
}

.pl-comment-user-info {
    display: flex;
    flex-direction: column;
}

.pl-comment-username {
    font-weight: 600;
    color: #2d3748;
    font-size: 1.35rem !important;
}

.pl-comment-timestamp {
    font-size: 1.1rem !important;
    color: #718096;
}

.pl-comment-position {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.pl-comment-position.yes {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.pl-comment-position.no {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

.pl-comment-content {
    line-height: 1.7;
    color: #2d3748;
    margin-bottom: 20px;
    font-size: 1.25rem !important;
}

.pl-comment-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.pl-comment-votes {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    padding: 6px 12px;
    border-radius: 20px;
    /* border: 1px solid #e2e8f0; */
}

.pl-vote-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #718096;
}

.pl-vote-btn:hover {
    background: #f8fafc;
}

.pl-vote-btn.active {
    border-color: #3498db;
    color: #3498db;
}

.pl-vote-btn.upvote.active {
    border-color: #10b981;
    color: #10b981;
    background: #d1fae5;
}

.pl-vote-btn.downvote.active {
    border-color: #ef4444 !important;
    color: #ef4444;
    background: #fee2e2;
}

.pl-vote-count {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
    font-size: 1.3rem !important;
}

.pl-vote-count.positive {
    color: #10b981;
}

.pl-vote-count.negative {
    color: #ef4444;
}

.pl-reply-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #4a5568;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 1.3rem !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pl-reply-btn:hover {
    background: #f8fafc;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ============ REPLY FORM ============ */
.pl-reply-form {
    margin-top: 20px;
    display: none;
    animation: pl-form-slide-down 0.3s ease;
}

.pl-reply-form.show {
    display: block;
}

@keyframes pl-form-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pl-reply-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    resize: vertical;
    min-height: 80px;
    margin-bottom: 12px;
    font-family: inherit;
    font-size: 1.2rem !important;
    transition: all 0.3s ease;
}

.pl-reply-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.pl-reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.pl-reply-cancel-btn {
    padding: 8px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    font-weight: 500;
    color: #718096;
    transition: all 0.3s ease;
}

.pl-reply-cancel-btn:hover {
    background: #f8fafc;
    color: #4a5568;
}

.pl-reply-submit-btn {
    padding: 8px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pl-reply-submit-btn:hover {
    opacity: 0.9;
}

/* ============ REPLIES LIST ============ */
.pl-replies-list {
    margin-top: 20px;
    margin-left: 60px;
    border-left: 3px solid #e2e8f0;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pl-reply-item {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.pl-reply-item:hover {
    background: #f8f8f8;
}

.pl-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pl-reply-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pl-reply-user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.pl-reply-username {
    font-weight: 600;
    font-size: 1.3rem !important;
    color: #2d3748;
}

.pl-reply-timestamp {
    font-size: 1.1rem !important;
    color: #718096;
}

.pl-reply-content {
    font-size: 1.2rem !important;
    line-height: 1.6;
    color: #2d3748;
}

/* ============ COMMENT EMPTY STATE ============ */
.pl-comment-empty-state {
    text-align: center;
    padding: 60px 30px;
    background: #f8fafc;
    border-radius: 16px;
    border: 2px dashed #cbd5e0;
    margin: 30px 0;
}

.pl-comment-empty-icon {
    font-size: 3.5rem;
    color: #cbd5e0;
    margin-bottom: 20px;
    opacity: 0.7;
}

.pl-comment-empty-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 10px;
}

.pl-comment-empty-text {
    color: #718096;
    font-size: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

/* ============ TOAST NOTIFICATIONS ============ */
.pl-toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 350px;
}

.pl-toast {
    background: #2d3748;
    color: white;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    animation: pl-toast-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes pl-toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pl-toast span {
    flex: 1;
    font-weight: 500;
}

.pl-toast .btn-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.pl-toast .btn-close:hover {
    color: white;
}

.pl-toast-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.pl-toast-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.pl-toast-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #1f2937;
}

.pl-toast-warning .btn-close {
    color: rgba(31, 41, 55, 0.7);
}

.pl-toast-warning .btn-close:hover {
    color: #1f2937;
}

.pl-toast-info {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

/* ============ PAGINATION ============ */
#pl-polls-pagination {
    margin-top: 30px;
}

#pl-polls-pagination .page-item.active .page-link {
    background: #3498db;
    border-color: #3498db;
    color: white;
}

#pl-polls-pagination .page-link {
    color: #4a5568;
    border: 1px solid #e2e8f0;
    padding: 10px 18px;
    margin: 0 4px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#pl-polls-pagination .page-link:hover {
    background: #f8fafc;
    border-color: #3498db;
    color: #3498db;
}

#pl-polls-pagination .page-item.disabled .page-link {
    color: #cbd5e0;
    background: #f8fafc;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

/* ============ REFRESHING STATE ============ */
.pl-refreshing {
    /* position: relative; */
    pointer-events: none;
}

.pl-refreshing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    border: 4px solid #e5e7eb;
    border-top:4px solid var(--primary-color2);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
    margin-bottom: 12px;
}

.poll-user small {
  font-size:1.2rem !important;
}

/* ============ RESPONSIVE DESIGN ============ */
@media (max-width: 768px) {
    .pl-modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .pl-vote-buttons {
        grid-template-columns: 1fr;
    }

    .pl-comment-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .pl-comment-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pl-comment-submit-btn {
        width: 100%;
        justify-content: center;
    }

    .pl-replies-list {
        margin-left: 30px;
        padding-left: 16px;
    }

    .pl-comment-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pl-poll-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pl-poll-stat {
        font-size: 1.35rem !important;
    }

    .pl-toast-container {
        left: 20px;
        right: 20px;
        bottom: 20px;
        max-width: none;
    }

    .pl-modal-header {
        padding: 16px;
    }

    .pl-modal-body {
        padding: 16px;
    }

    .pl-poll-meta {
        font-size: 1.25rem !important;
    }

    .pl-voting-section small {
        font-size: 1.4rem !important;
    }

    .pl-vote-btn {
      font-size: 1.7rem !important;
    }

    .related-poll-question {
        font-size: 1.5rem !important;
    }

    .pl-stat-card span {
       font-size: 1.2rem !important;
    }

    .reply-form .card small {
      font-size: 1.275rem;
    }

    .comment-actions span {
        font-size: 1.3rem;
    }

    .comment-actions .upvote-btn,
    .comment-actions .downvote-btn {
       font-size: 1.6rem;
    }
}

@media (max-width: 576px) {
    .pl-stat-card-small {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .pl-stat-icon {
        margin-bottom: 12px;
        margin-left: 0;
    }

    .pl-stat-content {
        margin-left: 0;
    }

    .pl-comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pl-comment-position {
        align-self: flex-start;
    }

    .pl-replies-list {
        margin-left: 20px;
        padding-left: 12px;
    }
}

/*  */
.pl-vote-buttons {
    display: flex;
    gap: 1.5rem;
    margin: 2rem 0;
    justify-content: center;
    align-items: center;
}

.pl-vote-buttons-side {
    gap: 1.5rem;
    margin: 2rem 0;
    justify-content: center;
    align-items: center;
}

.pl-vote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    background: linear-gradient(145deg, #f0f0f0, #ffffff);
    color: #555;
    font-weight: 600;
    font-size: 1.3rem !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    outline: none;
    min-width: 150px;
    position: relative;
    overflow: hidden;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1),
                -5px -5px 15px rgba(255, 255, 255, 0.8);
}

.pl-vote-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.pl-vote-btn:hover::before {
    left: 100%;
}

.pl-vote-btn:hover {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.15),
                -8px -8px 20px rgba(255, 255, 255, 0.9);
}

.pl-vote-btn:active {
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1),
                -3px -3px 10px rgba(255, 255, 255, 0.8);
}

.pl-vote-btn-yes {
    color: #059669;
    border: 2px solid transparent;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    position: relative;
}

.pl-vote-btn-yes::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50px;
    padding: 2px;
    background: linear-gradient(145deg, #10b981, #059669);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.7;
}

.pl-vote-btn-yes:hover::after {
    opacity: 1;
}

.pl-vote-btn-no {
    color: #dc2626;
    border: 2px solid #dc2626;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    position: relative;
}

.pl-vote-btn-no::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50px;
    padding: 2px;
    background: linear-gradient(145deg, #ef4444, #dc2626);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.7;
}

.pl-vote-btn-no:hover::after {
    opacity: 1;
}

.pl-vote-btn-active {
    color: white !important;
    box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.2),
                inset -5px -5px 15px rgba(255, 255, 255, 0.1);
}

.pl-vote-btn-active.pl-vote-btn-yes {
    background: linear-gradient(145deg, #059669, #10b981);
}

.pl-vote-btn-active.pl-vote-btn-yes::after {
    display: none;
}

.pl-vote-btn-active.pl-vote-btn-no {
    background: linear-gradient(145deg, #dc2626, #ef4444);
}

.pl-vote-btn-active.pl-vote-btn-no::after {
    display: none;
}

.pl-vote-btn-active:hover {
    box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.2),
                inset -5px -5px 15px rgba(255, 255, 255, 0.1);
}

.pl-vote-btn i {
    margin-right: 0.75rem;
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.pl-vote-btn:hover i {
    transform: scale(1.1);
}

.pl-vote-btn-active i {
    transform: scale(1.1);
}

.pl-vote-btn .fa-check {
    font-size: 1.3rem !important;
    color:#fff !important;
}

.pl-vote-btn .ms-2 {
    margin-left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    opacity: 0.9;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.pl-vote-btn .ms-2 i {
    margin-right: 0;
    font-size: 0.9rem;
}

/* Glow effect for active buttons */
.pl-vote-btn-active {
    animation: gentlePulse 2s infinite;
}

@keyframes gentlePulse {
    0%, 100% {
        box-shadow:
            inset 5px 5px 15px rgba(0, 0, 0, 0.2),
            inset -5px -5px 15px rgba(255, 255, 255, 0.1),
            0 0 15px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            inset 5px 5px 15px rgba(0, 0, 0, 0.2),
            inset -5px -5px 15px rgba(255, 255, 255, 0.1),
            0 0 25px rgba(255, 255, 255, 0.4);
    }
}

/*  */
.prd-filters {
    /* display: flex; */
    gap: 10px !important;
}

.prd-filter-btn {
    padding: 2px 8px !important;
    background: #F0F0F0 !important;
    border: 1px solid #E8E8E8 !important;
    border-radius: 7px !important;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
    margin-bottom: 5px;
    color:#303030;
}

.prd-filter-btn:hover {
    border-color: #0066cc;
}

.prd-filter-btn.active {
    background: var(--primary-color2) !important;
    color: var(--primary-color2) !important;
    border-color: var(--primary-color2) !important;
}

.prd-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    /* border-color: #d0d7e2; */
}

.prd-verified-badge {
    color: #0066cc;
    font-size: 1.4rem;
}

.prd-edited-badge {
    color: #888;
    font-style: italic;
    font-size: 1.2rem;
    margin-left: 5px;
}

/* Ellipsis Menu - Positioned at top right */
.prd-ellipsis-btn:hover {
    background: #f5f7fa;
    color: #333;
    border-color: #bbb;
}

.prd-dropdown-item:hover {
    background: #f5f7fa;
    color: #0066cc;
}

.prd-dropdown-divider {
    height: 1px;
    background: #eee;
    margin: 8px 0;
}

.prd-status-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.prd-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: 500;
}

.prd-skill-badge {
    background: #eef2ff;
    color: #4f46e5;
}

.prd-correct-badge {
    background: #f0fdf4;
    color: #16a34a;
}

.prd-active-badge {
    background: #fffbeb;
    color: #d97706;
}

.prd-jackpot-badge {
    background: #fef3c7;
    color: #92400e;
}

/* Prediction Content */
.prd-company-icon {
    color: #666;
}

.prd-prediction-code {
    font-size: 1.3rem;
    color: #666;
    margin-top: 5px;
}

/* Stats Bar */
.prd-stats-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    padding: 12px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.prd-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 1.4rem;
}

.prd-stat-icon {
    width: 20px;
    text-align: center;
}

.prd-stat-count {
    font-weight: 600;
    color: #444;
}

/* Action Bar */
.prd-primary-actions {
    display: flex;
    gap: 10px;
}

.prd-action-btn.save {
    color: #0066cc;
    border-color: #b3d9ff;
    background: var(--primary-color) !important;
}

.prd-action-btn.save:hover {
    background: #d1e7ff;
}

.prd-action-btn.view {
    color: #059669;
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.prd-action-btn.view:hover {
    background: #d1fae5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .prd-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .prd-filters {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .prd-status-badges {
        justify-content: flex-start;
    }

    .prd-stats-bar {
        gap: 15px;
        justify-content: space-between;
    }

    .prd-primary-actions {
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .prd-stats-bar {
        gap: 10px;
    }

    .prd-stat-item {
        font-size: 1.2rem;
    }
}

/* Animation for dropdown */
@keyframes prd-dropdown-fade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*  */
/*  */
 .prd-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.prd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.prd-title {
    font-size: 2.8rem;
    color: #1a1a1a;
}

/* Scrollable Filter Container */
.prd-filters-wrapper {
    align-items: center;
    border-radius: 16px;
    padding: 0;
    margin: 5px 0 10px 0;
    position: relative;
    overflow: hidden;
}

.prd-filters-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    /* background: linear-gradient(90deg, #b18819, #d4af37, #ffd700, #b18819); */
}

.prd-filters-scroll-container {
    position: relative;
    display: flex;
    align-items: center;
}

.prd-scroll-btn {
    position: absolute;
    top: 0;
    height: 50px;
    width: 50px;
    background: white;
    border: none;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.6rem;
    transition: all 0.3s;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.prd-scroll-btn:hover {
    background: var(--primary-color);
    color: var(--primary-color);
}

.prd-scroll-btn.left {
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 70%, transparent 100%);
}

.prd-scroll-btn.right {
    right: 0;
    background: linear-gradient(270deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 70%, transparent 100%);
}

.prd-scroll-btn.hidden {
    display: none;
}

.prd-filters {
    display: flex;
    gap: 8px;
    padding: 10px 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    white-space: nowrap;
    position: relative;
    scroll-padding: 0 20px;
}

.prd-filters::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.prd-filter-btn {
    padding: 2px 8px !important;
    background: white;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.prd-filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.prd-filter-btn.ta-active {
    background: var(--primary-color2) !important;
    color: #fff !important;
    border-color: var(--primary-color2) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .prd-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .prd-filters-wrapper {
        width: 100%;
    }

    .prd-scroll-btn {
        width: 40px;
    }
}

@media (max-width: 480px) {
    .prd-filter-btn {
        padding: 6px 12px;
        font-size: 1.3rem;
    }

    .prd-scroll-btn {
        width: 35px;
    }
}
/*  */


/* ========== ACTION BAR ========== */

.prd-action-btn.liked:hover {
    background: rgba(249, 24, 128, 0.1);
}

.prd-action-btn.view-btn:hover {
    background: rgba(29, 155, 240, 0.1);
    color: #1d9bf0;
}

.prd-action-btn.share-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #0a9f6e;
}

.prd-action-btn.save-btn:hover {
    background: rgba(255, 212, 0, 0.1);
    color: #ffd400;
}

.prd-action-group {
    position: relative;
}

.prd-share-dropdown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 8px;
    min-width: 160px;
    display: none;
    z-index: 100;
    margin-bottom: 8px;
}

.prd-action-group:hover .prd-share-dropdown {
    display: block;
}

/* Stats bar styling */
.prd-stats-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 1.4rem;
}

.prd-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
}

.prd-stat-icon {
    width: 20px;
    text-align: center;
}

.prd-stat-count {
    font-weight: 600;
    color: #444;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .prd-stats-bar {
        gap: 12px;
        justify-content: space-between;
    }

    .prd-stat-item {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .prd-stats-bar {
        gap: 8px;
    }
}


/*  */
/* Mobile First Design */
.prd-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 6px !important;
    position: relative;
    border: 1px solid #eaeaea;
    width:100%;
}

/* Header */
.prd-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.prd-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.prd-user-avatar,
img.prd-user-avatar,
.prd-user-avatar-sm,
img.prd-user-avatar-sm {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    object-fit: cover !important;
}

.prd-user-avatar-sm,
img.prd-user-avatar-sm {
    width: 24px;
    height: 24px;
    font-size: 1.0rem;
}

.prd-user-details {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    line-height: 1.2;
    padding-top: 5px;
}

.prd-username a {
    font-weight: 600;
    color: #1a1a1a !important;
    font-size: 1.5rem;
    margin-bottom: 0; /* Changed from 2px to 0 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3; /* Match parent line height */
    text-decoration: none;
}

.prd-username a:hover {
  text-decoration: underline !important;
}

.prd-timestamp {
    font-size: 1.2rem;
    color: #888;
}

.prd-company-info,
.prd-timestamp,
.separator-dot {
    margin-bottom: 4px;
    padding-bottom: 4px;
}

.separator-dot {
    justify-content: center;
    align-items: center;
    color: #adb5bd;
}

/* Ellipsis Menu */
.prd-ellipsis-container {
    position: relative;
}

.prd-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 160px;
    z-index: 100;
    display: none;
    padding: 8px 0;
    margin-top: 4px;
}

.prd-dropdown-menu.show {
    display: block;
}

.prd-dropdown-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
    cursor: pointer;
    font-size: 1.4rem;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.prd-dropdown-item:active {
    background: #f5f7fa;
}


/* Share Modal */
.prd-share-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.prd-share-modal.show {
    display: flex;
}

.prd-share-modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 300px;
    padding: 20px;
}

.prd-share-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.prd-share-modal-header h3 {
    margin: 0;
    font-size: 1.8rem;
    color: #333;
}

.prd-share-modal-close {
    background: none;
    border: none;
    font-size: 2.4rem;
    cursor: pointer;
    color: #666;
}

.prd-share-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prd-share-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
}

.prd-share-option:active {
    background: #f5f5f5;
}

@media (max-width: 768px) {
    .prd-card {
        padding: 10px !important;
        margin-bottom: 16px;
    }
}

/* Tablet and Desktop */
@media (min-width: 768px) {
    .prd-card {
        padding: 20px;
        margin-bottom: 16px;
    }

    .prd-user-avatar {
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
    }

    .prd-username a {
        font-size: 1.6rem;
    }

    .prd-action-btn {
        padding: 10px 12px;
        font-size: 1.5rem;
    }

    .prd-action-btn:hover {
        background: #f5f5f5;
    }

    .prd-action-btn.save-btn:hover {
        background: rgba(255, 212, 0, 0.1);
    }

    .prd-action-btn.save-btn.saved:hover {
        background: rgba(255, 212, 0, 0.2);
    }

    .prd-ellipsis-btn:hover {
        background: #f5f7fa;
    }

    .prd-dropdown-item:hover {
        background: #f5f7fa;
    }

    .prd-share-option:hover {
        background: #f5f5f5;
    }
}

/* Large Screens */
@media (min-width: 1024px) {
    .prd-card {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Touch Optimization */
@media (hover: none) and (pointer: coarse) {
    .prd-action-btn {
        min-height: 44px;
    }

    .prd-ellipsis-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .prd-dropdown-item {
        min-height: 48px;
    }
}

/*  */
/* Follow Button */
.prd-follow-btn {
    padding: 6px 12px;
    border-radius: 20px;
    border: none;
    background: inherit;
    color: var(--primary-color2);
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.prd-follow-btn:hover {
    text-decoration: underline;
    background: inherit;
}

.prd-follow-btn.following {
    background: inherit;
    color: #808080;
}

.prd-follow-btn.not-following {
    background: inherit;
    color: var(--primary-color2);
}

.prd-follow-btn.following:hover {
    text-decoration: underline;
    background: inherit;
}

/* Ellipsis Menu */
.prd-ellipsis-container {
    position: relative;
}

.prd-ellipsis-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    flex-shrink: 0;
}

.prd-ellipsis-btn:active {
    background: #f5f7fa;
}

.prd-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 180px;
    z-index: 100;
    display: none;
    padding: 8px 0;
    margin-top: 4px;
}

.prd-dropdown-menu.show {
    display: block;
    animation: prd-dropdown-fade 0.2s ease;
}

@keyframes prd-dropdown-fade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.prd-dropdown-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
    cursor: pointer;
    font-size: 1.4rem;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.2s;
}

.prd-dropdown-item:active {
    background: #f5f7fa;
}

.prd-dropdown-divider {
    height: 1px;
    background: #eee;
    margin: 8px 0;
}

/* Content */
.prd-content {
    margin-top: 8px;
}

.prd-company-info {
    align-items: center;
    font-size: 1.3rem;
    color: #d4af37;
}

a.prd-company-info:hover {
    text-decoration: underline !important;
    color: inherit !important;
}

.prd-prediction-text,
.prediction-code-display-modal,
.prediction-code-display-share {
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    font-size: 1.8rem;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-align: center;
    background-color: #f9fafb;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    -webkit-overflow-scrolling: touch;
}

.prediction-code-display-modal {
    flex: 1;
    width: 100%;
    min-width: 0; /* Prevents overflow issues on mobile */
    display: block;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 1.6rem; /* Adjust for mobile readability */
    letter-spacing: 2px !important;
    font-weight:700 !important;
    padding: 8px; /* Add some padding for touch targets */
}

.prediction-code-display-share {
    letter-spacing: 15px !important;
    background-color: inherit;
    border: none;
}

.prd-prediction-text:hover,
.prediction-code-display-modal:hover,
.prediction-code-display-share:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.prd-prediction-text:active,
.prediction-code-display-modal:active,
.prediction-code-display-share:active {
    background-color: #f5f5f5;
}

/* Action Buttons */
.prd-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 0px;
    gap: 0px;
}

.prd-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px !important;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    font-size: 1.4rem;
    font-weight: 500;
    flex: 1;
    justify-content: center;
    min-width: 0;
    transition: all 0.2s;
}

.prd-action-btn:active {
    background: #f5f5f5;
}

/* Like button */
.prd-action-btn.liked {
    color: #f91880;
}

/* Save button */
.prd-action-btn.save-btn {
    color: #666666;
}

.prd-action-btn.save-btn.saved {
    color: #ffd400;
}

.prd-action-btn.save-btn:active {
    background: rgba(255, 212, 0, 0.1);
}

.prd-action-btn.save-btn.saved:active {
    background: rgba(255, 212, 0, 0.2);
}

.prd-action-btn.save-btn.saved .prd-action-count {
    color: #ffd400;
}

.prd-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.prd-action-count {
    font-size: 1.4rem !important;
    font-weight: 500;
    min-width: 20px;
    flex-shrink: 0;
}

.prd-action-btn.liked .prd-action-count {
    color: #f91880;
}

@keyframes prd-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.prd-modal {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: prd-modal-slide-up 0.3s ease;
}

@keyframes prd-modal-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.prd-modal-header {
    padding: 20px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.prd-modal-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1a1a;
}

.prd-modal-close {
    background: none;
    border: none;
    font-size: 2.4rem;
    cursor: pointer;
    color: #666;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.prd-modal-close:hover {
    background: #f5f5f5;
}

.prd-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Prediction Detail Modal */
.prd-prediction-modal {
    max-width: 400px;
}

.prd-prediction-content {
    text-align: center;
}

.prd-prediction-full-text {
    font-family: 'Courier New', monospace;
    font-size: 2.4rem;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: 2px;
    line-height: 1.4;
    margin: 20px 0;
    word-break: break-all;
}

.prd-prediction-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eaeaea;
}

.prd-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.prd-meta-value {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1a1a;
}

.prd-meta-label {
    font-size: 1.2rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Matches Modal */
#matchesModal {
    max-width: 600px;
}

.prd-matches-container {
    margin-top: 16px;
}

.prd-match-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 8px;
    /* min-height: 70px; */
    position: relative;
}

.prd-match-item:hover {
    background: #f8faff;
}

.prd-match-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #667eea;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.2rem !important;
    margin-right: 16px;
    flex-shrink: 0;
}

.prd-match-details {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.prd-match-teams {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}

.prd-match-order {
    font-size: 1.35rem;
    font-weight: 600;
    color: #9ca3af;
    min-width: 24px;
    padding-top: 2px;
}

.prd-match-teams-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.prd-match-team {
    display: block;
    font-weight: 600;
    font-size: 1.5rem;
    color: #1f2937;
    line-height: 1.4;
}

.prd-match-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0px; /* No gap */
    flex-shrink: 0;
    padding-left: 8px;
    min-width: 80px;
}

.prd-match-date {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    line-height: 1.2; /* Reduce line height */
}

.prd-match-time {
    font-size: 1rem;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2; /* Reduce line height */
    margin-top: -2px; /* Pull it up closer */
}

.prd-match-prediction {
    margin: auto;
    width: 40px;          /* Fixed width */
    height: 40px;         /* Fixed height (same as width) */
    border-radius: 50%;   /* 50% makes it a perfect circle */
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center;
    line-height: 40px;    /* Vertically centers text (same as height) */
    display: inline-block; /* Ensures proper sizing */
}

.prd-prediction-1 {
    background: #16a34a;
    color: #fff;
}

.prd-prediction-X {
    background: #d97706;
    color: #fff;
}

.prd-prediction-2 {
    background: #dc2626;
    color: #fff;
}

.prd-match-prediction--home {
    background: #10b981;
}

.prd-match-prediction--draw {
    background: #f59e0b;
}

.prd-match-prediction--away {
    background: #ef4444;
}

.pending-dash {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    color: #696969;
}

@media (max-width: 768px) {
    .prd-match-item {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .prd-match-details {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .prd-match-info {
        flex-direction: row;
        gap: 8px;
        padding: 0;
        border-left: none;
        width: 100%;
        justify-content: flex-start;
        padding-left: 34px;
    }
}

/* Icon styles inside prediction */
.prd-match-prediction i {
    font-size: 0.9rem;
}

.prd-match-prediction--pending i {
    color: white;
    font-size: 0.8rem;
}

/* Enhanced Comments Modal */
#commentsModal {
    max-width: 500px;
}

.prd-comments-container {
    margin-top: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.prd-comment-item {
    padding: 16px;
    border-radius: 8px;
    background: #f8fafc;
    margin-bottom: 12px;
    border: 1px solid #eaeaea;
}

.prd-comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.prd-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.4rem;
}

.prd-comment-user {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 1.4rem;
}

.prd-comment-time {
    font-size: 1.2rem;
    color: #888;
    margin-left: auto;
}

.prd-comment-text {
    color: #333;
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.prd-comment-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.prd-comment-like-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #666;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.prd-comment-like-btn:hover {
    background: rgba(249, 24, 128, 0.1);
    color: #f91880;
}

.prd-comment-reply-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.prd-comment-reply-btn:hover {
    background: #f5f5f5;
}

.prd-comment-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eaeaea;
}

.prd-comment-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1.4rem;
    resize: none;
    min-height: 80px;
    margin-bottom: 12px;
}

.prd-comment-submit {
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

.prd-comment-submit:hover {
    background: #5a67d8;
}

/* Empty States */
.prd-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    border-radius: var(--container-border-radius) !important;
}

.prd-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.prd-empty-text {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.prd-empty-subtext {
    font-size: 1.4rem;
}

/* Tablet and Desktop */
@media (min-width: 768px) {
    .prd-card {
        padding: 20px;
        margin-bottom: 16px;
    }

    .prd-user-avatar {
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
    }

    .prd-username a {
        font-size: 1.6rem;
    }

    .prd-action-btn {
        padding: 10px 12px;
        font-size: 1.5rem;
    }
}

/* Large Screens */
@media (min-width: 1024px) {
    .prd-card {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Touch Optimization */
@media (hover: none) and (pointer: coarse) {
    .prd-action-btn {
        min-height: 44px;
    }

    .prd-ellipsis-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .prd-dropdown-item {
        min-height: 48px;
    }

    .prd-follow-btn {
        min-height: 36px;
        min-width: 80px;
    }
}

/*  */
/* Poll Detail Header */
.poll-detail-header {
    background: linear-gradient(135deg, var(--primary-color2) 0%, var(--primary-color) 100%);
    color: white;
    padding: 2.5rem 0;
    border-radius: 0 0 20px 20px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(29, 53, 87, 0.15);
}

.poll-detail-header h1 {
    color: white;
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.poll-meta {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
}

.poll-meta span {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
}

.poll-meta i {
    margin-right: 0.4rem;
}

/* Card Styles */
.poll-card {
    border: none;
    border-radius: 15px;
    /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); */
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
    margin-bottom: 0;
    overflow: hidden;
    margin-bottom: 20px !important;
}

.poll-card .card-header {
    background-color: white;
    border-bottom: 1px solid #eee;
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.poll-card .card-body {
    padding: 1.5rem;
}

/* Progress Bars */
.poll-results-section .progress {
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #e9ecef;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

.poll-results-section .progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    transition: width 1s ease-in-out;
    position: relative;
}

.poll-context {
  border-radius: 12px !important;
}

/* Voting Buttons */
.voting-action-section .btn {
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 12px;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.voting-action-section .btn:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.btn-vote-yes {
    background: linear-gradient(135deg, #2a9d8f, #4cc9b8);
    color: white !important;
    margin-bottom: 4px;
}

.btn-vote-yes:hover {
    background: linear-gradient(135deg, #248277, #3db8a8);
    border-color: #2a9d8f;
}

.btn-vote-no {
    background: linear-gradient(135deg, #e63946, #ff6b6b);
    color: white !important;
    margin-bottom: 4px;
}

.btn-vote-no:hover {
    background: linear-gradient(135deg, #d32f3c, #ee5a5a);
    border-color: #e63946;
}

.btn-disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

/* Comments Section */
.comment-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--primary-color);
}

.comment-time {
    color: #6c757d;
    font-size: 0.85rem;
}

.comment-content {
    line-height: 1.6;
    color: #444;
}

/* Related Polls */
.related-poll-item {
    display: block;
    padding: 1rem;
    border-radius: 10px;
    background-color: white;
    margin-bottom: 0.75rem;
    text-decoration: none;
    color: #333;
    line-height: 2.1rem !important;
    transition: all 0.2s ease;
}

.related-poll-item:hover {
    text-decoration: none;
    color: #333;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.related-poll-question {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 1.3rem !important;
}

.related-poll-meta {
    font-size: 0.85rem;
    color: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
    .poll-detail-header h1 {
        font-size: 1.8rem;
    }

    .voting-action-section .btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }

    .poll-results-section .progress {
        height: 30px;
    }

    .prd-action-count {
      font-size: 1.5rem !important;
    }
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadein {
    animation: fadeIn 0.5s ease forwards;
}

/* Back Button */
.back-button {
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.back-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: white !important;
}

/* Vote Count Badge */
.vote-count-badge {
    background: linear-gradient(135deg, #f4a261, #e76f51);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/*  */
.comment-reply .card {
    background-color: #f8f9fa;
    /* border: 1px solid #dee2e6; */
}

/* Reply form styling */
.reply-form .card {
    background-color: #f0f7ff;
    border: 1px solid #cfe2ff;
}

/* Toggle button styling */
.replies-container {
    transition: max-height 0.3s ease;
}

.replies-container.collapsed {
    max-height: 0;
    overflow: hidden;
}

/* Ensure proper spacing between comments */
.comment-item + .comment-item {
    margin-top: 0.5rem;
}

/*  */
.loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .alert-notification {
        min-width: 300px;
        max-width: 400px;
    }

    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }

    .comment-user {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .user-avatar,
    .user-avatar-img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .user-avatar {
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 0.9rem;
    }

    .user-avatar-img {
        object-fit: cover !important;
    }

    .comment-time {
        font-size: 0.85rem;
        color: #6c757d;
    }

    .comment-content {
        line-height: 1.6;
        color: #333;
    }

    .related-poll-item {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid #dee2e6;
        text-decoration: none;
        color: #333;
        transition: all 0.2s;
    }

    .related-poll-item:hover {
        background-color: #f8f9fa;
    }

    .related-poll-question {
        font-weight: 500;
        margin-bottom: 0.25rem;
    }

    .related-poll-meta {
        font-size: 1.15rem;
        color: #6c757d;
    }

    .animate-fadein {
        animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /*  */
    .replies-container.d-none {
        display: none !important;
    }

    /* Smooth animation for showing replies */
    .replies-container:not(.d-none) {
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /*  */
     .comment-item {
        position: relative;
        margin-bottom: 1.5rem;
        border-radius: 16px;
        border: 1px solid transparent;
        transition: all 0.3s ease;
    }

    .replies-container {
        padding-left: 0 !important;
        margin-left: 0 !important;
        background-color: #f8f9fa;
        border-radius: 0.375rem;
        min-height: 10px;
        margin-top: 0.5rem;
    }

    .replies-container.d-none {
        display: none !important;
    }

    /* Visual indicators for debugging */
    .comment-item::before {
        /* content: 'Comment ID: ' attr(data-comment-id); */
        position: absolute;
        top: -20px;
        left: 0;
        font-size: 1.0rem;
        color: #6c757d;
        background: #e9ecef;
        padding: 2px 6px;
        border-radius: 3px;
        opacity: 0.7;
    }

    .replies-container::before {
        display: block;
        font-size: 1.0rem;
        color: #0d6efd;
        margin-bottom: 5px;
        padding: 2px 6px;
        background: #e7f1ff;
        border-radius: 3px;
    }

    .comment-depth-1 { margin-left: 1.5rem; }
    .comment-depth-2 { margin-left: 3rem; }
    .comment-depth-3 { margin-left: 4.5rem; }
    .comment-depth-4 { margin-left: 6rem; }
    .comment-depth-5 { margin-left: 7.5rem; }
    .comment-depth-6 { margin-left: 9rem; }

    .toggle-replies-btn,
    .show-reply-form-btn {
        cursor: pointer;
        transition: all 0.2s ease;
        color:#6b6b6b !important;
        border-radius: 25px !important;
    }

    .toggle-replies-btn:hover,
    .show-reply-form-btn:hover {
        background: #E5E5E5 !important;
    }

/* .downvote-btn {
  background-color: #fff;
} */

/* === COMMENT THREADING - RESPONSIVE === */

/* Base styles */
.comment-item {
    position: relative;
    transition: all 0.2s ease;
}

/* Mobile - thread line view */
@media (max-width: 768px) {
    /* Consistent small indentation for all nested comments */
    .comment-depth-1,
    .comment-depth-2,
    .comment-depth-3,
    .comment-depth-4,
    .comment-depth-5,
    .comment-depth-6 {
        margin-left: 0 !important;
        padding-left: 0 !important;

    }

    /* Make avatars smaller on mobile */
    .comment-item .user-avatar {
        width: 28px;
        height: 28px;
        font-size: 1.2rem;
    }

    /* Reduce padding in comment cards */
    .comment-item .card-body {
        padding: 0.75rem;
    }

    /* Stack action buttons on mobile */
    .comment-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Make reply button more compact */
    .comment-item .btn-outline-primary {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .replies-container {
      border-radius: 16px;
      padding-left: 0;
    }

    .comment-item h6 {
        font-size: 1.4rem;
    }

    .comment-item small {
        font-size: 1.15rem;
    }

    .comment-item p {
        font-size: 1.25rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    /* Compact comment layout */
    .comment-item .d-flex.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .comment-item .btn-outline-primary {
        margin-top: 0.25rem;
        align-self: flex-end;
    }
}

/*  */
.fa-spinner.fa-spin {
    animation: fa-spin 2s infinite linear;
    display: inline-block;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

.mn-prediction-poll-option.voting {
    cursor: wait !important;
    background-color: rgba(177, 136, 25, 0.05);
}


/* ========== SIDEBAR POLL ========== */

/* Sidebar Poll Styles */
.sidebar-poll {
    padding: 12px;
    margin-bottom: 0;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    background-color: white;
}

.sidebar-poll .pl-poll-title {
    font-size: 1.3rem !important;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.4;
}

.sidebar-poll .pl-poll-meta {
    font-size: 1.1rem;
    color: #6c757d;
}

.sidebar-poll .pl-poll-description {
    font-size: 1.1rem !important;
    margin-top: 8px;
    color: #495057;
}

.sidebar-poll .pl-vote-bars-container.mini {
    height: 4px;
    border-radius: 2px;
}

.sidebar-poll .pl-vote-bar {
    height: 4px;
}

.sidebar-poll .pl-poll-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6c757d;
}

.sidebar-poll .pl-poll-cta {
    border-top: 1px dashed #e9ecef;
    padding-top: 8px;
    margin-top: 8px;
    color: #b18819;
}

.sidebar-poll .pl-poll-cta span {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--secondary-color);
}

.sidebar-poll .pl-poll-cta span:hover {
   opacity: 0.8;
}

@media (max-width: 768px) {
   .pl-poll-title {
     font-size: 1.8rem !important;
   }

   .pl-poll-body p {
      font-size: 1.45rem !important;
    }

  .pl-poll-stat {
      font-size: 1.4rem;
  }

  .pl-poll-time {
    font-size: 1.3rem;
  }
}

/* Sidebar spinner */
.pl-spinner.small {
    width: 24px;
    height: 24px;
    border-width: 2px;
    margin: 0 auto;
}


/*  */

/* Close Button */
.close-edit-modal {
    background: none;
    border: none;
    font-size: 3.2rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-edit-modal:hover {
    color: #333;
    background-color: #f0f0f0;
    transform: rotate(90deg);
}

/* Modal Body */
.matches-modal-body {
    padding: 0;
}

.edit-modal-content {
  overflow-y: auto !important;
  position: relative !important;
  scroll-behavior: smooth !important;
  overflow-anchor: none !important;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  margin: 30px auto !important;
}


/*  */
.prd-action-btn.liking {
    opacity: 0.7;
    pointer-events: none;
}

.prd-action-btn.liking i {
    animation: pulse 0.4s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.prd-action-btn.liked i {
    color: #dc2626;
}


/*  */
/* Prediction Meta Container */
.pd-meta-container {
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    color: white;
}

/* Meta Item */
.pd-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    /* background: rgba(255, 255, 255, 0.1); */
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Icon Wrapper */
.pd-meta-icon-wrapper {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pd-meta-icon {
    font-size: 2rem;
    color: white;
}

/* Content */
.pd-meta-content {
    flex: 1;
}

.pd-meta-label {
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.pd-meta-value-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-meta-value {
    font-size: 1.8rem;
    font-weight: 600;
    color: white;
}

/* Badge Styles */
.pd-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px !important;
    border-radius: 20px;
    font-size: 1.0rem !important;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    /* background: rgba(255, 255, 255, 0.2); */
    color: white;
}

.pd-badge-past {
    background: rgba(239, 68, 68, 0.3);
    /* border: 1px solid rgba(239, 68, 68, 0.5); */
}

.pd-badge-active {
    background: rgba(34, 197, 94, 0.3);
    border: 1px solid rgba(34, 197, 94, 0.5);
}

.pd-badge-upcoming {
    background: rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.5);
}

/* Responsive Design */
@media (max-width: 640px) {
    .pd-meta-container {
        padding: 16px;
        border-radius: 12px;
    }

    .pd-meta-item {
        padding: 12px;
        gap: 12px;
    }

    .pd-meta-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .pd-meta-icon {
        font-size: 1.6rem;
    }

    .pd-meta-value {
        font-size: 1.6rem;
    }

    .pd-badge {
        padding: 3px 10px;
        font-size: 1.1rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .pd-meta-container {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    }
}

/* Animation for new content */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pd-meta-item {
    animation: fadeInUp 0.3s ease forwards;
}


/*  */
/* Prediction Summary Container */
.prediction-summary {
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 25px;
}

/* Prediction Text Container */
.prediction-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    border-radius: 25px !important;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(102, 126, 234, 0.3);
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Prediction Content */
.prediction-text-content {
    font-family: 'Courier New', monospace !important;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0px;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    word-break: break-all;
    flex: 1;
    line-height: 1.4;
}

/* Copy Button */
.copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid var(--primary-color);
    border-radius: 8px !important;
    color: var(--primary-color);
    font-size: 1.6rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.copy-btn:hover {
    opacity: 0.9;
}

.copy-btn:active {
    transform: scale(0.95);
}

.copy-btn i {
    font-size: 1.6rem;
}

/* Tablet Styles (768px and below) */
@media screen and (max-width: 768px) {
    .prediction-summary {
        padding: 0 10px;
    }

    .prediction-text {
        padding: 16px 20px;
        border-radius: 14px;
    }

    .prediction-text-content {
        font-size: 2.8rem;
        letter-spacing: 6px;
    }

    .copy-btn {
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
    }

    .copy-btn i {
        font-size: 1.8rem;
    }

    .prd-content {
        margin-top: 6px;
    }

    .prd-prediction-text,
    .prediction-code-display-modal,
    .prediction-code-display-share {
        font-weight: 700 !important;
        font-size: 1.4rem !important;
        letter-spacing: 0.25px !important;
        padding: 8px 10px;
        border-radius: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
    }

    .prediction-code-display-modal {
        font-size: 1.4rem;
        padding: 4px 6px;
    }

    .prd-prediction-text:active,
    .prediction-code-display-modal:active {
        background-color: #e5e7eb;
    }
}

/* Mobile Large Styles (576px and below) */
@media screen and (max-width: 576px) {
    .prediction-summary {
        padding: 0 8px;
        margin: 12px 0;
    }

    .prediction-text {
        padding: 14px 16px;
        border-radius: 12px;
        gap: 10px;
    }

    .prediction-text-content {
        font-size: 2.4rem;
        letter-spacing: 4px;
    }

    .copy-btn {
        width: 40px;
        height: 40px;
        font-size: 1.6rem;
    }

    .copy-btn i {
        font-size: 1.6rem;
    }
}

/* Mobile Medium Styles (480px and below) */
@media screen and (max-width: 480px) {
    .prediction-summary {
        padding: 0 6px;
        margin: 10px 0;
    }

    .prediction-text {
        padding: 12px 14px;
        border-radius: 10px;
        gap: 8px;
    }

    .prediction-text-content {
        font-size: 2rem;
        letter-spacing: 3px;
    }

    .copy-btn {
        width: 36px;
        height: 36px;
        font-size: 1.4rem;
    }

    .copy-btn i {
        font-size: 1.4rem;
    }
}

/* Mobile Small Styles (360px and below) */
@media screen and (max-width: 360px) {
    .prediction-summary {
        padding: 0 4px;
        margin: 8px 0;
    }

    .prediction-text {
        padding: 10px 12px;
        border-radius: 8px;
        gap: 6px;
    }

    .prediction-text-content {
        font-size: 1.6rem;
        letter-spacing: 2px;
    }

    .copy-btn {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }

    .copy-btn i {
        font-size: 1.2rem;
    }
}

/* Optional: If the prediction code is very long, add wrapping */
@media screen and (max-width: 320px) {
    .prediction-text {
        flex-direction: column;
        align-items: stretch;
    }

    .prediction-text-content {
        text-align: center;
        margin-bottom: 8px;
        letter-spacing: 2px;
    }

    .copy-btn {
        align-self: center;
    }
}

/* Animation for copy feedback */
.copy-btn.copied {
    background: #10b981;
    border-color: #10b981;
    animation: pulse 0.3s ease;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Optional: Add a nice hover effect on the prediction text */
.prediction-text:hover {
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
}

/* Optional: Add a subtle animation on load */
.prediction-text {
    animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*  */
.pl-list-group .list-group-item span {
  font-size:1.15rem !important;
}

/*  */
.dropdown {
    position: relative;
}

.dropdown-menu-top {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.15);
    min-width: 220px;
    display: none;
    z-index: 1000;
    padding: 8px 0;
}

/* Invisible bridge */
.dropdown-menu-top::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
}

/* Arrow styling */
.dropdown-menu-top::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 24px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
    z-index: 1001;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

/* Keep dropdown open */
.dropdown:hover .dropdown-menu-top,
.dropdown-menu-top:hover {
    display: block;
}

/* Dropdown items with icons */
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 1.4rem;
}

.dropdown-item-icon {
    width: 20px;
    margin-right: 12px;
    font-size: 1.6rem;
    color: #6c757d;
    transition: color 0.2s ease;
    text-align: center;
}

.dropdown-item:hover .dropdown-item-icon {
    color: #007bff;
}

/* Dropdown divider */
.dropdown-divider {
    height: 1px;
    margin: 8px 0;
    background: #e9ecef;
}

/* Arrow icon in the trigger */
.dropdown-arrow {
    margin-left: 8px;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* Optional: Different colors for logout */
.dropdown-item:last-child:hover {
    color: #dc3545;
}

.dropdown-item:last-child:hover .dropdown-item-icon {
    color: #dc3545;
}

.badge {
    margin-left: auto;
    font-size: 1.1rem;
    padding: 3px 6px;
    border-radius: 25px;
}

.badge-success {
    background: #28a745;
    color: white;
}

.badge-warning {
    background: #ffc107;
    color: #333;
}

/*  */
.tkl-matches-list {
    display: flex;
    flex-direction: column;
    height: 400px;
    margin-bottom: 50px;
}

/*  */
/* Modal Styles */
.prediction-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.prediction-modal.show {
    opacity: 1;
}

.prediction-modal-content {
    background: white;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.prediction-modal.show .prediction-modal-content {
    transform: translateY(0);
}

.prediction-modal-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prediction-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.close-modal {
    background: none;
    border: none;
    font-size: 2.4rem !important;
    cursor: pointer;
    color: #666;
    transition: color 0.3s;
}

.close-modal:hover {
    color: #333;
}

.prediction-modal-body {
    padding: 20px;
    max-height: calc(90vh - 80px);
    overflow-y: auto;
}

/* Matches Grid */
.matches-grid {
    display: grid;
    gap: 15px;
    margin-top: 15px;
}

.match-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s;
}

.match-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.match-number {
    font-weight: bold;
    color: #0066cc;
    margin-bottom: 10px;
    font-size: 1.4rem;
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.team {
    flex: 1;
}

.team-name {
    font-weight: 500;
    color: #333;
}

.vs-badge {
    background: #0066cc;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 10px;
}

.match-datetime {
    color: #666;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.prediction-buttons {
    display: flex;
    gap: 10px;
}

.pred-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.pred-btn.home-win:hover {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.pred-btn.draw:hover {
    background: #ffc107;
    color: #333;
    border-color: #ffc107;
}

.pred-btn.away-win:hover {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.pred-btn.selected {
    background: #0066cc;
    color: white;
    border-color: #0066cc;
}

/* Progress Bar */
.progress-bar-mini {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    margin: 16px 0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
    border-radius: 4px;
}

/* Different states with same transition */
.progress-fill.success {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.progress-fill.warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.progress-fill.danger {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

/* Hover effect */
.progress-container:hover .progress-fill {
    filter: brightness(1.05);
}

/* Loading animation */
.progress-fill.loading {
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
    background-size: 200% 100%;
    animation: shimmerProgress 1.5s infinite;
}

@keyframes shimmerProgress {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


/* Prediction Preview */
.prediction-preview {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

.preview-label {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 5px;
}

.preview-text {
    font-family: monospace;
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
}

/* Char Counter */
.c-prediction-box {
    position: relative;
}

.char-counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #666;
    font-size: 1.2rem;
}

/* Submit Section */
.btn-block {
    width: 100%;
    padding: 12px;
    font-size: 1.6rem;
    font-weight: 500;
}

.btn-success {
    background: #28a745;
    border: none;
    color: white;
}

.btn-success:hover {
    background: #218838;
}

.btn-secondary {
    background: #6c757d;
    border: none;
    color: white;
}

.submit-hint {
    font-size: 1.2rem;
    color: #666;
    margin-top: 8px;
}

/* No Matches State */
.no-matches-state {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

.no-matches-icon {
    font-size: 48px;
    color: #6c757d;
    margin-bottom: 20px;
}

.no-matches-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.no-matches-message {
    color: #666;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
 .code-display-wrapper {
   flex-wrap: nowrap; /* Keep on one line */
 }

 .copy-code-btn {
    padding: 6px 8px;
    min-height: 36px;
    min-width: 36px;
 }
}

.match-detail-item {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
    align-items: center;
}

.match-detail-item:last-child {
    border-bottom: none;
}

.match-number {
    font-weight: bold;
    color: #0066cc;
}

.match-teams {
    display: flex;
    gap: 10px;
    align-items: center;
}

.vs {
    color: #999;
    font-size: 1.2rem;
}

.match-prediction {
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
}

.prediction-home {
    background: #28a745;
    color: white;
}

.prediction-draw {
    background: #ffc107;
    color: #333;
}

.prediction-away {
    background: #dc3545;
    color: white;
}


/*  */
/* Copy button styles */
.prediction-summary-section {
    padding: 15px;
    /* border-bottom: 1px solid #e5e7eb; */
}

.prediction-code-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.code-display-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px; /* Better than margin for spacing */
    padding: 0; /* Remove any default padding */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    border-radius: 8px;
}

.copy-code-btn {
    flex-shrink: 0;
    padding: 10px 12px; /* Larger touch target for mobile */
    min-height: 44px; /* Apple's recommended minimum touch target */
    min-width: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 12px !important;
}

.copy-code-btn:hover {
    background: var(--secondary-color2) !important;
    border-color: var(--secondary-color2);
    color: white;
}

.copy-code-btn.copied {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

/* Matches list section */
.matches-list-section {
    padding: 10px;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
    overflow-anchor: none !important;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: thin;  /* Firefox */
    height: 400px;
}


/*  */

.edit-modal-body {
    padding: 24px;
}

.current-prediction {
    margin-bottom: 20px;
    background: #f3f4f6;
    padding: 16px;
    border-radius: 12px;
    border-left: 4px solid #6b7280;
}

.current-prediction label {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.new-prediction {
    margin-bottom: 20px;
}

.new-prediction label {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.new-prediction input {
    width: 100%;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    letter-spacing: 4px;
    text-align: center;
    transition: all 0.2s ease;
    background: #f9fafb;
}

.new-prediction input:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: white;
}

.new-prediction input:invalid {
    border-color: #f87171;
}

.char-counter {
    text-align: right;
    font-size: 1.3rem;
    color: #6b7280;
    margin-top: 6px;
}

.char-counter span {
    font-weight: 600;
    color: #4b5563;
}

.edit-reason {
    margin-bottom: 20px;
}

.edit-reason label {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.edit-reason textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.4rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s ease;
    background: #f9fafb;
}

.edit-reason textarea:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: white;
}

.edit-reason textarea::placeholder {
    color: #9ca3af;
}

.edit-modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: #f9fafb;
    border-radius: 0 0 20px 20px;
}

.cancel-edit-btn {
    padding: 12px 24px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-edit-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.save-edit-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.save-edit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(102, 126, 234, 0.5);
}

.save-edit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.save-edit-btn i {
    font-size: 1.6rem;
}

/* Edited badge on prediction card */
.edited-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fbbf24;
    color: #78350f;
    font-size: 1.0rem;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    font-weight: 500;
}

.edited-badge i {
    font-size: 0.8rem;
}

/* ========== DELETE PREDICTION MODAL STYLES ========== */

.delete-prediction-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease;
}

.delete-prediction-modal.show {
    display: flex;
}

.delete-modal-content {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideUp 0.4s ease;
}

.delete-modal-header {
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    position: relative;
}

.warning-icon {
    font-size: 5.6rem;
    color: #f59e0b;
    margin-bottom: 12px;
    animation: warningPulse 2s infinite;
}

.delete-modal-header h3 {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1f2937;
}

.close-delete-modal {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f3f4f6;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #6b7280;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-delete-modal:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.delete-modal-body {
    padding: 24px;
}

.warning-message {
    font-size: 1.8rem;
    font-weight: 600;
    color: #dc2626;
    text-align: center;
    margin-bottom: 8px;
}

.warning-submessage {
    font-size: 1.4rem;
    color: #6b7280;
    text-align: center;
    margin-bottom: 24px;
}

.prediction-preview {
    background: #fee2e2;
    border: 2px solid #fecaca;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.preview-label {
    font-size: 1.2rem;
    color: #991b1b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.preview-code {
    font-family: 'Courier New', monospace;
    font-size: 2.4rem;
    font-weight: 700;
    color: #7f1d1d;
    letter-spacing: 4px;
    text-align: center;
    word-break: break-all;
    background: white;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

.delete-reason {
    margin-bottom: 20px;
}

.delete-reason label {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.delete-reason textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.4rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    transition: all 0.2s ease;
}

.delete-reason textarea:focus {
    border-color: #dc2626;
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.confirmation-checkbox {
    background: #f3f4f6;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e5e7eb;
}

.confirmation-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #dc2626;
}

.confirmation-checkbox label {
    font-size: 1.4rem;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

.delete-modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: #f9fafb;
    border-radius: 0 0 20px 20px;
}

.cancel-delete-btn {
    padding: 12px 24px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-delete-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.confirm-delete-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: none;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.confirm-delete-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px #dc2626;
}

.confirm-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.confirm-delete-btn i {
    font-size: 1.6rem;
}

/* Loading state for buttons */
.confirm-delete-btn i.fa-spinner,
.save-edit-btn i.fa-spinner {
    animation: spin 1s linear infinite;
}

/* ========== ANIMATIONS ========== */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes warningPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 640px) {
    .edit-modal-content,
    .delete-modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .edit-modal-header h3 {
        font-size: 1.8rem;
    }

    .preview-code {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .edit-modal-footer,
    .delete-modal-footer {
        flex-direction: column;
    }

    .cancel-edit-btn,
    .save-edit-btn,
    .cancel-delete-btn,
    .confirm-delete-btn {
        width: 100%;
        justify-content: center;
    }

    .warning-icon {
        font-size: 4.8rem;
    }

    .delete-modal-header h3 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .edit-modal-body,
    .delete-modal-body {
        padding: 16px;
    }

    .confirmation-checkbox {
        flex-direction: column;
        text-align: center;
    }

    .preview-code {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

    .new-prediction input {
        font-size: 1.6rem;
        letter-spacing: 2px;
    }
}


/* ========== EDIT PREDICTION MODAL STYLES ========== */

/* Modal Overlay */
.edt-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.edt-modal-overlay.show {
    display: flex;
}

/* Modal Container */
.edt-modal-container {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: edtFadeIn 0.3s ease;
}

/* Close Button */
.edt-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #f3f4f6;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #6b7280;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 10;
}

.edt-close-btn:hover {
    background: #e5e7eb;
    color: #1f2937;
    transform: rotate(90deg);
}

/* Modal Title */
.edt-modal-title {
    margin: 0 0 20px 0;
    color: #1f2937;
    padding-right: 30px;
    font-size: 2rem;
    font-weight: 600;
}

/* Error Message */
.edt-error-message {
    display: none;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 20px;
    color: #dc2626;
    font-size: 1.4rem;
    animation: edtShake 0.3s ease;
}

/* Current Prediction Section */
.edt-current-section {
    margin-bottom: 20px;
}

.edt-current-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #374151;
    font-size: 1.4rem;
}

.edt-current-display {
    background: #f3f4f6;
    padding: 10px;
    border-radius: 6px;
    font-size: 1.4rem;
    letter-spacing: 0.5px;
    text-align: center;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    cursor: pointer;
}

/* New Prediction Section */
.edt-new-section {
    margin-bottom: 15px;
}

.edt-new-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #374151;
    font-size: 1.4rem;
}

.edt-new-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-family: monospace;
    font-size: 1.8rem;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.edt-new-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.edt-new-input.edt-valid {
    border-color: #28a745;
}

.edt-new-input.edt-invalid {
    border-color: #dc2626;
}

/* Character Counter */
.edt-char-counter {
    text-align: right;
    margin-top: 5px;
    font-size: 1.3rem;
    color: #6b7280;
}

.edt-char-count {
    font-weight: 700;
    color: #2563eb;
}

.edt-char-count.edt-complete {
    color: #28a745;
}

.edt-char-count.edt-incomplete {
    color: #dc2626;
}

/* Modal Footer */
.edt-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Cancel Button */
.edt-cancel-btn,
.payment-cancel-btn {
    padding: 10px 20px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 500;
    color: #4b5563;
    transition: background 0.2s;
}

@media (max-width: 768px) {
  .payment-cancel-btn,
  .payment-btn {
     font-size: 1.3rem !important;
  }
}

.edt-cancel-btn:hover,
.payment-cancel-btn:hover {
    background: #e5e7eb;
}

/* Save Button */
.edt-save-btn,
.payment-btn {
    padding: 10px 20px;
    background: var(--primary-color);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    justify-content: center;
}

.edt-save-btn:hover:not(:disabled),
.payment-btn:hover {
    background: var(--primary-color2);
}

.edt-save-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.5;
}

.edt-save-btn i {
    font-size: 1.4rem;
}

.edt-save-btn i.fa-spinner {
    animation: edtSpin 1s linear infinite;
}

/* Animations */
@keyframes edtFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes edtShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes edtSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 480px) {
    .edt-modal-container {
        width: 95%;
        padding: 20px;
    }

    .edt-modal-footer {
        flex-direction: column;
    }

    .edt-cancel-btn,
    .edt-save-btn {
        width: 100%;
    }
}

/*  */
/* ========== DELETE PREDICTION MODAL STYLES ========== */

/* Modal Overlay */
.dlt-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.dlt-modal-overlay.show {
    display: flex;
}

/* Modal Container */
.dlt-modal-container {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 380px;
    padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    animation: dltFadeIn 0.3s ease;
}

/* Close Button */
.dlt-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #f3f4f6;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #6b7280;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 10;
}

.dlt-close-btn:hover {
    background: #e5e7eb;
    color: #1f2937;
    transform: rotate(90deg);
}

/* Error Message */
.dlt-error-message {
    display: none;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 12px;
    margin: 20px 20px 0 20px;
    color: #dc2626;
    font-size: 1.4rem;
    animation: dltShake 0.3s ease;
}

/* Modal Content */
.dlt-modal-content {
    padding: 24px;
}

/* Icon Container */
.dlt-icon-container {
    text-align: center;
    margin-bottom: 16px;
}

.dlt-icon-circle {
    width: 48px;
    height: 48px;
    background: #fee2e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.dlt-icon-circle i {
    color: #dc2626;
    font-size: 2rem;
}

/* Modal Title */
.dlt-modal-title {
    margin: 0;
    color: #1f2937;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

/* Warning Message */
.dlt-warning-message {
    text-align: center;
    color: #4b5563;
    margin-bottom: 20px;
    font-size: 1.5rem;
    line-height: 1.5;
}

/* Button Container */
.dlt-button-container {
    display: flex;
    gap: 12px;
}

/* Cancel Button */
.dlt-cancel-btn {
    flex: 1;
    padding: 12px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: background 0.2s;
}

.dlt-cancel-btn:hover {
    background: #e5e7eb;
}

/* Delete Button */
.dlt-delete-btn {
    flex: 1;
    padding: 12px;
    background: #dc2626;
    border: none;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dlt-delete-btn:hover:not(:disabled) {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.2);
}

.dlt-delete-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.5;
}

.dlt-delete-btn i {
    font-size: 1.4rem;
}

.dlt-delete-btn i.fa-spinner {
    animation: dltSpin 1s linear infinite;
}

/* Animations */
@keyframes dltFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dltShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes dltSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 480px) {
    .dlt-modal-container {
        width: 95%;
    }

    .dlt-button-container {
        flex-direction: column;
    }

    .dlt-cancel-btn,
    .dlt-delete-btn {
        width: 100%;
    }

    .dlt-modal-content {
        padding: 20px;
    }
}

/*  */
/* Modal Overlay */
.payment-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease;
}

/* Modal Content */
.payment-modal-content {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    margin: 2% auto;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideUp 0.3s ease;
}

/* Modal Header */
.payment-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #eef2f6;
}

.payment-modal-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1a2639;
    display: flex;
    align-items: center;
}

.payment-modal-header h3 i {
    font-size: 1.3rem;
}

.text-success {
    color: #10b981;
}

.me-2 {
    margin-right: 8px;
}

/* Close Button */
/* .close-payment-modal {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0 8px;
    transition: all 0.2s;
    border-radius: 8px;
}

.close-payment-modal:hover {
    color: #1e293b;
    background-color: #f1f5f9;
} */

/* Modal Body */
.payment-modal-body {
    padding: 24px;
}

/* Order Summary */
.payment-summary {
    /* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); */
    background-color: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin: 5px;
    border: 1px solid #e2e8f0;
}

.payment-summary h4 {
    margin: 0 0 16px 0;
    font-size: 1.5rem !important;
    color: #334155;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.payment-summary > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #cbd5e1;
}

.payment-summary > div:last-of-type {
    border-bottom: none;
}

.payment-summary span {
    color: #475569;
    font-size: 1.2rem !important;
}

.payment-summary strong {
    color: #1e293b;
    font-size: 1.4rem !important;
    font-weight: 600;
}

#summary-total {
    font-size: 1.6rem !important;
    color: #059669;
}

/* Modal Footer */
.payment-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid #eef2f6;
}

/* Buttons */
.btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
}

.btn-secondary {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.btn-secondary:hover {
    background-color: #e2e8f0;
    color: #1e293b;
}

.btn-primary {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-primary:active {
    opacity: 0.9;
}

.btn-primary i {
    font-size: 0.9rem;
}

/* Animations */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar Styling */
.payment-modal-content::-webkit-scrollbar {
    width: 8px;
}

.payment-modal-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 0 20px 20px 0;
}

.payment-modal-content::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 20px;
}

.payment-modal-content::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

@media (max-width: 768px) {
  .payment-summary h4 {
    font-size: 1.8rem !important;
  }

  .payment-summary span {
      font-size: 1.5rem !important;
  }

  .payment-summary strong {
      font-size: 1.6rem !important;
  }

  #summary-total {
      font-size: 2rem !important;
  }
}

/* Responsive Design */
@media (max-width: 640px) {
    .payment-modal-content {
        width: 95%;
        border-radius: 16px;
    }

    .payment-modal-header {
        padding: 16px 20px;
    }

    .payment-modal-body {
        padding: 20px;
    }

    .payment-summary {
        padding: 16px;
    }

    .payment-modal-footer {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        min-width: auto;
    }

    .close-payment-modal {
        font-size: 2.4rem;
    }
}

/* Loading State for Confirm Button */
.btn-primary.loading {
    opacity: 0.8;
    cursor: not-allowed;
    position: relative;
    color: transparent;
}

.btn-primary.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-loading 0.8s linear infinite;
}

@keyframes button-loading {
    to {
        transform: rotate(360deg);
    }
}

/* Hidden Inputs */
#pay-amount,
#user-email {
    display: none;
}


/*  */
.success-navigation-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.success-navigation-modal.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.success-navigation-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease;
}

.success-navigation-header {
    padding: 20px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid #e5e7eb;
}

.success-icon {
    font-size: 4.8rem;
    color: #28a745;
    margin-bottom: 8px;
}

.success-navigation-header h3 {
    margin: 0;
    font-size: 2rem;
    color: #1f2937;
}

.close-success-modal {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-success-modal:hover {
    background: #f3f4f6;
    color: #4b5563;
}

.success-navigation-body {
    padding: 20px;
}

/* Success Card Styles */
.success-card {
    background: white;
    /* border: 2px solid #28a745; */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    /* box-shadow: 0 4px 12px rgba(40, 167, 69, 0.1); */
}

.success-card-header {
    padding: 16px;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.success-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.success-user-avatar {
    width: 40px;
    height: 40px;
    background: #2563eb;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.8rem;
}

.success-user-details {
    display: flex;
    flex-direction: column;
}

.success-username {
    font-weight: 600;
    color: #1f2937;
    font-size: 1.6rem;
}

.success-timestamp {
    font-size: 1.2rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.success-badge {
    background: #e8f5e9;
    color: #28a745;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.success-card-content {
    padding: 16px;
}

.success-jackpot-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 1.4rem;
    margin-bottom: 12px;
    background: #f3f4f6;
    padding: 8px 12px;
    border-radius: 8px;
}

.success-jackpot-info i {
    color: #fbbf24;
}

.success-prediction-display {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 12px;
}

.success-prediction-label {
    font-size: 1.2rem;
    color: #6b7280;
    margin-bottom: 0 !important;
    letter-spacing: 0.5px;
}

.success-prediction-code {
    font-family: 'Courier New', monospace;
    font-size: 2.4rem;
    font-weight: bold;
    color: #1f2937;
    letter-spacing: 4px;
    word-break: break-all;
    text-align: center;
}

.success-card-footer {
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.success-copy-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1.4rem;
    color: #4b5563;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.success-copy-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

.success-copy-btn.copied {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

.navigation-question {
    text-align: center;
    margin: 20px 0 16px;
}

.navigation-question p {
    color: #4b5563;
    font-weight: 500;
    margin: 0;
}

.navigation-actions {
    display: flex;
    gap: 12px;
}

.nav-action-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.stay-here-btn {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.stay-here-btn:hover {
    background: #e5e7eb;
}

.go-to-predictions-btn {
    background: var(--primary-color);
    color: white;
}

.go-to-predictions-btn:hover {
    opacity: 0.9;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .navigation-actions {
        flex-direction: column;
    }

    .success-navigation-content {
        width: 95%;
    }

    .success-prediction-code {
        font-size: 2rem;
        letter-spacing: 2px;
    }
}

/*  */
.ad-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
}

.view-ad-btn {
    flex: 1 !important;
    background-color: #f0e6d0 !important;  /* Lighter version of #d4af37 */
    border: 1px solid #d4af37 !important;
    color: #5e4a1e !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    border-radius: 4px;
}

.view-ad-btn:hover {
    background-color: #e5d5b5 !important;  /* Slightly darker on hover */
    border-color: #b18819 !important;
}

.view-ad-btn i {
    color: #b18819;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    transition: all 0.2s ease;
    /* Remove default caret/arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Ensure no text-indent or padding that might show default caret */
    text-indent: 0;
    /* Remove any default pseudo-elements that might show caret */
    &::after,
    &::before {
        display: none;
        content: none;
    }
}

/* Additional browser-specific overrides */
.dropdown-toggle::-ms-expand {
    display: none;
}

.dropdown-toggle:hover {
    background-color: #f5f5f5;
    border-color: #b18819;
}

.dropdown-toggle i {
    font-size: 1.6rem;
    color: #666;
}

.dropdown-toggle:hover i {
    color: #b18819;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 4px;
    z-index: 1000;
}

.dropdown-menu.show {
    display: block;
}

/* Position variants */
.dropdown-menu.bottom {
    top: 100%;
    margin-top: 4px;
}

.dropdown-menu.top {
    bottom: 100%;
    margin-bottom: 4px;
}

.dropdown-item {
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover {
    background-color: #f0e6d0;  /* Light gold background on hover */
}

.dropdown-item i {
    width: 16px;
    color: #b18819;
}

.dropdown-item:hover i {
    color: #5e4a1e;
}


/*  */
.adv-container {
    margin: 0 auto;
}

/* Header Styles */
.adv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border-bottom: 2px solid #f0f0f0; */
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    min-height: 70px;
}

.adv-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.adv-header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Back Button */
.adv-back-button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.8rem;
    flex-shrink: 0;
    padding: 0;
}

.adv-back-button:hover {
    background-color: #e9ecef;
    border-color: #d4af37;
    color: #d4af37;
    transform: translateX(-2px);
}

/* Title Section */
.adv-title-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}

.adv-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

/* .adv-title {
    margin: 0;
    line-height: 1.3;
    font-size: 20px;
    font-weight: 700;
    color: #1a2639;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
} */

/* Status Badge */
.adv-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    line-height: 1.2;
    height: 28px;
    white-space: nowrap;
    flex-shrink: 0;
}

.adv-status-active {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.adv-status-paused {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    color: #ef6c00;
    border: 1px solid #ffcc80;
}

.adv-status-ended {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.adv-status-pending {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* Meta Info */
.adv-meta-info {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    line-height: 1;
}

.adv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6c757d;
    font-size: 1.4rem;
    background-color: #f8f9fa;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #e9ecef;
    line-height: 1;
    height: 36px;
}

.adv-meta-item i {
    color: #d4af37;
    font-size: 1.2rem;
}

/* Dropdown */
.adv-dropdown {
    position: relative;
    display: inline-block;
}

.adv-dropdown-toggle {
    padding: 8px 16px;
    background: linear-gradient(135deg, #d4af37 0%, #b18819 100%);
    color: white;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.adv-dropdown-toggle:hover {
    background: linear-gradient(135deg, #b18819 0%, #8e6913 100%);
    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

.adv-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    min-width: 240px;
    max-width: 300px;
    padding: 8px 0;
    z-index: 1000;
    display: none;
    border: 1px solid rgba(212, 175, 55, 0.1);
    animation: adv-dropdown-fade 0.2s ease;
}

.adv-dropdown-menu.show {
    display: block;
}

.adv-dropdown-menu.top {
    top: auto;
    bottom: calc(100% + 8px);
}

@keyframes adv-dropdown-fade {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.adv-dropdown-item {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 1.4rem;
    color: #495057;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.adv-dropdown-item i {
    width: 18px;
    color: #adb5bd;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.adv-dropdown-item:hover {
    background-color: #fcf8f0;
    color: #d4af37;
}

.adv-dropdown-item:hover i {
    color: #d4af37;
}

.adv-dropdown-item-danger {
    color: #dc3545;
}

.adv-dropdown-item-danger i {
    color: #dc3545;
}

.adv-dropdown-item-danger:hover {
    background-color: #fff5f5;
    color: #c82333;
}

.adv-dropdown-divider {
    height: 1px;
    background-color: #e9ecef;
    margin: 8px 0;
}

/* Main Content Grid */
.adv-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* Cards */
.adv-card {
    background: white;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.adv-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.adv-card-header i {
    font-size: 2rem;
    color: #d4af37;
}

.adv-card-header h2 {
    font-size: 1.8rem;
    color: #1a2639;
    font-weight: 600;
}

/* Image Section */
.adv-image-section {
    margin-bottom: 20px;
}

.adv-image-container {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.adv-main-image {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
}

.adv-image-placeholder {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    background-color: #f8f9fa;
    border: 2px dashed #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    gap: 10px;
}

.adv-image-placeholder i {
    font-size: 4.8rem;
}

/* Info Grid */
.adv-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.adv-info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.adv-info-row.full-width {
    grid-column: 1 / -1;
}

.adv-info-label {
    font-size: 1.2rem;
    color: #666;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.adv-info-value {
    font-size: 1.4rem !important;
    color: #1a2639;
    font-weight: 500;
    word-break: break-word;
}

.adv-info-value a {
    color: #d4af37;
    text-decoration: none;
}

/* Date Range */
.adv-date-range {
    background-color: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
}

.adv-date-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.adv-date-item:last-child {
    margin-bottom: 0;
}

.adv-date-icon {
    width: 32px;
    height: 32px;
    background-color: #f0e6d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b18819;
}

.adv-date-info {
    flex: 1;
}

.adv-date-label {
    font-size: 1.2rem;
    color: #666;
}

.adv-date-value {
    font-size: 1.4rem;
    font-weight: 500;
    color: #1a2639;
}

/* Progress Bar */
.adv-progress-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}

.adv-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.adv-progress-header h4 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1a2639;
    margin: 0;
}

.adv-progress-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    background: #f1f3f5;
    padding: 4px 10px;
    border-radius: 20px;
}

.adv-progress-header span:first-child {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a2639;
    display: flex;
    align-items: center;
    gap: 8px;
}

.adv-progress-header span:first-child:before {
    content: '';
    width: 4px;
    height: 18px;
    background: linear-gradient(135deg, #d4af37, #b18819);
    border-radius: 4px;
    display: inline-block;
}

.adv-progress-header span:last-child {
    font-size: 1.4rem;
    font-weight: 600;
    color: #d4af37;
    background: #fef8e7;
    padding: 4px 12px;
    border-radius: 30px;
    border: 1px solid #d4af37;
}

.adv-progress-bar {
    height: 12px;
    background: #edf2f7;
    border-radius: 30px;
    overflow: hidden;
    margin: 8px 0 6px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
}

.adv-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #d4af37, #f5d742, #d4af37);
    border-radius: 30px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background-size: 200% 100%;
    animation: shimmer-md 3s infinite;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

@keyframes shimmer-md {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.adv-progress-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 1.3rem;
    color: #6c757d;
    padding: 0 4px;
}

.adv-progress-footer span {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8f9fa;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.adv-progress-footer span:first-child i {
    color: #d4af37;
}

.adv-progress-footer span:last-child i {
    color: #28a745;
}

.adv-progress-footer span i {
    font-size: 1.2rem;
}

/* Optional: Add icons to the footer */
.adv-progress-footer span:first-child:before {
    content: '▶';
    font-size: 1.0rem;
    color: #d4af37;
    opacity: 0.8;
}

.adv-progress-footer span:last-child:after {
    content: '◀';
    font-size: 1.0rem;
    color: #28a745;
    opacity: 0.8;
    margin-left: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .adv-progress-section {
        padding: 16px;
    }

    .adv-progress-header span:first-child {
        font-size: 1.4rem;
    }

    .adv-progress-header span:last-child {
        font-size: 1.3rem;
        padding: 3px 10px;
    }

    .adv-progress-footer {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .adv-progress-footer span {
        width: 100%;
        justify-content: space-between;
    }

    .adv-card {
        padding: 12px;
    }

    .adv-info-label {
       font-size: 1.2rem;
    }

    .adv-info-value {
      font-size: 1.5rem !important;
    }

    .adv-date-label {
        font-size: 1.2rem;
    }

    .adv-date-value {
        font-size: 1.5rem;
    }

    .adv-plan-row span {
        font-size: 1.5rem;
    }

    .adv-metric-label {
        font-size: 1.5rem !important;
    }

    .adv-progress-footer {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .adv-progress-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .adv-progress-bar {
        height: 10px;
    }
}

/* Metrics Grid */
.adv-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.adv-metric-item {
    text-align: center;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #eee;
}

.adv-metric-value {
    font-size: 2.6rem;
    font-weight: 700;
    color: #d4af37;
    line-height: 1.2;
}

.adv-metric-label {
    font-size: 1.2rem;
    color: #666666;
    margin-top: 4px;
}

/* Plan Card */
.adv-plan-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #f0e6d0 100%);
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
}

.adv-plan-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #ddd;
}

.adv-plan-row:last-child {
    border-bottom: none;
}

/* Meta List */
.adv-meta-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adv-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    font-size: 1.4rem;
}

.adv-meta-item i {
    width: 18px;
    color: #d4af37;
}

/* Modal Styles */
.adv-modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.adv-modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    animation: adv-modal-slide-in 0.3s ease;
}

.adv-modal-lg {
    max-width: 800px;
}

@keyframes adv-modal-slide-in {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.adv-modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.adv-modal-header h2 {
    margin: 0;
    font-size: 2rem;
    color: #1a2639;
}

.adv-modal-close {
    background: none;
    border: none;
    font-size: 2.4rem;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
}

.adv-modal-close:hover {
    color: #333;
}

.adv-modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.adv-modal-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Form Styles */
.adv-form-group {
    margin-bottom: 15px;
}

.adv-form-group label {
    display: block;
    margin-bottom: 5px;
    color: #666;
    font-size: 1.4rem;
    font-weight: 500;
}

.adv-form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1.6rem;
    transition: border-color 0.2s;
}

.adv-form-control:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Button Styles */
.adv-btn {
    padding: 10px 20px;
    border-radius: var(--btn-border-radius);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: white;
    color: #495057;
}

.adv-btn:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.adv-btn-primary {
    background: linear-gradient(135deg, #d4af37 0%, #b18819 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

.adv-btn-secondary {
    border-color: #dee2e6;
    background-color: white;
}

.adv-btn-secondary:hover {
  opacity: 0.9;
}

.adv-btn-success {
    background-color: #28a745;
    color: white;
}

.adv-btn-danger {
    background-color: #dc3545;
    color: white;
}

.adv-btn-danger:hover {
    opacity: 0.9;
}

/* Loading Indicator */
.adv-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.9);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.adv-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #d4af37;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Notification */
.adv-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    z-index: 3000;
    border-left: 4px solid;
    max-width: 400px;
}

.adv-notification-show {
    transform: translateX(0);
}

.adv-notification-success {
    border-left-color: #28a745;
}

.adv-notification-success i {
    color: #28a745;
}

.adv-notification-error {
    border-left-color: #dc3545;
}

.adv-notification-error i {
    color: #dc3545;
}

/* Share Modal Styles */
.adv-share-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 20px 0;
}

.adv-share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 15px 10px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.adv-share-option:hover {
    border-color: #d4af37;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.adv-share-option i {
    font-size: 2.4rem;
    color: #d4af37;
}

.adv-share-option span {
    font-size: 1.2rem;
    color: #495057;
}

.adv-copy-link {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* Error Page */
.adv-error {
    text-align: center;
    padding: 50px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-top: 50px;
}

.adv-error i {
    font-size: 6.4rem;
    color: #dc3545;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .adv-grid {
        grid-template-columns: 1fr;
    }

    .adv-image-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .adv-info-grid {
        grid-template-columns: 1fr;
    }

    .adv-metrics-grid {
        grid-template-columns: 1fr;
    }

    .adv-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .adv-header-right {
        width: 100%;
    }

    .adv-action-buttons {
        width: 100%;
    }

    .adv-dropdown {
        width: 100%;
    }

    .adv-dropdown-toggle {
        width: 100%;
        justify-content: center;
    }

    .adv-share-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .adv-meta-item {
        font-size: 1.6rem;
    }
}

/*  */
/* main container – mobile first, crisp max-width */
.abt-container {
  width: 100%;
  background-color: #ffffff;
  border-radius: 2rem;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.08), 0 8px 24px -6px rgba(0, 168, 107, 0.05);
  padding: 2.5rem 2.2rem; /* Increased padding */
  transition: all 0.2s;
}

/* header / emblem */
.abt-header {
  display: flex;
  align-items: center;
  gap: 1.2rem; /* Increased gap */
  margin-bottom: 2.5rem; /* Increased margin */
  flex-wrap: wrap;
}

.abt-brand-badge {
  background: linear-gradient(145deg, #d4af37, #b18819);
  color: white;
  font-weight: 700;
  font-size: 2rem; /* Increased from 1.7rem */
  width: 64px; /* Increased from 60px */
  height: 64px; /* Increased from 60px */
  border-radius: 24px; /* Larger for proportion */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 18px -5px rgba(180, 140, 50, 0.3);
}

.abt-brand-badge i {
  font-size: 2.4rem; /* Increased from 2rem */
}

.abt-header h1 {
  font-size: 3rem; /* Increased from 2.2rem */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* tagline */
.abt-tagline {
  border-left: 6px solid #00a86b; /* Thicker border */
  padding-left: 1.6rem; /* Increased padding */
  margin-bottom: 3rem; /* Increased from 2.5rem */
  font-size: 1.6rem; /* Increased from 1.2rem */
  color: #3f4e5a;
  font-weight: 400;
  line-height: 1.4;
}

/* mission / intro grid */
.abt-mission-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem; /* Increased gap */
  margin-bottom: 4rem; /* Increased from 3rem */
  background-color: linear-gradient(105deg, #f3f7fb 0%, #ffffff 80%);
  border-radius: 2.2rem; /* Slightly larger */
  padding: 2.5rem 2.2rem; /* Increased padding */
}

.abt-mission-text {
  flex: 2;
  min-width: 300px;
}

.abt-mission-text h2 {
  font-size: 2.4rem; /* Increased from 1.8rem */
  font-weight: 600;
  margin-bottom: 1.6rem; /* Increased from 1.2rem */
  color: #b18819;
}

.abt-mission-text p {
  font-size: 1.5rem; /* Increased from 1.1rem */
  color: #1e2b37;
  max-width: 700px; /* Wider for larger text */
  line-height: 1.5;
}

.abt-mission-highlight {
  flex: 1;
  min-width: 260px; /* Increased from 220px */
  background-color: rgba(0, 168, 107, 0.04);
  border-radius: 2rem; /* Larger radius */
  padding: 2rem; /* Increased from 1.5rem */
  border: 2px dashed #00a86b; /* Thicker border */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.abt-stat-item {
  display: flex;
  align-items: center;
  gap: 1.2rem; /* Increased from 0.8rem */
  margin: 1rem 0; /* Increased from 0.7rem */
}

.abt-stat-item i {
  font-size: 2.6rem; /* Increased from 1.8rem */
  color: #d4af37;
  width: 3.2rem; /* Increased from 2.4rem */
  text-align: center;
}

.abt-stat-item span {
  font-weight: 600;
  font-size: 1.6rem; /* Increased from 1.2rem */
  color: #008553;
}

/* features grid — cards for jackpots, polls, ads, predictions */
.abt-features-title {
  font-size: 2.4rem; /* Increased from 1.8rem */
  margin: 2.8rem 0 2rem; /* Increased margins */
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.8rem; /* Larger gap */
}

.abt-features-title i {
  color: #d4af37;
  font-size: 2.6rem; /* Increased from 2rem */
}

.abt-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Increased min width from 260px */
  gap: 2.2rem; /* Increased from 1.8rem */
}

/* cards are now clickable links */
.abt-feature-card {
  display: block;
  background: white;
  border-radius: 2.2rem; /* Increased from 1.8rem */
  padding: 2.2rem 2rem; /* Increased from 1.8rem 1.5rem */
  box-shadow: 0 8px 24px rgba(0,0,0,0.02);
  border: 1px solid #e9ecf0;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.abt-feature-card:hover {
  border-color: #d4af37;
  box-shadow: 0 25px 35px -10px rgba(180, 140, 50, 0.15);
}

.abt-card-icon {
  background: rgba(212, 175, 55, 0.08);
  width: 80px; /* Increased from 60px */
  height: 80px; /* Increased from 60px */
  border-radius: 22px; /* Increased from 18px */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem; /* Increased from 1.5rem */
}

.abt-card-icon i {
  font-size: 2.8rem; /* Increased from 2.2rem */
  color: #b18819;
}

.abt-feature-card h3 {
  font-size: 2rem; /* Increased from 1.4rem */
  font-weight: 600;
  margin-bottom: 1rem; /* Increased from 0.7rem */
  color: #1e2b37;
}

.abt-feature-card p {
  color: #3f4e5a;
  font-size: 1.35rem; /* Increased from 1rem */
  line-height: 1.5;
}

.abt-jackpot-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem; /* Increased from 0.5rem */
  margin: 1.4rem 0 0.8rem; /* Increased margins */
}

.abt-badge {
  background-color: rgba(0, 168, 107, 0.1);
  color: #008553;
  font-weight: 600;
  padding: 0.5rem 1.2rem; /* Increased from 0.3rem 0.9rem */
  border-radius: 50px;
  font-size: 1.1rem; /* Increased from 0.8rem */
  letter-spacing: 0.02em;
  border: 1px solid rgba(0, 168, 107, 0.3);
}

.abt-badge-gold {
  background: rgba(212, 175, 55, 0.12);
  color: #b18819;
  border-color: rgba(212, 175, 55, 0.4);
}

/* highlight weekly predictions */
.abt-weekly-prediction {
  background-color: linear-gradient(115deg, #fbf7ee, #fff9ed);
  border-radius: 2.2rem; /* Increased from 1.8rem */
  padding: 2.4rem 2.5rem; /* Increased from 1.8rem 2rem */
  margin: 3.6rem 0 2.8rem; /* Increased margins */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #d4af37; /* Thicker border */
}

.abt-weekly-left {
  display: flex;
  align-items: center;
  gap: 1.8rem; /* Increased from 1.2rem */
  flex-wrap: wrap;
}

.abt-weekly-left i {
  font-size: 3.6rem; /* Increased from 2.8rem */
  color: #00a86b;
  background: white;
  width: 100px; /* Increased from 70px */
  height: 100px; /* Increased from 70px */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 16px rgba(0,168,107,0.25);
}

.abt-weekly-left h4 {
  font-size: 2.3rem; /* Increased from 1.7rem */
  font-weight: 700;
  line-height: 1.2;
}

.abt-weekly-left h4 small {
  display: block;
  font-size: 1.4rem; /* Increased from 1rem */
  font-weight: 400;
  color: #3f4e5a;
  margin-top: 0.2rem;
}

.abt-btn-ads {
  background-color: #00a86b;
  border: none;
  color: white;
  padding: 1.2rem 3rem; /* Increased from 0.9rem 2.2rem */
  border-radius: 60px; /* Larger radius */
  font-weight: 700;
  font-size: 1.5rem; /* Increased from 1.1rem */
  display: inline-flex;
  align-items: center;
  gap: 0.8rem; /* Increased from 0.5rem */
  box-shadow: 0 8px 18px rgba(0,168,107,0.35);
  transition: 0.15s;
  cursor: default; /* not interactive, just visual */
  border: 2px solid transparent;
}

.abt-btn-ads i {
  font-size: 1.6rem; /* Increased from 1.2rem */
}

/* advertising card specific */
.abt-ad-benefits {
  list-style: none;
  margin-top: 1.8rem; /* Increased from 1.2rem */
}

.abt-ad-benefits li {
  display: flex;
  gap: 1rem; /* Increased from 0.7rem */
  align-items: center;
  margin-bottom: 1rem; /* Increased from 0.6rem */
  font-size: 1.35rem; /* Increased from 0.98rem */
}

.abt-ad-benefits i {
  color: #00a86b;
  width: 2rem; /* Larger icon */
  font-size: 1.3rem;
}

/* footer / community */
.abt-community-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 3.5rem; /* Increased from 2.5rem */
  padding-top: 2.8rem; /* Increased from 2rem */
  border-top: 3px solid #e9ecf0; /* Thicker border */
}

.abt-social-icons i {
  font-size: 2.4rem; /* Increased from 1.8rem */
  margin-left: 1.4rem; /* Larger spacing */
  color: #b18819;
  opacity: 0.7;
  transition: 0.15s;
}

.abt-social-icons i:hover { opacity: 1; }

/* responsive fine‑tuning */
@media (max-width: 700px) { /* Adjusted breakpoint */
  body { padding: 1rem; }
  .abt-container { padding: 2rem 1.5rem; }
  .abt-header h1 { font-size: 2.5rem; } /* Larger than before */
  .abt-brand-badge { width: 70px; height: 70px; font-size: 1.9rem; }
  .abt-brand-badge i { font-size: 2.2rem; }
  .abt-tagline { font-size: 1.45rem; }
  .abt-mission-text h2 { font-size: 2.1rem; }
  .abt-mission-text p { font-size: 1.35rem; }
  .abt-feature-card h3 { font-size: 1.8rem; }
  .abt-feature-card p { font-size: 1.25rem; }
  .abt-weekly-left h4 { font-size: 1.9rem; }
  .abt-weekly-left h4 small { font-size: 1.2rem; }
  .abt-btn-ads { padding: 1rem 2.2rem; font-size: 1.35rem; }
  .abt-weekly-left i { width: 80px; height: 80px; font-size: 2.8rem; }
}

@media (max-width: 480px) {
  .abt-mission-row { padding: 2rem 1.5rem; }
  .abt-stat-item span { font-size: 1.4rem; }
  .abt-header h1 { font-size: 2.2rem; }
  .abt-feature-card h3 { font-size: 1.7rem; }
  .abt-feature-card p { font-size: 1.2rem; }
  .abt-weekly-left h4 { font-size: 1.7rem; }
  .abt-weekly-left i { width: 70px; height: 70px; font-size: 2.4rem; }
}

@media (max-width: 380px) {
  .abt-header h1 { font-size: 2rem; }
  .abt-tagline { font-size: 1.3rem; }
  .abt-mission-text h2 { font-size: 1.9rem; }
  .abt-mission-text p { font-size: 1.25rem; }
  .abt-stat-item span { font-size: 1.3rem; }
  .abt-feature-card h3 { font-size: 1.6rem; }
  .abt-btn-ads { font-size: 1.25rem; padding: 0.9rem 1.8rem; }
}

/* subtle extra touches */
.abt-dot-pattern {
  background: radial-gradient(#e9ecf0 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.3;
  height: 100%;
  pointer-events: none;
}

/* remove default link underline and keep pointer */
.abt-feature-card, .abt-feature-card:hover, .abt-feature-card:visited {
  text-decoration: none;
}


/*  */

/* ==================== ADVERTISEMENT SECTION STYLES ==================== */
/* All classes use 'abt' prefix to avoid conflicts */

/* Left Content */
.abt-content {
    flex: 1 1 300px;
}

.abt-title {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1a2634;
}

.abt-title i {
    color: var(--primary-color);
    font-size: 2.4rem;
}

.abt-description {
    color: #3f4e5a;
    line-height: 1.6;
    margin: 0 0 0.8rem 0;
    font-size: 1.4rem;
}

.abt-contact {
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #3f4e5a;
}

.abt-contact i {
    color: #d4af37;
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.abt-contact a {
    color: #3f4e5a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.abt-contact a:hover {
    color: #00a86b;
    text-decoration: underline;
}

.abt-contact:hover i {
    transform: scale(1.1);
}

/* Right Stats Card */
.abt-stats-card {
    background: #ffffff;
    border-radius: 2rem;
    padding: 1rem 2rem;
    border: 1px solid #e9ecf0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.abt-stats-card:hover {
    border-color: #d0d9e4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.abt-featured {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1a2634;
}

.abt-featured i {
    color: #d4af37;
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.abt-featured:hover i {
    transform: scale(1.1);
}

.abt-dot {
    display: inline-block;
    background: #00a86b;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 0.5rem;
    animation: abtPulse 2s infinite;
}

.abt-stats-text {
    color: #3f4e5a;
    font-weight: 500;
    animation: abtCountUp 0.5s ease 0.2s both;
}

/* Alternative Card Variations */
.abt-stats-card.success {
    border-left: 4px solid #00a86b;
}

.abt-stats-card.warning {
    border-left: 4px solid #d4af37;
}

.abt-stats-card.info {
    border-left: 4px solid #4a90e2;
}

/* Animations */
@keyframes abtPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes abtFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes abtCountUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== RESPONSIVE STYLES ==================== */

/* Tablet */
@media (max-width: 768px) {
    .abt-container {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.25rem;
    }

    .abt-content {
        max-width: 100%;
    }

    .abt-title {
        font-size: 1.35rem;
    }

    .abt-title i {
        font-size: 1.35rem;
    }

    .abt-description {
        font-size: 0.95rem;
    }

    .abt-stats-card {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.5rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .abt-container {
        padding: 1rem;
        gap: 1.25rem;
    }

    .abt-title {
        font-size: 1.25rem;
    }

    .abt-title i {
        font-size: 1.25rem;
    }

    .abt-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .abt-stats-card {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        border-radius: 1.5rem;
        width: 100%;
    }

    .abt-featured {
        margin-bottom: 0.25rem;
    }

    .abt-dot {
        margin: 0.25rem 0;
    }

    .abt-contact {
        flex-wrap: wrap;
    }
}

/* Small Mobile */
@media (max-width: 360px) {
    .abt-container {
        padding: 0.875rem;
    }

    .abt-title {
        font-size: 1.1rem;
    }

    .abt-description {
        font-size: 0.85rem;
    }

    .abt-stats-card {
        padding: 0.875rem;
    }

    .abt-featured {
        font-size: 0.9rem;
    }

    .abt-stats-text {
        font-size: 0.9rem;
    }
}


/* ========== MATCHES MODAL ========== */

/* Modal Overlay */
.matches-modal {
    display: none;
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100vw;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Modal Content - Responsive Container */
.matches-modal-content {
    /* position: relative;
    background-color: #fff;
    margin: 20px auto !important;
    padding: 0;
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out; */

    position: relative;
    background: #f8fafc;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    height: min(90vh, 700px);
    margin: 20px auto !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.25s ease-out;
}

/* Mobile adjustments */
/* Mobile adjustments */
@media (max-width: 768px) {
    .matches-modal-content {
       margin: 0 !important;
    }

    .matches-modal {
        padding: 0 !important;
    }
}

@media (max-width: 480px) {
    .matches-modal-content {
        height: 90vh; /* Almost full screen on mobile */
        max-height: 90vh;
        border-radius: 24px;
    }

    .matches-modal {
        padding: 8px; /* Smaller padding on mobile */
    }
}

/* Header - Fixed at top */
.matches-modal-header {
    padding: 20px 24px 12px 24px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Prevents header from shrinking */
}

/* Modal Body - Flex column that fills remaining space */
.matches-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f1f5f9;
    min-height: 0; /* CRITICAL: Allows flex item to shrink */
}

/* Matches List Section - Takes remaining space, scrolls */
.matches-list-section {
    flex: 1;
    min-height: 0; /* ABSOLUTELY CRITICAL for scrolling */
    display: flex;
    flex-direction: column;
    padding: 8px 20px 16px 20px;
    background: #fff;
    overflow: hidden; /* Contains the scrollable area */
}

@media (max-width: 480px) {
    .matches-list-section {
        padding: 6px 16px 12px 16px;
    }
}

/* Actual matches list - Scrollable container */
.matches-list {
    flex: 1;
    min-height: 0; /* CRITICAL - allows flex child to scroll */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}

/* Webkit scrollbar styling */
.matches-list::-webkit-scrollbar {
    width: 6px;
}

.matches-list::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 8px;
}

.matches-list::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 8px;
}

/* Animation */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure no extra spacing at bottom */
.matches-list-section:last-child,
.matches-list:last-child {
    margin-bottom: 0;
}


/* ========== PROFILE ========== */

/* Profile Container */
.pf-container {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
    border-radius: var(--container-border-radius);
}

.pf-header {
    /* background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    border-radius: 15px;
    padding: 30px;
    color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); */


    background: linear-gradient(135deg, var(--primary-color2) 0%, var(--primary-color) 100%);
    color: white !important;
    padding: 2.5rem !important;
    border-radius: 0 0 20px 20px !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 4px 20px rgba(29, 53, 87, 0.15);
}

.pf-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.pf-user-main {
    display: flex;
    gap: 25px;
    align-items: center;
    flex: 1;
}

/* Avatar Section */
.pf-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
}

.pf-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,0.3);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.pf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-avatar-edit {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: white;
    border: none;
    color: var(--primary-color2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.pf-avatar-edit:hover {
    /* background: #f0f0f0; */
    opacity: 0.9;
    background: #fff5f5;
}

/* User Info */
.pf-user-info {
    flex: 1;
}

.pf-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pf-display-name {
    font-size: 2.4rem;
    font-weight: 600;
    color:#333;
}

.pf-user-bio {
    font-size: 1.4rem;
    opacity: 0.9;
    line-height: 1.6;
    color:#f2f2f2;
}

/* User Stats */
.pf-user-stats {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.pf-stat-item {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.pf-stat-item:hover {
    opacity: 0.8;
}

.pf-stat-value {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--primary-color2)
}

.pf-stat-label {
    font-size: 1.3rem;
    opacity: 0.8;
}

/* Profile Actions */
.pf-profile-actions {
    display: flex;
    gap: 10px;
}

.pf-edit-info,
.blocked-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.pf-edit-info {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 0 5px #b18819;
}

.pf-edit-info:hover {
    opacity: 0.9;
    background: #fff5f5;
}

.unfollow-btn {
    background: #e74c3c;
    color: white;
}

.blocked-btn {
    background: #95a5a6;
    color: white;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Tabs Container */
.pf-tabs-container {
    background-color: white;
    border-radius: 0 !important;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.1); */
    margin-bottom: 30px;
    overflow: hidden;
}

.pf-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px;
    gap: 10px;
    border-radius: 0 !important;
}

.pf-tabs::-webkit-scrollbar {
    display: none;
}

.pf-tab {
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.pf-tab i {
    font-size: 1.6rem;
}

.pf-tab:hover {
    background: #f8f9fa;
    color: #495057;
}

.pf-tab.active {
    background: var(--primary-color2);
    color: white;
}

/* Tab Controls */
.pf-tabs-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px;
    border-top: 1px solid #e9ecef;
    background-color: #fff;
}

.pf-scroll-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: white;
    color: #495057;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.pf-scroll-btn:hover:not(:disabled) {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.pf-scroll-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tab Content Area */
.pf-tab-content-area {
    min-height: 400px;
    border-radius: 0 0 12px 12px;
}

.pf-tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.pf-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Stats Grid */
.stat-card:hover::before {
    opacity: 1;
}

/* Achievements Grid */
.pf-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.pf-achievement-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.pf-achievement-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.pf-achievement-card.unlocked {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2)100%);
    color: white;
}

.pf-achievement-card.locked {
    opacity: 0.7;
    filter: grayscale(0.5);
}

.pf-achievement-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
}

.pf-achievement-content {
    flex: 1;
}

.pf-achievement-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.pf-achievement-description {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 10px;
}

.pf-achievement-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
}

.pf-progress-fill {
    height: 100%;
    background: white;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.pf-progress-text {
    font-size: 1.2rem;
    font-weight: 600;
}

.pf-achievement-unlocked,
.pf-achievement-locked {
    font-size: 1.1rem;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Modals */
.pf-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-width: 100vw;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.pf-modal {
    background: white;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: slideUp 0.3s ease;
}

.pf-modal-compact {
    max-width: 500px;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pf-modal-header {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pf-modal-title {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.close-modal {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background: #f8f9fa;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-modal:hover {
    background: #e9ecef;
    color: #2d3748;
    transform: rotate(90deg);
}

/* Form Styles */
.pf-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.pf-form-group-half {
    flex: 1;
    margin-bottom: 0;
}

.pf-form-group-full {
    width: 100%;
}

.pf-form-label {
    display: block;
    font-size: 1.3rem;
    font-weight: 500;
    color: #2d3748;
    margin-bottom: 8px;
}

.pf-form-input,
.pf-form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1.4rem;
    transition: all 0.3s ease;
}

.pf-form-input:focus,
.pf-form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.pf-form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Modal Footer */
.pf-modal-footer {
    padding: 20px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn {
    padding: 10px 20px;
    border: none;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-light {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.btn-light:hover {
    background: #e9ecef;
    color: #2d3748;
}

.btn-primary {
    background: #667eea;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: #5a67d8;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Followers/Following Modals */
.custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.custom-modal-dialog {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.custom-modal-content {
    max-height: 80vh;
    overflow-y: auto;
}

.custom-modal-header {
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-modal-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}

.custom-modal-header .close-modal,
.modal-header .close-modal {
    background: rgba(255,255,255,0.2);
    color: white;
}

.custom-modal-header .close-modal:hover,
.modal-header .close-modal:hover {
    background: rgba(255,255,255,0.3);
}

.custom-modal-body {
    padding: 20px;
}

/* User List Items */
.user-item {
    padding: 15px 0;
}

.user-item:last-child {
    border-bottom: none;
}

.user-item .pf-name {
    font-size: 1.6rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 2px;
}

.user-item .text-muted {
    font-size: 1.3rem;
    color: #6c757d;
}

.user-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

/* Notifications */
.pf-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    background: white;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 10001;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.pf-notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf-notification-success {
    background: #2ecc71;
    color: white;
}

.pf-notification-error {
    background: #e74c3c;
    color: white;
}

.pf-notification-info {
    background: #3498db;
    color: white;
}

/* Error Message */
.pf-error-message {
    margin-bottom: 20px;
}

.pf-error-content {
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c33;
}

.pf-error-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #c33;
    cursor: pointer;
    padding: 5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pf-header-content {
        flex-direction: column;
    }

    .pf-user-main {
        flex-direction: column;
        text-align: center;
    }

    .pf-avatar-container {
        margin: 0 auto;
    }

    .pf-name {
        justify-content: center;
    }

    .pf-user-stats {
        justify-content: center;
    }

    .pf-profile-actions {
        width: 100%;
        justify-content: center;
    }

    .pf-form-row {
        flex-direction: column;
        gap: 15px;
    }

    .pf-modal {
        width: 95%;
        margin: 10px;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.py-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.me-2 {
    margin-right: 0.5rem;
}

.me-3 {
    margin-right: 1rem !important;
}

.ms-3 {
    margin-left: 1rem;
}

.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.flex-grow-1 {
    flex-grow: 1;
}

.fw-bold {
    font-weight: 600;
}

.text-dark {
    color: #2d3748;
}

.text-muted {
    color: #6c757d;
}

.text-danger {
    color: #e74c3c;
}

.text-primary {
    color: var(--primary-color);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}


/* ========== SPINNER ========== */

/* Spinner for buttons */
.spinner-border {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--primary-color);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.spinner-border.text-primary,
.spinner-border.text-primary{
  color: var(--primary-color) !important;
}

/* ========== PREDICTIONS ========== */

/* Predictions Tab Container - Full width */
#predictions {
    width: 100%;
    padding: 0;
    background-color: #fff;
}

/* Make tab content stretch full width */
.pf-tab-content {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Adjust header container for full width */
.header-container {
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 12px 12px 0 0;
}

/* Animation for cards */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Container fluid for header if needed */
.header-container .pf-header {
    width: 100%;
    border-radius: 0;
    padding: 30px 24px;
}

/*  */
@keyframes slideInRight {
  from {
      transform: translateX(100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
      transform: translateX(0);
      opacity: 1;
  }
  to {
      transform: translateX(100%);
      opacity: 0;
  }
}

.user-item:hover {
  background-color: #f8f9fa;
}

.user-item .btn {
  transition: all 0.2s ease;
}

.user-item .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


/* ========== LEADERBOARD MESSAGES ========== */

/* Base Styles */
.ib-messages * {
    margin: 0;
    padding: 0;
}

.ib-messages {
    min-height: 100vh;
    padding: 20px;
}

.ib-container {
    margin: 0 auto;
}

/* Header Styles */
.ib-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ib-header__title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ib-header__title i {
    color: #fff;
    font-size: 2.8rem;
}

.ib-header__count {
    background: #fff;
    color: var(--primary-color);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 1.4rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

/* Filters Section - Two Rows */
.ib-filters {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Filter Header - Hidden on Desktop */
.ib-filters__header {
    display: none;
}

/* Filters Container */
.ib-filters__container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* First Row - Filter Chips */
.ib-filters__row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.ib-filters__row--chips {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
}

.ib-filters__label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    min-width: 60px;
}

.ib-filters__chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

/* Filter Buttons */
.ib-filter-btn {
    padding: 4px 10px;
    border: none;
    background: #f8fafc;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

.ib-filter-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.ib-filter-btn i {
    font-size: 1.3rem;
    color: #64748b;
}

.ib-filter-btn--active {
    background: var(--primary-color) !important;
    color: white;
    border-color: var(--primary-color);
}

.ib-filter-btn--active i {
    color: white;
}

/* Second Row - Search */
.ib-filters__row--search {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.ib-search-box {
    position: relative;
    flex: 1;
    max-width: 500px;
}

.ib-search-box__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.5rem;
    pointer-events: none;
}

.ib-search-box__input {
    width: 100%;
    padding: 12px 20px 12px 48px;
    border: 1px solid #e2e8f0;
    border-radius: 40px;
    font-size: 1.5rem;
    outline: none;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.ib-search-box__input:focus {
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ib-search-box__input::placeholder {
    color: #94a3b8;
    font-size: 1.4rem;
}

/* Messages Grid */
.ib-messages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Message Card */
.ib-message-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
}

.ib-message-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.1);
}

.ib-message-card--important {
    border-left: 4px solid #ff4757;
}

.ib-message-card__type-indicator {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ib-message-card__type-indicator--info {
    background: #17a2b8;
    box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.1);
}

.ib-message-card__type-indicator--success {
    background: #28a745;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.ib-message-card__type-indicator--warning {
    background: #ffc107;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}

.ib-message-card__type-indicator--danger {
    background: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.ib-message-card__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    padding-right: 20px;
    line-height: 1.4;
}

.ib-message-card__content {
    font-size: 1.3rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ib-message-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
}

.ib-message-card__date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ib-message-card__badge {
    background: #ff4757;
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 1.0rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Loading Spinner */
.ib-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.ib-loading__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: ibSpin 0.8s linear infinite;
}

@keyframes ibSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Modal */
.ib-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.ib-modal--active {
    display: flex;
}

.ib-modal__content {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 550px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    animation: ibModalSlide 0.3s ease;
}

@keyframes ibModalSlide {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ib-modal__header {
    padding: 18px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: white;
    border-radius: 20px 20px 0 0;
}

.ib-modal__header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ib-modal__header h2 i {
    color: #667eea;
    font-size: 2rem;
}

.ib-modal__close {
    background: none;
    border: none;
    font-size: 2.4rem;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.3s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f8fafc;
}

.ib-modal__close:hover {
    color: #1e293b;
    background: #f1f5f9;
}

.ib-modal__body {
    padding: 24px;
}

.ib-modal__badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ib-modal__badge--info {
    background: #e3f2fd;
    color: #0c5460;
}

.ib-modal__badge--success {
    background: #d4edda;
    color: #155724;
}

.ib-modal__badge--warning {
    background: #fff3cd;
    color: #856404;
}

.ib-modal__badge--danger {
    background: #f8d7da;
    color: #721c24;
}

.ib-modal__title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 16px;
    line-height: 1.3;
}

.ib-modal__content {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 20px;
}

.ib-modal__footer {
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Buttons */
.ib-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 30px;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ib-btn--primary {
    background: #667eea;
    color: white;
}

.ib-btn--primary:hover {
    background: #5a67d8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Metadata */
.ib-meta {
    color: #64748b;
    font-size: 1.2rem;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}

.ib-meta i {
    margin-right: 4px;
    font-size: 1.1rem;
}

/* Empty State */
.ib-empty {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
}

.ib-empty__icon {
    font-size: 4.8rem;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.ib-empty__title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.ib-empty__text {
    color: #64748b;
    font-size: 1.4rem;
}

/* Error State */
.ib-error {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
}

.ib-error__icon {
    font-size: 4.8rem;
    color: #dc3545;
    margin-bottom: 16px;
}

.ib-error__title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.ib-error__text {
    color: #64748b;
    font-size: 1.4rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ib-messages {
        padding: 12px;
    }

    .ib-header {
        padding: 16px 20px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .ib-header__title {
        font-size: 2rem;
    }

    .ib-header__title i {
        font-size: 2.4rem;
    }

    .ib-header__count {
        width: 100%;
        text-align: center;
        padding: 6px 16px;
    }

    /* Filters mobile styles */
    .ib-filters {
        padding: 16px;
    }

    .ib-filters__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ib-filters__title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ib-filters__toggle {
        display: flex;
        background: #f8fafc;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #64748b;
        border: 1px solid #e2e8f0;
    }

    .ib-filters__toggle i {
        transition: transform 0.3s ease;
        font-size: 1.4rem;
    }

    .ib-filters__toggle--active i {
        transform: rotate(180deg);
    }

    .ib-filters__container {
        display: none;
        flex-direction: column;
        gap: 16px;
        margin-top: 16px;
    }

    .ib-filters__container--active {
        display: flex;
    }

    .ib-filters__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ib-filters__row--chips {
        border-bottom: none;
        padding-bottom: 0;
    }

    .ib-filters__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .ib-filters__chips::-webkit-scrollbar {
        height: 2px;
    }

    .ib-filters__chips::-webkit-scrollbar-track {
        background: #f1f5f9;
    }

    .ib-filters__chips::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 2px;
    }

    .ib-filters__row--search {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ib-search-box {
        max-width: 100%;
        width: 100%;
    }

    .ib-messages-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ib-modal__content {
        width: 95%;
    }

    .ib-modal__header {
        padding: 14px 18px;
    }

    .ib-modal__body {
        padding: 18px;
    }

    .ib-modal__title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .ib-filter-btn {
        padding: 6px 14px;
        font-size: 1.3rem;
    }

    .ib-filter-btn__text {
        display: inline-block;
    }

    .ib-filter-btn i {
        font-size: 1.2rem;
    }

    .ib-search-box__input {
        padding: 10px 16px 10px 42px;
        font-size: 1.4rem;
    }

    .ib-search-box__icon {
        left: 14px;
        font-size: 1.3rem;
    }

    .ib-filters__label {
        font-size: 1.2rem;
        min-width: auto;
    }
}

/* Small Mobile - Icon Only */
@media (max-width: 360px) {
    .ib-filter-btn__text {
        display: none;
    }

    .ib-filter-btn {
        padding: 8px 12px;
    }

    .ib-filter-btn i {
        font-size: 1.4rem;
        margin: 0;
    }
}


/*  */
/* Transactions Grid */
.trn-transactions-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Transaction Card */
.trn-transaction-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #DCDCDC !important;
    overflow: hidden;
    transition: all 0.2s ease;
}

.trn-transaction-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: #d0d9e4;
}

/* Card Header */
.trn-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #F0F0F0;
    border-bottom: 1px solid #E8E8E8;
}

.trn-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.trn-reference {
    font-weight: 600 !important;
    color: var(--primary-color2);
    font-size: 1.5rem !important;
}

/* Card Body */
.trn-card-body {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem;
    gap: 2rem;
}

.trn-body-main {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trn-body-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* Info Rows */
.trn-info-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trn-label {
    min-width: 80px;
    color: #6c7a8d;
    font-size: 1.3rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trn-label i {
    width: 16px;
    color: #9aa8b9;
}

.trn-value {
    color: #1e2b3a;
    font-weight: 500;
}

.trn-time {
    color: #6c7a8d;
    font-size: 1.1rem;
    margin-left: 0.5rem;
}

/* Amount Section */
.trn-amount-wrapper {
    text-align: right;
}

.trn-amount-label {
    display: block;
    font-size: 1.4rem !important;
    color: #6c7a8d;
    margin-bottom: 0.25rem;
}

.trn-amount-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a2634;
    line-height: 1.2;
}

/* Action Button */
.trn-action-btn {
    background: #f0f4f9 !important;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    color: #2c3e50;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.trn-action-btn:hover {
    background: #e1e8f0;
}

.trn-action-btn i {
    color: #4a90e2;
    font-size: 1.4rem;
}

/* Card Footer */
.trn-card-footer {
    padding: 0.75rem 1.5rem;
    background: #f8fafd;
    border-top: 1px solid #eef2f6;
}

.trn-footer-meta {
    display: flex;
    gap: 1.5rem;
}

.trn-meta-item {
    color: #6c7a8d;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trn-meta-item i {
    color: #9aa8b9;
}

/* Badges */
.trn-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

.trn-badge-success {
    background: #e3f7e7;
    color: #0b6b3f;
}

.trn-badge-pending {
    background: #fff4e3;
    color: #b45b0a;
}

.trn-badge-failed {
    background: #fee9e7;
    color: #b82e1c;
}

.trn-badge-info {
    background: #e3f0ff;
    color: #0a58b4;
}

/* Responsive Breakpoints */

/* Tablet and smaller desktop */
@media (max-width: 1024px) {
    .trn-card-body {
        flex-direction: column;
        gap: 1rem;
    }

    .trn-body-action {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .trn-amount-wrapper {
        text-align: left;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .trn-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .trn-header-left {
        width: 100%;
        justify-content: space-between;
    }

    .trn-header-right {
        width: 100%;
    }

    .trn-header-right .trn-badge {
        width: 100%;
        display: block;
        text-align: center;
    }

    .trn-card-body {
        padding: 1rem;
    }

    .trn-info-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .trn-label {
        min-width: auto;
    }

    .trn-body-action {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-top: 0.5rem;
    }

    .trn-amount-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8fafd;
        padding: 0.75rem;
        border-radius: 8px;
    }

    .trn-amount-label {
        margin-bottom: 0;
        font-size: 1.2rem !important;
    }

    .trn-amount-value {
        font-size: 1.6rem !important;
    }

    .trn-action-btn {
        width: 100%;
        justify-content: center;
    }

    .trn-footer-meta {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .trn-time {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .trn-card-header {
        padding: 0.75rem 1rem;
    }

    .trn-card-body {
        padding: 0.75rem;
    }

    .trn-header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .trn-product-badge {
        width: 100%;
    }

    .trn-product-badge .trn-badge {
        width: 100%;
    }

    .trn-amount-value {
        font-size: 1.1rem;
    }
}


/* Pagination Styles */
.trn-pagination {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eef2f6;
}

.trn-pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.trn-page-numbers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.trn-page-num {
    min-width: 40px;
    height: 40px;
    border: 1px solid #e0e7ed;
    background: white;
    border-radius: 8px;
    color: #2c3e50;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trn-page-num:hover {
    background: #f0f4f9;
    border-color: #cbd5e1;
}

.trn-page-num.active {
    background: #4a90e2;
    border-color: #4a90e2;
    color: white;
}

.trn-page-num:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.trn-page-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e0e7ed;
    background: white;
    border-radius: 8px;
    color: #2c3e50;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trn-page-btn:hover:not(:disabled) {
    background: #f0f4f9;
    border-color: #cbd5e1;
}

.trn-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.trn-page-ellipsis {
    color: #6c7a8d;
    padding: 0 0.25rem;
}

/* Items per page selector */
.trn-items-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2c3e50;
    font-size: 1.25rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

.trn-items-per-page select {
    padding: 0.4rem;
    border: 1px solid #e0e7ed;
    border-radius: 6px;
    background: white;
    color: #2c3e50;
    cursor: pointer;
}

.trn-items-per-page select:focus {
    outline: none;
    border-color: #4a90e2;
}

/* Summary text */
.trn-summary {
    text-align: center;
    color: #6c7a8d;
    font-size: 0.9rem;
    margin-top: 1rem;
    padding: 0.5rem;
}

/* Empty state */
.trn-empty-state {
    text-align: center;
    padding: 3rem;
    background: #f8fafd;
    border-radius: 12px;
    color: #6c7a8d;
}

.trn-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #cbd5e1;
}

.trn-empty-state p {
    font-size: 1.1rem;
    margin: 0;
}

/* Responsive pagination */
@media (max-width: 768px) {
    .trn-pagination-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .trn-page-numbers {
        justify-content: center;
        order: -1;
        margin-bottom: 0.5rem;
    }

    .trn-page-btn {
        justify-content: center;
        flex: 1;
    }

    .trn-page-btn.prev-btn {
        order: 1;
    }

    .trn-page-btn.next-btn {
        order: 2;
    }

    .trn-items-per-page {
        justify-content: center;
        margin-top: 1.5rem;
    }

    .trn-page-num {
        min-width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .trn-page-numbers {
        gap: 0.25rem;
    }

    .trn-page-num {
        min-width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .trn-page-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.9rem;
    }
}

/*  */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Make buttons fill the container */
.action-buttons button,
.action-buttons .btn,
.action-buttons a.btn,
.action-buttons [class*="btn"] {
    flex: 1 1 auto; /* Grow to fill space, shrink if needed, auto basis */
    min-width: 120px; /* Prevent buttons from becoming too narrow */
    text-align: center;
    justify-content: center;
}

/* Alternative: Make buttons fill equally */
.action-buttons.fill-equal button,
.action-buttons.fill-equal .btn {
    flex: 1 1 0; /* Equal width distribution */
}

/* Alternative: Make buttons fill with minimum width */
.action-buttons.fill-min button,
.action-buttons.fill-min .btn {
    flex: 1 1 140px; /* Grow with minimum 140px */
}

/* For stacked layout on mobile */
@media (max-width: 480px) {
    .action-buttons {
        flex-direction: column;
    }

    .action-buttons button,
    .action-buttons .btn,
    .action-buttons a.btn,
    .action-buttons [class*="btn"] {
        width: 100%;
        flex: 0 0 auto; /* Don't grow in column layout */
    }
}

/* Button styling to ensure proper display */
.action-buttons .btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icon spacing */
.action-buttons .btn i {
    margin-right: 0.5rem;
}

/* Responsive text */
@media (max-width: 768px) {
    .action-buttons .btn {
        font-size: 0.9rem;
        padding: 0.6rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .action-buttons .btn {
        font-size: 0.85rem;
        padding: 0.75rem;
        white-space: normal; /* Allow text wrap on very small screens */
        word-break: break-word;
    }
}

/*  */
.pl-stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.pl-stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f6;
    transition: all 0.2s ease;
    text-align: center;
}

.pl-stat-card:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-color: #d0d9e4;
}

.pl-stat-value {
    font-size: 2rem !important;
    font-weight: 700;
    color: #1a2639;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.pl-stat-label {
    font-size: 1.3rem;
    color: #5a6b7c;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.pl-stat-card:first-child .pl-stat-value {
    color: #10b981;
}

.pl-stat-card:last-child .pl-stat-value {
    color: #ef4444;
}

/*  */
.discussion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

@media (max-width: 576px) {
    .discussion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .add-comment-btn {
        width: 100%;
    }
}


/* ========== BREADCRUMP ========== */

/* ----- main breadcrumb styles (using the five colours) ----- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.15rem;
  padding: 0;
}

/* breadcrumb items */
.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 500;
}

/* links (gold shades) */
.breadcrumb-item a {
  text-decoration: none;
  background-color: transparent;
  padding: 0.4rem 0.9rem;
  border-radius: 40px;
  color: #b18819; /* darker gold */
  transition: all 0.2s ease;
  border: 1px solid transparent;
  font-weight: 500;
}

.breadcrumb-item a:hover {
  background: #d4af37;   /* primary gold */
  color: white !important;
}

/* active / current page – green */
.breadcrumb-item.active {
  color: #f9fcf7;
  background: #00a86b;    /* vibrant green */
  padding: 0.4rem 1.2rem;
  border-radius: 40px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-left: 0.2rem;
}

/* ----- ARROW SEPARATOR (changed from dash) ----- */
.breadcrumb-separator {
  margin: 0 0.2rem;
  color: #b18819;
  font-weight: 500;
  font-size: 1.4rem;        /* slightly larger for visual weight */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  opacity: 0.8;
  transform: translateY(0.5px); /* fine-tune vertical alignment */
  user-select: none;
}

/* home icon variant (optional) */
.breadcrumb-item.home a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.breadcrumb-item.home a:hover {
  background: #d4af37;
}

/* responsive */
@media (max-width: 768px) {
  .breadcrumb { padding: 0; }
  .breadcrumb-item a, .breadcrumb-item.active {
    padding: 0.3rem 0.7rem;
    font-size: 1.3rem;
  }
  .breadcrumb-separator { font-size: 1.4rem; margin: 0 0.1rem; }
}

/* colour note */
.note {
  margin-top: 2rem;
  color: #3a5e4c;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0 1.5rem;
  flex-wrap: wrap;
  background: #eaf4e8;
  padding: 0.8rem 1.5rem;
  border-radius: 40px;
}

.note span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.dot-gold { display: inline-block; width: 16px; height: 16px; background: #d4af37; border-radius: 20px; }
.dot-gold-dark { background: #b18819; }
.dot-green-bright { background: #00a86b; }
.dot-green-deep { background: #008553; }

.breadcrumb-active-indicator {
    opacity:0.7;
    margin-left:6px;
    font-weight:300;
  }


/* ========== MODAL ========== */

.mdl-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-width: 100vw;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.mdl-modal {
    position: fixed;
    top: 20px;  /* Small space from top */
    left: 50%;
    transform: translate(-50%, 0);
    background: white;
    border-radius: 12px;
    width: 100% !important;
    max-width: 600px !important;
    height: calc(100% - 40px) !important;  /* Subtract top + bottom space (20px + 20px) */
    max-height: calc(100vh - 40px) !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: modalPop 0.3s ease;
}

.mdl-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    /* overflow: hidden; */
}

.mdl-modal-body {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
}

.mdl-modal-body.mdl-modal-body-center {
  height: 100vh;
  display: flex;
  align-items: center; /* vertical center */
}

.payment-summary.payment-summary-center {
    margin: 0px !important;
   /* margin: 0 20px !important;
   width: 100% !important; */
}

/* Modal header - keep at top */
.mdl-modal-header {
    padding: 8px 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-radius: 12px 12px 0 0;
}

.mdl-modal-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.close-modal {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f8f9fa;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.close-modal i {
    font-size: 2rem;
}

.close-modal:hover {
    background: #e9ecef;
    color: #2d3748;
    transform: rotate(90deg);
}

/* Modal footer */
.mdl-modal-footer {
    padding: 15px 20px !important;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: white;
    border-radius: 0 0 12px 12px;
}

/* Form Styles */
.mdl-form-group {
    margin-bottom: 20px;
}

.mdl-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.mdl-form-group-half {
    flex: 1;
    margin-bottom: 0;
}

.mdl-form-group-full {
    width: 100%;
}

.mdl-form-label {
    display: block;
    font-size: 1.3rem;
    font-weight: 500;
    color: #2d3748;
    margin-bottom: 8px;
}

.mdl-form-input,
.mdl-form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.mdl-form-input:focus,
.mdl-form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.mdl-form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .mdl-modal {
        top: 0;
        width: 95%;
        max-width: 95%;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius:0;
    }

   .matches-list-section {
        height: 100% !important;
        max-height: 100vh !important;
    }

    .mdl-modal-header {
        padding: 12px 15px;
    }

    .mdl-modal-title {
        font-size: 1.6rem;
    }

    .mdl-modal-body {
        padding: 0;
    }

    .mdl-modal-footer {
        padding: 12px 15px;
        margin-bottom:80px;
    }

    .mdl-form-row {
        flex-direction: column;
        gap: 15px;
    }

    /* Keep these if they're part of your profile/user styles */
    .mdl-header-content {
        flex-direction: column;
    }

    .mdl-user-main {
        flex-direction: column;
        text-align: center;
    }

    .mdl-avatar-container {
        margin: 0 auto;
    }

    .mdl-name {
        justify-content: center;
    }

    .mdl-user-stats {
        justify-content: center;
    }

    .mdl-profile-actions {
        width: 100%;
        justify-content: center;
    }
}

/* Utility class to show/hide modal */
.mdl-modal-overlay.active {
    display: block;
}

/* Ensure modal is visible when overlay is active */
.mdl-modal-overlay.active .mdl-modal {
    display: flex;
}


/* PROFILE BANNER */

/* Add/modify these styles */

.pf-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Style for the form group containing the upload */
.pf-modal-body .pf-form-group {
    width: 100%;
    max-width: 100%; /* Limit width of upload area */
    margin: 0 auto; /* Additional centering */
    display: flex;
    justify-content: center;
}

/* File upload styling */
.pf-file-upload {
    display: block;
    width: 100%;
    cursor: pointer;
    border: 2px dashed var(--primary-color);
    border-radius: 12px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.pf-file-upload:hover {
    border-color: var(--primary-color2);
    background: #f0f3ff;
}

/* Default upload state */
.pf-upload-default {
    padding: 40px 20px;
    text-align: center;
}

.pf-file-upload-icon {
    font-size: 4.8rem;
    color: #667eea;
    margin-bottom: 15px;
}

.pf-file-upload-icon i {
    font-size: 4.8rem;
}

.pf-file-upload-text strong {
    display: block;
    color: #2d3748;
    margin-bottom: 5px;
    font-size: 1.6rem;
}

.pf-file-upload-text p {
    color: #718096;
    font-size: 1.4rem;
    margin: 0;
}

/* Preview state */
/* Preview Container */
.pf-upload-preview {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.pf-upload-preview:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

/* Preview Image */
.pf-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.pf-upload-preview:hover .pf-image-preview {
    transform: scale(1.05);
}

/* Overlay Container */
.pf-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 50%;
    backdrop-filter: blur(2px);
}

.pf-upload-preview:hover .pf-preview-overlay {
    opacity: 1;
}

/* Overlay Text Content */
.pf-preview-text {
    text-align: center;
    color: white;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.pf-upload-preview:hover .pf-preview-text {
    transform: translateY(0);
}

.pf-preview-text i {
    font-size: 32px;
    margin-bottom: 10px;
    display: block;
    animation: rotateIcon 0.5s ease;
}

.pf-preview-text span {
    font-size: 14px;
    font-weight: 500;
    display: block;
    letter-spacing: 0.5px;
}

/* Loading State for Preview */
.pf-upload-preview.loading {
    opacity: 0.6;
    pointer-events: none;
}

.pf-upload-preview.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

/* Success State Animation */
.pf-upload-preview.success {
    animation: successPulse 0.5s ease;
}

.pf-upload-preview.success .pf-image-preview {
    box-shadow: 0 0 0 3px #00a86b;
}

/* Error State */
.pf-upload-preview.error {
    animation: errorShake 0.5s ease;
}

.pf-upload-preview.error .pf-image-preview {
    box-shadow: 0 0 0 3px #dc3545;
}

/* Animations */
@keyframes rotateIcon {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes successPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 168, 107, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(0, 168, 107, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 168, 107, 0);
    }
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .pf-upload-preview {
        width: 150px;
        height: 150px;
    }

    .pf-preview-text i {
        font-size: 24px;
    }

    .pf-preview-text span {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .pf-upload-preview {
        width: 120px;
        height: 120px;
    }

    .pf-preview-text i {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .pf-preview-text span {
        font-size: 10px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .pf-upload-preview {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .pf-preview-overlay {
        background: rgba(0, 0, 0, 0.85);
    }
}

/* Optional: Add a subtle border for better visibility */
.pf-upload-preview {
    border: 2px solid rgba(212, 175, 55, 0.3);
}

.pf-upload-preview:hover {
    border-color: rgba(212, 175, 55, 0.8);
}

/* Optional: Add a camera icon indicator */
.pf-upload-preview::before {
    content: '\f030';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
    pointer-events: none;
}

.pf-upload-preview:hover::before {
    opacity: 1;
}

/* Focus state for accessibility */
.pf-upload-preview:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5);
    transform: scale(1.01);
}


/* Hide the actual file input */
.pf-file-input {
    display: none;
}

/* For mobile devices */
@media (max-width: 768px) {
    .pf-modal-body {
        padding: 15px;
    }

    .pf-form-group {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .pf-file-upload {
        width: 100%;
        margin: 0 auto;
    }
}

/* For very small screens */
@media (max-width: 480px) {
    .pf-modal-body {
        padding: 10px;
    }

    .pf-upload-default {
        padding: 20px 15px;
    }

    .pf-file-upload-text {
        text-align: center;
    }

    .pf-file-upload-text p {
        font-size: 12px;
    }
}


/*  */

/* User item styling */
.user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    transition: all 0.3s ease;
    border-radius: 12px;
    margin: 4px 8px;
    background: white;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.user-item:hover {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* User info wrapper - takes available space but allows truncation */
.user-info-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* Important for flexbox truncation */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    gap: 12px;
}

/* Avatar wrapper - fixed size, won't squeeze */
.avatar-wrapper {
    flex: 0 0 56px; /* Don't grow, don't shrink, fixed at 56px */
    width: 56px;
    height: 56px;
    position: relative;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: block;
}

.user-item:hover .avatar-img {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* User info container - takes remaining space and handles truncation */
.user-info {
    flex: 1;
    min-width: 0; /* Critical for text truncation */
    overflow: hidden;
}

/* User name with truncation */
.user-name {
    font-weight: 600;
    color: #1a202c;
    font-size: 1.4rem;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.user-name .verified-badge {
    color: #4299e1;
    font-size: 0.9rem;
    flex-shrink: 0; /* Prevent badge from shrinking */
}

/* Username with truncation */
.username {
    color: #718096;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.username i {
    font-size: 1.2rem;
    color: #a0aec0;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Bio with truncation - multi-line */
.user-bio {
    color: #4a5568;
    font-size: 0.813rem;
    margin-top: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #f8fafc;
    padding: 6px 10px;
    border-radius: 16px;
    max-width: 100%;
    word-break: break-word;
}

/* Button container - fixed width, won't shrink */
.user-item .ms-3 {
    flex: 0 0 auto; /* Don't grow or shrink */
    margin-left: 12px;
}

span.btn-text {
  color:#fff !important;
}

.following span.btn-text {
  color: var(--primary-color) !important;
}

/* Tablet and smaller screens */
@media (max-width: 768px) {
    .user-item {
        padding: 12px 14px;
        margin: 4px 6px;
    }

    .avatar-wrapper {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
    }

    .user-name {
        font-size: 0.969rem;
    }

    .username {
        font-size: 0.844rem;
    }

    .user-bio {
        font-size: 0.781rem;
        padding: 5px 9px;
        -webkit-line-clamp: 2; /* Keep 2 lines on tablet */
        max-width: 220px;
    }

    /* Better spacing for list items */
    .user-list {
        max-height: 350px;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .user-item {
        padding: 10px 12px;
        margin: 2px 4px;
    }

    .avatar-wrapper {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }

    .user-name {
        font-size: 0.938rem;
    }

    .username {
        font-size: 0.813rem;
    }

    .user-bio {
        font-size: 0.75rem;
        padding: 4px 8px;
        -webkit-line-clamp: 1; /* Show only 1 line on mobile */
    }
}

/* For very narrow containers */
@media (max-width: 360px) {
    .user-item {
        flex-wrap: wrap;
        gap: 10px;
    }

    .user-info-wrapper {
        width: 100%;
        flex: 1 1 auto;
    }

    .user-item .ms-3 {
        width: 100%;
        margin-left: 68px; /* Align with avatar width + gap */
        flex: 0 0 auto;
    }
}


/*  */
.trn-detail-grid{
  gap: 1px;
  padding: 4px 0;
}

.trn-card-info {
    display: flex;
    gap: 4px;
    min-width: 0; /* Prevents overflow */
}

/* Mobile View - 768px and below */
@media (max-width: 768px) {
    /* Main container for all items */
    .trn-detail-grid {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 4px;
    }

    /* Modern card design */
    .trn-mobile-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid #f0f2f5;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
    }

    /* Subtle hover effect */
    .trn-mobile-card:active {
        background: #fafbfc;
        transform: translateY(1px);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    }

    /* Icon container with modern gradient */
    .trn-card-icon {
        width: 48px;
        height: 48px;
        background-color: #f3f4f6;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4f46e5;
        font-size: 1.3rem;
        flex-shrink: 0;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    }

    /* Info section - takes remaining space */
    .trn-card-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0; /* Prevents overflow */
    }

    /* Label styling - subtle and clean */
    .trn-card-label {
        font-size: 1.2rem !important;
        font-weight: 500;
        color: #9ca3af;
        text-transform: capitalize;
        letter-spacing: 0.3px;
    }

    /* Value styling - bold and clear */
    .trn-card-value {
        font-size: 1.4rem !important;
        font-weight: 600;
        color: #1f2937;
        line-height: 1.4;
        word-break: break-word;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Special styling for Reference */
    .trn-card-value:has(.reference-value) {
        font-family: 'SF Mono', 'Courier New', monospace;
        background: #f3f4f6;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.9rem;
        display: inline-flex;
        width: fit-content;
    }

    /* Status badges - modern pill design */
    .status-badge-modern {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 30px;
        font-size: 0.8rem;
        font-weight: 500;
        gap: 4px;
        background: #f3f4f6;
    }

    .status-badge-modern.success {
        background: #e6f7e6;
        color: #0a7e0a;
    }

    .status-badge-modern.success i {
        color: #0a7e0a;
    }

    .status-badge-modern.pending {
        background: #fff3d4;
        color: #b45b0a;
    }

    .status-badge-modern.pending i {
        color: #b45b0a;
    }

    .status-badge-modern.failed {
        background: #ffe5e5;
        color: #c00f0f;
    }

    .status-badge-modern.failed i {
        color: #c00f0f;
    }

    .status-badge-modern.processing {
        background: #e3f0ff;
        color: #0066cc;
    }

    .status-badge-modern.processing i {
        color: #0066cc;
    }

    /* Amount styling - make it pop */
    .trn-card-value.amount-value {
        font-size: 1.2rem;
        font-weight: 700;
        color: #059669;
    }

    /* Product type tag */
    .product-tag {
        background: #e5e7eb;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 500;
        color: #4b5563;
        margin-left: 6px;
    }

    /* Copy button - minimal design */
    .copy-btn-minimal {
        background: transparent;
        border: none;
        color: #9ca3af;
        cursor: pointer;
        padding: 4px;
        margin-left: 4px;
        transition: color 0.2s;
        display: inline-flex;
        align-items: center;
    }

    .copy-btn-minimal i {
        font-size: 0.8rem;
        background: none;
        box-shadow: none;
        width: auto;
        height: auto;
    }

    .copy-btn-minimal:hover {
        color: #4f46e5;
    }

    /* Date display - two-line on mobile if needed */
    .date-display {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .date-display .date-day {
        font-weight: 600;
    }

    .date-display .date-time {
        font-size: 0.8rem;
        color: #6b7280;
        font-weight: 400;
    }

    /* Divider between items */
    .trn-mobile-card:not(:last-child) {
        border-bottom: 1px solid #f3f4f6;
    }

    /* Compact version for dense content */
    .trn-mobile-card.compact {
        padding: 12px;
        gap: 12px;
    }

    .trn-mobile-card.compact .trn-card-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .trn-mobile-card.compact .trn-card-label {
        font-size: 0.65rem;
    }

    .trn-mobile-card.compact .trn-card-value {
        font-size: 0.9rem;
    }

    /* Pill-style card alternative */
    .trn-mobile-card.pill-style {
        border-radius: 30px;
        padding: 12px 18px;
    }

    .trn-mobile-card.pill-style .trn-card-icon {
        border-radius: 50%;
        width: 42px;
        height: 42px;
    }

    /* Minimal style with less visual weight */
    .trn-mobile-card.minimal {
        background: transparent;
        box-shadow: none;
        border: none;
        border-bottom: 1px solid #edf2f7;
        border-radius: 0;
        padding: 14px 0;
    }

    .trn-mobile-card.minimal .trn-card-icon {
        background: transparent;
        box-shadow: none;
        color: #4f46e5;
    }

    /* Loading skeleton */
    .trn-mobile-card.skeleton {
        pointer-events: none;
    }

    .trn-mobile-card.skeleton .trn-card-icon {
        background: #e5e7eb;
        color: transparent;
    }

    .trn-mobile-card.skeleton .trn-card-label,
    .trn-mobile-card.skeleton .trn-card-value {
        background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        color: transparent;
        border-radius: 4px;
        height: 12px;
    }

    .trn-mobile-card.skeleton .trn-card-label {
        width: 60px;
        height: 10px;
    }

    .trn-mobile-card.skeleton .trn-card-value {
        width: 100px;
        height: 16px;
        margin-top: 4px;
    }

    @keyframes shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* Empty state */
    .trn-mobile-card.empty {
        background: #fafbfc;
        border: 1px dashed #d1d5db;
        opacity: 0.7;
    }

    .trn-mobile-card.empty .trn-card-value {
        color: #9ca3af;
        font-style: italic;
    }

    /* Two-column layout for certain items */
    .trn-detail-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 8px;
    }

    .trn-detail-row .trn-mobile-card {
        margin: 0;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .trn-mobile-card {
        padding: 14px;
        gap: 12px;
    }

    .trn-card-icon {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    .trn-card-label {
        font-size: 1.2rem;
    }

    .trn-card-value {
        font-size: 1.4rem;
    }

    .status-badge-modern {
        padding: 3px 10px;
        font-size: 0.75rem;
    }

    .trn-detail-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .trn-mobile-card {
        background: #1e293b;
        border-color: #334155;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .trn-mobile-card:active {
        background: #2d3748;
    }

    .trn-card-icon {
        background: linear-gradient(145deg, #2d3748, #1e293b);
        color: #818cf8;
    }

    .trn-card-label {
        color: #94a3b8;
    }

    .trn-card-value {
        color: #f1f5f9;
    }

    .trn-card-value:has(.reference-value) {
        background: #2d3748;
        color: #e2e8f0;
    }

    .product-tag {
        background: #334155;
        color: #cbd5e1;
    }

    .copy-btn-minimal {
        color: #64748b;
    }

    .copy-btn-minimal:hover {
        color: #818cf8;
    }

    .trn-mobile-card.minimal {
        background: transparent;
        border-bottom-color: #334155;
    }

    .trn-mobile-card.minimal .trn-card-icon {
        background: transparent;
    }

    .trn-mobile-card.empty {
        background: #1e293b;
        border-color: #475569;
    }

    .trn-mobile-card.skeleton .trn-card-icon {
        background: #334155;
    }
}

/* Optional: Add subtle animation when items appear */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*  */
.mdl-modal-body.loading-stats {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.mdl-modal-body.loading-stats::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #d4af37;
    border-radius: 50%;
    animation: stats-spin 1s linear infinite;
    z-index: 1000;
}

@keyframes stats-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/*  */
.adv-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 25px; padding: 15px 20px;}
.adv-stat-card { display: flex; align-items: center; gap: 15px; padding: 15px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; transition: transform 0.2s ease; }
.adv-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.adv-stat-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.adv-stat-content { flex: 1; }
.adv-stat-value { font-size: 2.2rem; font-weight: 700; color: #1a2639; line-height: 1.2; }
.adv-stat-label { font-size: 1.3rem; color: #6c757d; margin-top: 4px; }

/* Compact Progress Styles */
.adv-progress-overview {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}

.adv-progress-overview h4 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1a2639;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.2px;
}

.adv-progress-overview h4:before {
    content: '';
    width: 4px;
    height: 18px;
    background: linear-gradient(135deg, #d4af37, #b18819);
    border-radius: 4px;
    display: inline-block;
}

.adv-progress-details {
    background: #fafbfc;
    border-radius: 12px;
    padding: 8px 0;
    margin-bottom: 20px;
    border: 1px solid #edf2f7;
}

.adv-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #edf2f7;
    transition: background-color 0.2s ease;
}

.adv-progress-row:last-child {
    border-bottom: none;
}

.adv-progress-row:hover {
    background-color: #f8fafc;
}

.adv-progress-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #4a5568;
    letter-spacing: -0.2px;
    /* Ensure label takes only what it needs */
    flex-shrink: 0;
}

.adv-progress-label i {
    transition: transform 0.2s ease;
    margin-right: 4px;
}

.adv-progress-row:hover .adv-progress-label i {
    transform: scale(1.2);
}

.adv-progress-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a2639;
    background: white;
    padding: 6px 16px;
    border-radius: 30px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    border: 1px solid #e9ecef;
    /* Push to the right with margin */
    margin-left: 20px;
    /* Allow value to shrink if needed */
    min-width: 90px;
    justify-content: flex-end;
}

.adv-progress-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2d3748;
}

.adv-progress-unit {
    font-size: 1.1rem;
    font-weight: 400;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.adv-progress-bar-large {
    height: 10px;
    background: #edf2f7;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 16px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
}

.adv-progress-fill-large {
    height: 100%;
    background: linear-gradient(90deg, #d4af37, #f5d742, #d4af37);
    border-radius: 20px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Completion value special styling */
.adv-progress-row:last-child .adv-progress-value {
    background: #fef8e7;
    border-color: #d4af37;
}

.adv-progress-row:last-child .adv-progress-number {
    color: #b18819;
}

@media (max-width: 768px) {
    .adv-stats-grid { padding: 15px 7px}
    .adv-progress-overview { padding: 7px; margin: 7px;}

    .adv-stats-grid { grid-template-columns: 1fr; }

    .adv-progress-row {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .adv-progress-value {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        min-width: auto;
    }

    .adv-progress-label {
        width: 100%;
    }
}

/*  */
.adv-period-selector {
    display: flex;
    gap: 10px;
    padding: 25px 20px;
    width: 100%;
}

.adv-period-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    color: #495057;
}

.adv-period-btn:hover {
    background: #f8f9fa;
    border-color: #c1c9d0;
}

.adv-period-btn.active {
    background: #d4af37;
    color: white;
    border-color: #d4af37;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Mobile styles with horizontal scroll */
@media (max-width: 768px) {
    .adv-period-selector {
        flex-wrap: nowrap;        /* Prevent wrapping */
        overflow-x: auto;          /* Enable horizontal scroll */
        -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
        padding: 10px 7px;      /* Space for scrollbar */
        gap: 8px;
        scrollbar-width: thin;     /* Firefox - thin scrollbar */
        scrollbar-color: #d4af37 #e9ecef;  /* Firefox - scrollbar colors */
    }

    /* Style the scrollbar for Chrome/Safari */
    .adv-period-selector::-webkit-scrollbar {
        height: 4px;
    }

    .adv-period-selector::-webkit-scrollbar-track {
        background: #e9ecef;
        border-radius: 4px;
    }

    .adv-period-selector::-webkit-scrollbar-thumb {
        background: #d4af37;
        border-radius: 4px;
    }

    .adv-period-selector::-webkit-scrollbar-thumb:hover {
        background: #b18819;
    }

    .adv-period-btn {
        flex: 0 0 auto;           /* Don't grow, don't shrink, auto basis */
        min-width: 120px;          /* Minimum width for buttons */
        white-space: nowrap;       /* Keep text on one line */
        margin: 0;                 /* Remove any margins */
    }

    /* Optional: Add fade effect on edges to indicate scrollability */
    .adv-period-selector {
        position: relative;
    }

    .adv-period-selector:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 10px;
        width: 40px;
        background: linear-gradient(to right, transparent, white);
        pointer-events: none;
        opacity: 0.8;
    }

    .adv-period-selector:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 10px;
        width: 40px;
        background: linear-gradient(to left, transparent, white);
        pointer-events: none;
        opacity: 0;
        z-index: 1;
    }

    /* Show left fade when scrolled */
    .adv-period-selector.scrolled-left:before {
        opacity: 0.8;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .adv-period-btn {
        min-width: 100px;          /* Slightly smaller on very small screens */
        padding: 8px 12px;
        font-size: 1.3rem;
    }
}


/*  PROFILE */
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.profile-notification {
    cursor: pointer;
}
.stat-item {
    transition: all 0.2s ease;
}


/* ========== DRAWER ========== */

/* Drawer Styles */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.drawer.open {
    right: 0;
}

.drawer-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: #333;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.drawer-close:hover {
    background: #f0f0f0;
    color: #d4af37;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid #e1e8ed;
    text-align: center;
}

.drawer-loading {
    text-align: center;
    padding: 40px 0;
}

.drawer-empty {
    text-align: center;
    padding: 60px 0;
    color: #999;
}

.drawer-empty i {
    font-size: 4.8rem;
    color: #d4af37;
    opacity: 0.5;
    margin-bottom: 16px;
}

.drawer-list {
    display: flex;
    flex-direction: column;
}

.drawer-load-more {
    padding: 10px 24px;
    background: #d4af37;
    color: white;
    border: none;
    border-radius: 40px;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.drawer-load-more:hover {
    background: #b18819;
    transform: translateY(-2px);
}

.drawer-load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* User item styles for drawer */
.drawer-list .user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    transition: background-color 0.2s ease;
    gap: 1rem;
}

.drawer-list .user-item:hover {
    background: rgba(212, 175, 55, 0.05);
}

.drawer-list .user-info-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    cursor: pointer;
    min-width: 0; /* Prevents flex overflow */
}

.drawer-list .user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-color, #e5e7eb);
}

.drawer-list .user-details {
    flex: 1;
    min-width: 0; /* Allows text truncation */
}

.drawer-list .user-name {
    font-weight: 600;
    color: var(--text-color, #1f2937);
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.75rem;
}

.drawer-list .user-username {
    font-size: 1.3rem;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.75rem;
}

/* User Action Button Container */
.user-action {
    flex-shrink: 0;
}

.drawer-list .self-badge {
    background: #f3f4f6;
    color: #6b7280;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 1.1rem !important;
    font-weight: 500;
    white-space: nowrap;
}

.drawer-empty .pl-sidebar-error p {
   font-size: 1.4rem !important;
}

@media (max-width: 480px) {
    .drawer {
        width: 100%;
        right: -100%;
    }
}

/* Mobile Responsive - Action button below user info */
@media (max-width: 768px) {
    .drawer-list .user-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem;
    }

    .drawer-list .user-info-wrapper {
        gap: 1rem;
    }

    .drawer-list .user-avatar {
        width: 52px;
        height: 52px;
    }

    .drawer-list .user-name {
        font-size: 1.6rem !important;
        white-space: normal;
        word-break: break-word;
    }

    .drawer-list .user-username {
        font-size: 1.4rem !important;
        white-space: normal;
        word-break: break-word;
    }

    .drawer-list .user-action {
        width: 100%;
        text-align: center;
    }

    .drawer-list .self-badge {
        display: inline-block;
        width: auto;
        min-width: 100px;
        text-align: center;
        font-size: 1.4rem !important;
    }
}

/* Tablet Responsive (keep horizontal but adjust spacing) */
@media (min-width: 769px) and (max-width: 1024px) {
    .drawer-list .user-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .drawer-list .user-avatar {
        width: 44px;
        height: 44px;
    }

    .drawer-list .user-name {
        font-size: 0.9rem;
    }
}

/* Optional: Animation for mobile layout change */
@media (max-width: 768px) {
    .drawer-list .user-item {
        animation: slideIn 0.3s ease-out;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*  */
/* ======================================
   PROFILE PAGE STYLES
   ====================================== */

/* ---------- Profile Header Container ---------- */
.profile-header {
    background: white;
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

/* ---------- Header Content Layout ---------- */
.profile-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
}

/* ---------- User Main Section ---------- */
.profile-user-main {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1;
}

/* ---------- Avatar Section ---------- */
.profile-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #d4af37;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2);
    transition: all 0.3s ease;
}

.profile-avatar:hover {
    transform: scale(1.02);
    border-color: #b18819;
}

.profile-avatar-edit {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d4af37;
    border: 2px solid white;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transform: scale(0.8);
}

.profile-avatar-wrapper:hover .profile-avatar-edit {
    opacity: 1;
    transform: scale(1);
}

.profile-avatar-edit:hover {
    background: #b18819;
    transform: scale(1.1);
}

/* ---------- User Info Section ---------- */
.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #1a1a1a;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.profile-bio {
    color: #666666;
    font-size: 1.5rem;
    line-height: 1.6;
    margin: 0;
    max-width: 500px;
}

/* ---------- Profile Actions (Follow/Edit Button) ---------- */
.profile-actions {
    flex-shrink: 0;
    min-width: 140px;
}

/* ---------- Follow Button Styles ---------- */
.profile-follow-btn {
    padding: 12px 28px;
    border-radius: 50px;
    border: none;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.profile-follow-btn.following {
    background: #f0f0f0;
    color: #666;
    border: 1px solid #ddd;
}

.profile-follow-btn.following:hover {
    background: #ffebee;
    color: #d32f2f;
    border-color: #ffcdd2;
}

.profile-follow-btn.not-following {
    background: #d4af37;
    color: white;
}

.profile-follow-btn.not-following:hover {
    background: #b18819;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3);
}

/* ---------- Edit Button Styles ---------- */
.profile-edit-btn {
    padding: 12px 28px;
    border-radius: 50px;
    border: 2px solid #d4af37;
    background: transparent;
    color: #d4af37;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.profile-edit-btn:hover {
    background: #d4af37;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.2);
}

/* ---------- Notifications ---------- */
.profile-notification {
    position: fixed;
    top: 24px;
    right: 24px;
    padding: 14px 28px;
    border-radius: 50px;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    animation: slideInRight 0.3s ease;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.5rem;
    max-width: 400px;
    backdrop-filter: blur(10px);
}

.profile-notification.success {
    background: #00a86b;
    border-left: 4px solid #008553;
}

.profile-notification.error {
    background: #dc3545;
    border-left: 4px solid #a71d2a;
}

.profile-notification.info {
    background: #d4af37;
    border-left: 4px solid #b18819;
}

.profile-notification.hide {
    animation: slideOutRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ---------- Error State ---------- */
.profile-error {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.profile-error i {
    font-size: 4.8rem;
    color: #dc3545;
    margin-bottom: 16px;
}

.profile-error p {
    color: #666;
    font-size: 1.8rem;
    margin-bottom: 24px;
}

.profile-retry-btn {
    padding: 12px 32px;
    background: #d4af37;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.profile-retry-btn:hover {
    background: #b18819;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

/*  */
/* Profile Stats - Modern & Mobile-First */
.profile-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1.25rem;
    margin: 1.5rem 0;
}

/* Stat Item */
.pfl-stat-item {
    flex: 1;
    text-align: center;
    background-color: #f8f8f8;
    border:1px solid #F0F0F0;
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Stat Value */
.pfl-stat-value {
    font-size: 2.5rem !important;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    transition: transform 0.2s ease;
}

/* Stat Label */
.pfl-stat-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.5rem !important;
    font-weight: 500;
    color: #64748b;
    transition: color 0.2s ease;
}

.pfl-stat-label i {
    font-size: 1.6rem !important;
    transition: transform 0.2s ease;
    color: var(--primary-color);
}

.pfl-stat-label span {
    white-space: nowrap;
    font-size: 1.5rem !important;
}

/* Separator between stats */
.pfl-stat-item:not(:last-child)::before {
    content: '';
    position: absolute;
    right: -0.375rem;
    top: 50%;
    height: 2rem;
    width: 1px;
}

/* ============================================
   PROFILE STATS - MOBILE RESPONSIVE (max-width: 768px)
   ============================================ */

@media screen and (max-width: 768px) {

    /* Profile Stats Container */
    .profile-stats {
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 0.5rem;
        padding: 0;
        border-radius: 1rem;
        margin: 1.5rem 0;
    }

    /* Stat Items */
    .pfl-stat-item {
        flex: 1;
        text-align: center;
        padding: 0.5rem 0.25rem;
        border-radius: 0.875rem;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        min-height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }

    /* Ripple Effect Container */
    .pfl-stat-item {
        overflow: hidden;
        position: relative;
    }

    /* Stat Value */
    .pfl-stat-value {
        font-size: 2.2rem !important;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 0.375rem;
        letter-spacing: -0.02em;
    }

    /* Stat Label */
    .pfl-stat-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        font-size: 1.35rem !important;
        font-weight: 500;
    }

    .pfl-stat-label i {
        font-size: 1.35rem !important;
    }

    .pfl-stat-label span {
        font-size: 1.35rem !important;
        white-space: nowrap;
    }

    /* Separator Between Stats */
    .pfl-stat-item:not(:last-child)::before {
        content: '';
        position: absolute;
        right: -0.25rem;
        top: 50%;
        height: 1.75rem;
        width: 1px;
    }

    /* Loading State */
    .pfl-stat-value.loading {
        animation: statPulse 1s ease-in-out infinite;
        background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
        background-size: 200% 100%;
        background-clip: text;
        -webkit-background-clip: text;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 0.25rem;
    }

    /* Animation */
    @keyframes statPulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.6;
        }
    }

    /* Accessibility - Focus States */
    .pfl-stat-item:focus-visible {
        outline: 2px solid #667eea;
        outline-offset: 2px;
        transform: scale(1.02);
    }

    /* Optional: Gradient Border on Hover */
    .profile-stats {
        position: relative;
    }

    .profile-stats::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 2px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .profile-stats:hover::before {
        opacity: 1;
    }
}

/* Loading State Animation */
@keyframes statPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.pfl-stat-value.loading {
    animation: statPulse 1s ease-in-out infinite;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    border-radius: 0.25rem;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

/* Accessibility - Focus States */
.pfl-stat-item:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    transform: scale(1.02);
}

/* Optional: Add a subtle gradient border */
.profile-stats {
    position: relative;
}

.profile-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.profile-stats:hover::before {
    opacity: 1;
}

/* ---------- Tablet Styles (768px - 992px) ---------- */
@media screen and (max-width: 992px) {
    .profile-header {
        padding: 28px;
    }

    .profile-user-main {
        gap: 24px;
    }

    .profile-avatar {
        width: 100px;
        height: 100px;
    }

    .profile-name {
        font-size: 2rem;
    }
}

/* ---------- Mobile Landscape (576px - 768px) ---------- */
@media screen and (max-width: 768px) {
    .profile-header {
        padding: 5px;
    }

    .profile-header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-user-main {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .profile-avatar {
        width: 110px;
        height: 110px;
    }

    .profile-name {
        font-size: 2.0rem;
    }

    .profile-bio {
        font-size: 1.5rem;
        max-width: 100%;
    }

    .profile-actions {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .profile-notification {
        top: 16px;
        right: 16px;
        left: 16px;
        max-width: none;
        text-align: center;
    }
}

/* ---------- Mobile Portrait (up to 576px) ---------- */
@media screen and (max-width: 576px) {
    .profile-header {
        padding: 5px;
        border-radius: 20px;
    }

    .profile-avatar {
        width: 100px;
        height: 100px;
    }

    .profile-name {
        font-size: 2.2rem;
    }

    .profile-follow-btn,
    .profile-edit-btn {
        padding: 10px 20px;
        font-size: 1.5rem;
    }
}

/*  */
/* ========== ACHIEVEMENTS SECTION ========== */

/* Achievements Header */
.achievements-header {
    margin-bottom: 30px;
}

.achievements-subtitle {
    color: #666;
    font-size: 1.4rem;
    margin-top: 8px;
}

/* Achievements Grid Layout */
.pf-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/*  */
/* ============================================
   ACHIEVEMENTS SECTION - MODERN & RESPONSIVE
   ============================================ */

/* Container Styles */
.pf-tab-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Achievements Grid */
.pf-achievements-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* Achievement Card */
.achievement-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
    border: var(--container-border);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.achievement-card:active {
    background-color: #fafafa;
}

/* Icon Wrapper */
.achievement-icon-wrapper {
    flex-shrink: 0;
    position: relative;
}

/* Achievement Icon */
.achievement-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 6px 14px rgba(102, 126, 234, 0.25);
    position: relative;
    overflow: hidden;
}

.achievement-icon i {
    font-size: 1.75rem !important;
    color: white;
    transition: transform 0.3s ease;
}

/* Unlocked State */
.achievement-card.unlocked .achievement-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.3);
}

.achievement-card.unlocked .achievement-icon i {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Locked State */
.achievement-card.locked {
    opacity: 0.85;
    background-color: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
}

.achievement-card.locked .achievement-icon {
    filter: grayscale(0.3);
    opacity: 0.7;
}

/* Badges */
.unlocked-badge {
    position: absolute;
    bottom: 0.575rem;
    right: 0.575rem;
    background: inherit !important;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unlocked-badge i {
    font-size: 0.975rem !important;
    color: white;
    background: #059669;
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.locked-overlay i {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Rarity Badge */
.rarity-badge {
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    font-size: 0.625rem;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-weight: 700;
    white-space: nowrap;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.rarity-badge.common {
    background: #6c757d;
    color: white;
}

.rarity-badge.rare {
    background: #3b82f6;
    color: white;
}

.rarity-badge.epic {
    background: #8b5cf6;
    color: white;
}

.rarity-badge.legendary {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
}

/* Content Area */
.achievement-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

/* Header */
.achievement-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.achievement-title {
    font-size: 1.425rem !important;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
    line-height: 1.3;
    flex: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.achievement-card.locked .achievement-title {
    color: #64748b;
}

/* Points */
.achievement-points {
    font-size: 0.75rem;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.achievement-points i {
    font-size: 0.6875rem;
}

/* Description */
.achievement-description {
    font-size: 1.175rem !important;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 0.875rem 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Progress Section */
.achievement-progress {
    margin: 0.875rem 0;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.progress-label {
    font-size: 1.1rem !important;
    font-weight: 600;
    text-transform: capitalize;
    color: #94a3b8;
    letter-spacing: 0.03em;
}

.progress-percentage {
    font-size: 1.35rem !important;
    font-weight: 700;
    color: #10b981;
}

.progress-bar {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    height: 0.625rem;
    overflow: hidden;
    width: 100%;
}

.progress-fill {
    background: linear-gradient(90deg, #10b981, #34d399);
    height: 100%;
    border-radius: 0.75rem;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    width: 0%;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

/* Next Milestone */
.next-milestone {
    font-size: 0.6875rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.next-milestone i {
    font-size: 0.625rem;
    color: #10b981;
}

/* Footer */
.achievement-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
}

.unlocked-info,
.locked-info {
    font-size: 1.1rem !important;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.unlocked-info {
    color: #10b981;
}

.locked-info {
    color: #94a3b8;
}

.unlocked-info i,
.locked-info i {
    font-size: 0.75rem;
}

.achievement-category {
    font-size: 0.6875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #94a3b8;
    background: rgba(0, 0, 0, 0.04);
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
}

/* Share Button */
.achievement-share {
    margin-top: 0.875rem;
}

/* Header Stats Section */
.achievements-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.achievements-header::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.header-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.header-icon i {
    font-size: 1.75rem;
    color: white;
}

.header-text {
    flex: 1;
}

.section-heading {
    font-size: 1.8rem !important;
    font-weight: 800;
    margin: 1rem 0;
}

.section-description {
    font-size: 0.8125rem;
    margin: 0;
    opacity: 0.9;
}

/* Stats Summary */
.achievement-stats-summary {
    display: flex;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.stat-chip {
    flex: 1;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 0.625rem;
    text-align: center;
}

/* Filters */
.achievements-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    align-items: center;
}

.filter-scroll {
    flex: 1;
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}

.filter-scroll::-webkit-scrollbar {
    height: 2px;
}

.filter-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.filter-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.filter-btn {
    flex-shrink: 0;
    background: #f1f5f9;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-btn i {
    font-size: 0.875rem;
}

.filter-btn.active {
    background: #667eea;
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.filter-btn:active {
    transform: scale(0.95);
}

.sort-btn {
    background: #f1f5f9;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-btn:active {
    transform: scale(0.95);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: #fff;
    border-radius: 1.5rem;
    margin-top: 1rem;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h4 {
    font-size: 1.125rem;
    margin: 0 0 0.5rem 0;
    color: #1e293b;
}

.empty-state p {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* Animations */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes badgePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.achievement-card {
    animation: fadeIn 0.4s ease forwards;
}

/* Tablet Responsive (640px and up) */
@media (min-width: 640px) {
    .pf-achievements-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        padding: 1rem;
    }

    .achievement-card {
        padding: 1.25rem;
        gap: 1rem;
    }

    .achievement-icon {
        width: 4.5rem;
        height: 4.5rem;
    }

    .achievement-icon i {
        font-size: 2rem;
    }

    .achievement-title {
        font-size: 1.125rem;
    }

    .achievement-description {
        font-size: 0.875rem;
    }

    .achievements-header {
        padding: 1.75rem;
    }

    .header-icon {
        width: 4rem;
        height: 4rem;
    }

    .header-icon i {
        font-size: 2rem;
    }

    .section-heading {
        font-size: 1.5rem;
    }
}

/* Desktop Responsive (1024px and up) */
@media (min-width: 1024px) {
    .pf-achievements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .achievement-card {
        padding: 1.5rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .achievement-card {
        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
        border-color: rgba(255, 255, 255, 0.05);
    }

    .achievement-card:active {
        background: #1f2937;
    }

    .achievement-card.locked {
        background: linear-gradient(135deg, #1a1e2b 0%, #0f1119 100%);
    }

    .achievement-title {
        color: #f3f4f6;
    }

    .achievement-card.locked .achievement-title {
        color: #9ca3af;
    }

    .achievement-description {
        color: #9ca3af;
    }

    .progress-bar {
        background: rgba(255, 255, 255, 0.1);
    }

    .achievement-footer {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .achievement-category {
        background: rgba(255, 255, 255, 0.05);
        color: #9ca3af;
    }

    .filter-btn,
    .sort-btn {
        background: #1f2937;
        color: #e5e7eb;
    }

    .empty-state {
        background: #1f2937;
    }

    .empty-state h4 {
        color: #f3f4f6;
    }

    .empty-state p {
        color: #9ca3af;
    }
}

/* Mobile Small Screens (under 480px) */
@media (max-width: 480px) {
    .achievement-card {
        padding: 0.875rem;
        gap: 0.75rem;
    }

    .achievement-icon {
        width: 3rem;
        height: 3rem;
    }

    .achievement-icon i {
        font-size: 1.25rem;
    }

    .achievement-title {
        font-size: 0.9375rem;
    }

    .achievement-description {
        font-size: 0.75rem;
    }

    .achievement-points {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.5rem;
    }

    .achievements-header {
        padding: 1rem;
    }

    .header-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .header-icon i {
        font-size: 1.25rem;
    }

    .section-heading {
        font-size: 1.125rem;
    }

    .section-description {
        font-size: 0.75rem;
    }

    .stat-value {
        font-size: 1.8rem;
    }

    /* .stat-label {
        font-size: 0.625rem;
    } */

    .filter-btn,
    .sort-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .achievement-card,
    .achievement-card:active,
    .progress-fill,
    .progress-fill::after,
    .achievement-icon i,
    .filter-btn,
    .sort-btn,
    .share-btn {
        animation: none;
        transition: none;
    }

    .achievement-card:active {
        transform: none;
    }

    .achievements-header::before {
        animation: none;
    }

    .progress-fill::after {
        display: none;
    }
}

/* Accessibility - Focus States */
.filter-btn:focus-visible,
.sort-btn:focus-visible,
.share-btn:focus-visible,
.achievement-card:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .achievement-card {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #ddd;
        box-shadow: none;
    }

    .achievements-header {
        background: #f0f0f0;
        print-color-adjust: exact;
    }

    .share-btn,
    .achievements-filters {
        display: none;
    }
}

/*  */
/* Additional styles for the enhanced achievement card */
.achievement-actions {
    margin-top: 0.875rem;
}

/* Unlock hint */
.unlock-hint {
    margin-top: 0.875rem;
    padding: 0.625rem;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 0.75rem;
    font-size: 0.6875rem;
    color: #667eea;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-left: 2px solid #667eea;
}

.unlock-hint i {
    font-size: 0.75rem;
}

/* Milestone counter */
.milestone-counter {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.milestone-counter i {
    font-size: 0.625rem;
    color: #10b981;
}

/* Unlocked stats */
.unlocked-stats {
    margin-top: 0.5rem;
}

.unlocked-percent {
    font-size: 0.6875rem;
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(245, 158, 11, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
}

.unlocked-percent i {
    font-size: 0.625rem;
}

/* Footer info layout */
.footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
}

/* Points value */
.points-value {
    font-weight: 700;
}

/* Pulse animation for new unlocks */
@keyframes pulse-on-hover {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse-on-hover:hover {
    animation: pulse-on-hover 0.5s ease;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .unlock-hint {
        font-size: 0.625rem;
        padding: 0.5rem;
    }

    .milestone-counter {
        font-size: 0.625rem;
    }

    .unlocked-percent {
        font-size: 0.625rem;
        padding: 0.1875rem 0.5rem;
    }
}

/* Accessibility focus states */
.achievement-card:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    transform: scale(1.01);
}

.share-btn:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* Loading state for share button */
.share-btn.loading {
    position: relative;
    color: transparent;
}

.share-btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid #10b981;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/*  */
/* Edit Profile Button */
.edit-profile-btn {
    background: transparent;
    border: 2px solid #d4af37;
    color: #d4af37;
    transition: all 0.3s ease;
    padding:12px 32px;
    border-radius:40px;
    background:transparent;
    font-size:1.4rem;
    font-weight:600;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.edit-profile-btn:hover {
    background: #d4af37;
    color: white;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

.edit-profile-btn i {
    transition: transform 0.3s ease;
}

.edit-profile-btn:hover i {
    transform: rotate(10deg);
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .edit-profile-btn,
    .follow-btn,
    .unfollow-btn {
        padding: 10px 24px !important;
        font-size: 1.6rem !important;
    }

    .jackpot-count {
        font-size: 8px;
        padding: 1px 3px;
        margin-left: 4px;
    }
}


/*  */
/* Prediction Statistics Section */
.predictions-section {
    width: 100%;
    margin-bottom: 40px;
    background-color: #fff;
    padding:0;
}

/* Stats Grid - Flexbox layout */
/* Mobile-first styles */
.predictions-section .stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.predictions-section .stats-grid > * {
    flex: 1 1 250px; /* grow, shrink, basis */
    min-width: 0; /* prevents overflow */
}

.predictions-section .stat-card {
    background-color: #f8f8f8;
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: var(--container-border);
}

/* Icon styling */
.predictions-section .stat-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.predictions-section .stat-icon i {
    font-size: 1.5rem;
    color: white;
}

/* Content area */
.stat-content {
    flex: 1;
    min-width: 0; /* Prevents overflow issues */
}

.stat-main {
    margin-bottom: 0.875rem;
}

.stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.25rem;
    color: #1a202c;
}

.stat-label {
    font-size: 1.325rem !important;
    font-weight: 600;
    /* color: #64748b; */
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;

}

.stat-action-link {
    color: var(--secondary-color);
    font-size: 1.2rem !important;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem;
}

.stat-action-link:active {
    color: var(--secondary-color2);
}

/* Breakdown section */
.stat-breakdown {
    display: flex;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.breakdown-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.breakdown-label {
    font-size: 1.175rem !important;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.03em;
    color: #94a3b8;
}

.breakdown-value {
    font-size: 1.85rem !important;
    font-weight: 700;
    color: #1e293b;
}

.breakdown-value.unique {
    color: #3b82f6;
}

.breakdown-value.current,
.breakdown-value.active {
    color: #10b981;
}

/* Loading/skeleton state */
.stat-value .loading {
    display: inline-block;
    width: 2.5rem;
    height: 2rem;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.375rem;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 768px) {
    .stats-grid,
    .pf-achievements-grid {
        padding: 0.5rem !important;
    }
  }

/* ========== ENGAGEMENT SECTION ========== */

/* Mobile-first styles */
.engagement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    padding: 0.75rem;
}

.engagement-card {
    border: var(--container-border);
    border-radius: 1.125rem;
    padding: 1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Header section */
.engagement-header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.engagement-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.engagement-icon i {
    font-size: 1.25rem;
    color: white;
}

/* Icon variants */
.engagement-icon.likes {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

.engagement-icon.favorites {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
}

.engagement-icon.shares {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

.engagement-icon.comments {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.25);
}

/* Title area */
.engagement-title {
    flex: 1;
    min-width: 0;
}

.engagement-title h4 {
    font-size: 1.425rem !important;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.engagement-subtitle {
    font-size: 1.175rem;
    color: #64748b;
    line-height: 1.4;
    font-weight: 400;
}

/* Stats section */
.engagement-stats {
    display: flex;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 0.875rem;
    padding: 0;
    margin-top: 0.25rem;
}

.engagement-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.8rem 0.25rem;
    border-radius: 0.825rem;
    transition: background 0.2s ease;
    background: #F0F0F0;
}

.active-stat {
    background: rgba(16, 185, 129, 0.08);
}

.engagement-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.02em;
}

.engagement-value.active {
    color: #10b981;
    position: relative;
    display: inline-block;
}

.engagement-value.active::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -4px;
    right: -4px;
    bottom: -2px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 0.5rem;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.engagement-card:active .engagement-value.active::before {
    opacity: 1;
}

.engagement-label {
    font-size: 1.1rem;
    font-weight: 500;
    color: #64748b;
    text-transform: capitalize;
    letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .engagement-title h4,
  .achievement-title {
    font-size: 1.75rem;
  }

  .engagement-subtitle,
  .achievement-description {
     font-size: 1.175rem !important;
  }

  .engagement-value {
      font-size: 1.85rem !important;
   }

  .engagement-label {
      font-size: 1.15rem !important;
   }
}

/* Tablet and up - 2 column layout */
@media (min-width: 640px) {
    .engagement-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 1rem;
    }

    .engagement-card {
        padding: 1.125rem;
    }

    .engagement-icon {
        width: 3rem;
        height: 3rem;
    }

    .engagement-icon i {
        font-size: 1.375rem;
    }

    .engagement-title h4 {
        font-size: 1.125rem;
    }

    .engagement-subtitle {
        font-size: 1rem;
    }

    .engagement-value {
        font-size: 1.8rem;
    }

    .engagement-label {
        font-size: 1.15rem;
    }
}

/* Desktop - 4 column layout */
@media (min-width: 1024px) {
    .engagement-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }

    .engagement-card {
        padding: 1.25rem;
    }
}

/* Loading state animation */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.engagement-value.loading {
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.375rem;
    width: 3rem;
    height: 1.75rem;
    display: inline-block;
}

/* Optional: Add micro-interaction for stats */
.engagement-value {
    transition: transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.engagement-card:active .engagement-value {
    transform: scale(1.05);
}

/* Active indicator badge for active stats */
.engagement-stat.active-stat {
    position: relative;
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
    .engagement-grid {
        gap: 0.75rem;
        padding: 0.5rem;
    }

    .engagement-card {
        padding: 0.875rem;
    }

    .engagement-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .engagement-icon i {
        font-size: 1.125rem;
    }

    .engagement-title h4 {
        font-size: 0.9375rem;
    }

    .engagement-subtitle {
        font-size: 1.275rem;
    }

    .engagement-stats {
        gap: 0.5rem;
    }

    .engagement-value {
        font-size: 1.25rem;
    }

    .engagement-label {
        font-size: 0.825rem;
    }
}

/*  */
/* Header Skeleton Loader */
.profile-header-skeleton {
    background: white;
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
    animation: pulse 1.5s infinite;
}

.skeleton-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #e0e0e0;
    margin-bottom: 20px;
}

.skeleton-info {
    flex: 1;
}

.skeleton-name {
    height: 32px;
    width: 200px;
    background: #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
}

.skeleton-bio {
    height: 20px;
    width: 300px;
    background: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 20px;
}

.skeleton-stats {
    display: flex;
    gap: 40px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.skeleton-stat {
    height: 40px;
    width: 80px;
    background: #e0e0e0;
    border-radius: 8px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Optimize for mobile */
@media screen and (max-width: 768px) {
    .profile-header-skeleton {
        padding: 24px;
    }

    .skeleton-avatar {
        width: 100px;
        height: 100px;
    }

    .skeleton-name {
        width: 150px;
        height: 28px;
    }

    .skeleton-bio {
        width: 250px;
    }

    .skeleton-stats {
        gap: 20px;
    }
}

/*  */
/* Progress Bar Container */
.progress {
    display: flex;
    height: 1.5rem;
    overflow: hidden;
    background-color: #e9ecef;
    border-radius: 0.375rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

/* Progress Bars */
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    transition: width 0.6s ease;
    position: relative;
    height: 100%;
}

.progress-bar-yes {
    background-color: #28a745;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.progress-bar-no {
    background-color: #dc3545;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

/* Progress Bar Text */
.progress-bar span {
    position: relative;
    z-index: 1;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    padding: 0 0.5rem;
}

/* Animation for progress bars */
.progress-bar {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 1rem 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* Hover effects */
.progress-bar-yes:hover {
    background-color: #218838;
    filter: brightness(1.1);
}

.progress-bar-no:hover {
    background-color: #c82333;
    filter: brightness(1.1);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .progress {
        height: 1.2rem;
    }
}

/*  */
button, a.button {
  border-radius: 25px !important;
}

.buy-button {
  border-radius: 50px !important;
}

.load-more-comments {
  border:none;
  background-color: inherit;
  color: var(--primary-color2);
  font-size: 1.2rem;
}

.load-more-comments:hover {
   color: var(--primary-color);
}

/*  */
/* Base state - both hidden when not logged in */
.open-prediction-modal-desktop {
    display: none !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%) !important;
    color:#fff !important;
}

.open-prediction-modal-desktop:hover {
    opacity: 0.9;
    color:#fff !important;
}

/* When logged in, show mobile button only on mobile */
body.user-logged-in .open-prediction-modal-mobile {
    display: flex !important;
}

/* When logged in, show desktop button only on desktop */
@media (min-width: 768px) {
    body.user-logged-in .open-prediction-modal-desktop {
        display: flex !important;
    }
}

/*  */
/* Enhanced skeleton styles - Optimized for mobile */
.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    width: 100%;
}

.achievement-card.skeleton-card {
    display: flex;
    gap: 0.875rem;
    padding: 1rem;
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    animation: skeletonFadeIn 0.4s ease forwards;
    opacity: 0;
    transform: translateY(10px);
}

/* Staggered fade-in */
.achievement-card.skeleton-card {
    animation: skeletonFadeIn 0.4s ease forwards;
}

@keyframes skeletonFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icon wrapper */
.achievement-icon-wrapper {
    flex-shrink: 0;
}

/* Skeleton icon */
.skeleton-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(
        90deg,
        #e2e8f0 0%,
        #f1f5f9 50%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Content area */
.achievement-content {
    flex: 1;
    min-width: 0; /* Prevents overflow on mobile */
}

/* Skeleton title */
.skeleton-title {
    width: 70%;
    height: 1.125rem;
    background: linear-gradient(
        90deg,
        #e2e8f0 0%,
        #f1f5f9 50%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
    border-radius: 0.375rem;
    margin-bottom: 0.625rem;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Skeleton text lines */
.skeleton-text {
    width: 90%;
    height: 0.75rem;
    background: linear-gradient(
        90deg,
        #e2e8f0 0%,
        #f1f5f9 50%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-text:last-child {
    width: 80%;
    margin-bottom: 0;
}

/* Progress wrapper */
.skeleton-progress-wrapper {
    margin-top: 0.75rem;
}

/* Progress bar skeleton */
.skeleton-progress-bar {
    width: 100%;
    height: 0.5rem;
    background: linear-gradient(
        90deg,
        #e2e8f0 0%,
        #f1f5f9 50%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Progress text skeleton */
.skeleton-progress-text {
    width: 35%;
    height: 0.625rem;
    background: linear-gradient(
        90deg,
        #e2e8f0 0%,
        #f1f5f9 50%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
    border-radius: 0.25rem;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Shimmer animation */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Wave overlay effect for extra polish */
.achievement-card.skeleton-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transform: translateX(-100%);
    animation: wave 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes wave {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Tablet and up - Switch to grid layout */
@media (min-width: 640px) {
    .skeleton-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .achievement-card.skeleton-card {
        margin-bottom: 0;
    }
}

@media (min-width: 1024px) {
    .skeleton-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .achievement-card.skeleton-card {
        background: #1f2937;
        border-color: rgba(255, 255, 255, 0.05);
    }

    .skeleton-icon,
    .skeleton-title,
    .skeleton-text,
    .skeleton-progress-bar,
    .skeleton-progress-text {
        background: linear-gradient(
            90deg,
            #2d3748 0%,
            #374151 50%,
            #2d3748 100%
        );
        background-size: 200% 100%;
    }

    .achievement-card.skeleton-card::after {
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.05),
            transparent
        );
    }
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .skeleton-icon {
        width: 3rem;
        height: 3rem;
    }

    .skeleton-title {
        height: 1rem;
    }

    .skeleton-text {
        height: 0.6875rem;
    }

    .achievement-card.skeleton-card {
        padding: 0.875rem;
        gap: 0.75rem;
    }
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .skeleton-icon,
    .skeleton-title,
    .skeleton-text,
    .skeleton-progress-bar,
    .skeleton-progress-text,
    .achievement-card.skeleton-card::after {
        animation: none;
    }

    .achievement-card.skeleton-card {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .skeleton-icon,
    .skeleton-title,
    .skeleton-text,
    .skeleton-progress-bar,
    .skeleton-progress-text {
        background: #e2e8f0;
    }

    @media (prefers-color-scheme: dark) {
        .skeleton-icon,
        .skeleton-title,
        .skeleton-text,
        .skeleton-progress-bar,
        .skeleton-progress-text {
            background: #2d3748;
        }
    }
}

/* Loading spinner fallback (if needed) */
.loading-spinner {
    text-align: center;
    padding: 2rem;
}

.loading-spinner::after {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 2px solid #e2e8f0;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Optional: Add a subtle pulse effect on the entire skeleton container */
.skeleton-container.loading {
    position: relative;
}

.skeleton-container.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #667eea, transparent);
    animation: loadingBar 1s ease-in-out infinite;
}

@keyframes loadingBar {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}


/*  */
/* Mobile Search Modal - Clean and Spacious */
.mn-mobile-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 2000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mn-mobile-search-modal.active {
    transform: translateY(0);
}

/* Header */
.mn-mobile-search-modal-header {
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: 12px 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.mn-mobile-search-modal-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mn-mobile-search-back {
    background: none;
    border: none;
    font-size: 20px;
    color: #495057;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.2s;
}

.mn-mobile-search-back:active {
    background: #f8f9fa;
}

.mn-mobile-search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.mn-mobile-search-input-icon {
    position: absolute;
    left: 16px;
    color: #adb5bd;
    font-size: 16px;
    pointer-events: none;
}

.mn-mobile-search-modal-input {
    width: 100%;
    padding: 7px 40px 7px 44px;
    border: 1px solid #e9ecef;
    border-radius: 30px;
    font-size: 1.4rem;
    background: #f8f9fa;
    transition: all 0.2s;
}

.mn-mobile-search-modal-input:focus {
    outline: none;
    border-color: #b18819;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(177, 136, 25, 0.1);
}

.mn-mobile-search-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.mn-mobile-search-clear:active {
    background: #e9ecef;
}

.mn-mobile-search-cancel {
    background: none;
    border: none;
    color: #b18819;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 12px;
    white-space: nowrap;
}

/* Body */
.mn-mobile-search-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #fff;
}

/* Loading */
.mn-mobile-search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #6c757d;
}

/* Results */
.mn-mobile-search-results {
    animation: fadeIn 0.3s ease;
}

.mn-mobile-search-result-section {
    margin-bottom: 24px;
}

.mn-mobile-search-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.mn-mobile-search-result-item {
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: #212529;
}

.mn-mobile-search-result-item:active {
    background: #e9ecef;
    transform: scale(0.98);
}

.mn-mobile-search-result-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    font-size: 20px;
    flex-shrink: 0;
}

.mn-mobile-search-result-icon.prediction {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.mn-mobile-search-result-icon.user {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    overflow: hidden;
}

.mn-mobile-search-result-icon.user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mn-mobile-search-result-icon.topic {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

.mn-mobile-search-result-content {
    flex: 1;
    min-width: 0;
}

.mn-mobile-search-result-title {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mn-mobile-search-result-description {
    font-size: 13px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mn-mobile-search-result-meta {
    font-size: 12px;
    color: #adb5bd;
    margin-top: 4px;
}

.mn-mobile-search-result-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #e9ecef;
    border-radius: 12px;
    font-size: 10px;
    margin-left: 8px;
    white-space: nowrap;
}

/* Recent Searches */
.mn-mobile-search-recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mn-mobile-search-recent-header h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #495057;
}

.mn-mobile-search-clear-all {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}

.mn-mobile-search-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.mn-mobile-search-recent-item:active {
    background-color: #e9ecef;
}

.mn-mobile-search-recent-text {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #495057;
    flex: 1;
}

.mn-mobile-search-recent-text i {
    color: #adb5bd;
    width: 20px;
    font-size: 14px;
}

.mn-mobile-search-recent-remove {
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
}

.mn-mobile-search-recent-remove:active {
    background: #e9ecef;
    color: #dc3545;
}

/* Trending Searches */
.mn-mobile-search-trending {
    margin-top: 24px;
}

.mn-mobile-search-trending h6 {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 16px;
}

.mn-mobile-search-trending-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.mn-mobile-search-trending-item:active {
    background-color: #e9ecef;
}

.mn-mobile-search-trending-item i {
    width: 24px;
    color: #6c757d;
    font-size: 14px;
}

.mn-mobile-search-trending-item span {
    flex: 1;
    color: #495057;
}

/* No Results */
.mn-mobile-search-no-results {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.mn-mobile-search-no-results i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.mn-mobile-search-no-results p {
    margin: 8px 0;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========== USERS LIST ========== */

/* User Cards */
/* .user-card {
    background: #ffffff;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 100%;
    position: relative;
}

.user-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
} */

.user-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 100%;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.user-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 12px 24px rgba(0, 123, 255, 0.12);
}

.user-card .card-body {
    padding: 25px 20px;
}

/* Avatar Container */
.avatar-container {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.avatar-container img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.user-card:hover .avatar-container img {
    border-color: #d4af37;
}

.view-profile {
   cursor: pointer;
}

.verified-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: transparent;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.verified-badge i {
    font-size: 20px;
    color: #28a745;
}

/* User Info */
.user-card .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 5px;
}

.user-card .text-muted {
    font-size: 0.85rem;
    color: #6c757d !important;
    margin-bottom: 15px;
}

.pf-user-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* Stats Row */
.stats {
    background-color: #f8f9fa;
    border-radius: 15px;
    padding: 12px;
    margin: 15px 0;
}

.stats .stat-item {
    text-align: center;
    border-right: 1px solid #e9ecef;
}

.stats .stat-item:last-child {
    border-right: none;
}

.stats .stat-value {
    font-size: 1.8rem !important;
    font-weight: 800;
    color: #b18819;
    line-height: 1.2;
}

.stats .stat-label {
    font-size: 1rem !important;
    color: #6c757d;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.view-profile small {
   font-size: 1.075rem !important;
}

.view-profile .card-title {
  font-size: 1.4rem !important;
  font-weight:600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-profile p.text-muted {
   font-size: 0.75rem;
}

.view-profile .small {
   font-size: 1.2rem !important;
}

/* Action Buttons */
.user-card .btn-warning {
    background: linear-gradient(135deg, #b18819 0%, #d4af37 100%);
    border: none;
    color: #ffffff !important;
    font-weight: 600;
    padding: 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.user-card .btn-warning:hover {
    box-shadow: 0 5px 15px rgba(177, 136, 25, 0.3);
}

.user-card .btn-outline-warning {
    border: 2px solid #d4af37;
    color: #b18819;
    font-weight: 600;
    padding: 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.user-card .btn-outline-warning:hover {
    background: linear-gradient(135deg, #b18819 0%, #d4af37 100%);
    color: #ffffff !important;
    border-color: transparent;
}

/* Loading Indicator */
.loading-indicator {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.loading-indicator .spinner-border {
    width: 3rem;
    height: 3rem;
    color: #d4af37;
}

.loading-indicator p {
    margin-top: 15px;
    color: #6c757d;
    font-weight: 500;
}

/* No Results */
.no-results {
    background: #ffffff;
    border-radius: 20px;
    padding: 60px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.no-results i {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 20px;
}

.no-results h4 {
    color: #495057;
    margin-bottom: 10px;
    font-weight: 600;
}

.no-results p {
    color: #6c757d;
    font-size: 0.95rem;
}

/* Load More Button */
.load-more-container {
    text-align: center;
    margin-top: 30px;
}

.load-more-btn {
    background: linear-gradient(135deg, #b18819 0%, #d4af37 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.load-more-btn:hover {
    box-shadow: 0 10px 25px rgba(177, 136, 25, 0.3);
}

.load-more-btn:active {
    opacity: 0.9;
}

/*  */
/* Top Bettors Section Styles */

.top-bettor-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1a1a2e;
    position: relative;
    display: inline-block;
}

.top-bettor-section h3:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    /* background: linear-gradient(90deg, #007bff, #00d2ff); */
    border-radius: 3px;
}


/*  */
/* Top Bettors Section Styles */

.top-bettor-section .card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.top-bettor-section .card-header {
    padding: 1rem 1.5rem;
    border-bottom: none;
    position: relative;
}

.top-bettor-section .card-header h5 {
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0;
    color:#333;
    font-size: 1.6rem;
}

.top-bettor-section .card-header i {
    font-size: 1.2rem;
}

.top-bettor-section .card-body {
    padding: 2rem 1.5rem;
    background-color: #ffffff;
    position: relative;
    overflow: visible;
}

/* Scroll Container */
.top-bettors-list {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
    padding: 1rem 0;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Make sure cards have lower z-index */
.top-bettors-list > * {
    flex: 0 0 auto;
    width: 250px;
    position: relative;
    z-index: 1;
}

/* Custom Scrollbar */
.top-bettors-list::-webkit-scrollbar {
    height: 6px;
}

.top-bettors-list::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 3px;
}

.top-bettors-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.top-bettors-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Top Bettors Items */
.top-bettors {
    flex: 0 0 auto;
    width: 200px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

@media (min-width: 768px) {
    .top-bettors {
        width: 220px;
    }
}

@media (min-width: 1200px) {
    .top-bettors {
        width: 250px;
    }
}

.top-bettors .view-profile {
    background-color: #f8f8f8;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 15px !important;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-bettors .view-profile:hover {
    border-color: var(--primary-color);
}

/* Avatar Styling */
.top-bettors .position-relative {
    display: inline-block;
    margin-bottom: 0.5rem;
    position: relative;
}

.top-bettors img.rounded-circle {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.top-bettors .view-profile:hover img.rounded-circle {
    transform: scale(1.05);
}

/* Crown Icon Animation */
.top-bettors .position-absolute {
    animation: crownFloat 2s ease-in-out infinite;
}

@keyframes crownFloat {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-3px);
    }
}

.top-bettors .fa-crown {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    font-size: 1.8rem;
}

/* User Info Styling */
.top-bettors h6 {
    font-size: 1.35rem !important;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-align: center;
}

.top-bettors small.text-muted {
    font-size: 1.2rem !important;
    color: #7f8c8d;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-align: center;
}

/* Badge Styling */
.top-bettors .badge {
    padding: 0.4rem 0.8rem;
    font-size: 1rem !important;
    font-weight: 500;
    border-radius: 20px;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
    transition: all 0.3s ease;
    display: inline-block;
}

.top-bettors .view-profile:hover .badge {
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}

/* Follow Button Styling */
.top-bettors .btn-follow {
    margin-top: 0.75rem;
    padding: 0.3rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 20px;
    transition: all 0.3s ease;
    background: transparent;
    border: 1px solid #e1e8ed;
    color: #1da1f2;
    cursor: pointer;
    width: auto;
    min-width: 80px;
}

.top-bettors .btn-follow:hover {
    background: #1da1f2;
    color: white;
    border-color: #1da1f2;
    transform: translateY(-2px);
}

.top-bettors .btn-follow.following {
    background: #1da1f2;
    color: white;
    border-color: #1da1f2;
}

.top-bettors .btn-follow.following:hover {
    background: #e0245e;
    border-color: #e0245e;
}

.card-body {
    position: relative;
    padding: 1.25rem;
}

/* Navigation Arrows */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000 !important; /* Fixed high z-index */
    color: white !important;
    transition: all 0.3s ease;
    pointer-events: auto; /* Keep pointer-events auto by default */
}

.top-bettor-section:hover .scroll-arrow {
    opacity: 0.7;
    pointer-events: auto;
}

.scroll-arrow.left {
  left: 10px;
}

.scroll-arrow.right {
  right: 10px;
}

.scroll-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed !important;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(-50%) scale(0.95);
}

.scroll-arrow:not(.disabled):hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Ensure arrows are always on top */
  .scroll-arrow.left,
  .scroll-arrow.right {
      z-index: 1000 !important;
  }

.scroll-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.scroll-arrow i {
    font-size: 1.2rem;
    color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .top-bettor-section .card-body {
        padding: 1.5rem 1rem;
    }

    .top-bettors {
        width: 180px;
    }

    .top-bettors img.rounded-circle {
        width: 60px;
        height: 60px;
    }

    .top-bettors .fa-crown {
        font-size: 1.3rem;
    }

    .top-bettors h6 {
        font-size: 1.5rem;
    }

    .top-bettors small.text-muted {
        font-size: 1rem;
    }

    .top-bettors .badge {
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
    }

    .top-bettors .btn-follow {
        font-size: 0.7rem;
        padding: 0.25rem 0.8rem;
    }

    .top-bettors-list {
        gap: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .scroll-arrow {
        width: 30px;
        height: 30px;
    }

    .scroll-arrow i {
        font-size: 0.9rem;
    }

    .view-profile small {
      font-size: 1.2rem !important;
    }

    .view-profile .card-title {
      font-size: 1.5rem !important;
    }

    .view-profile p.text-muted {
       font-size: 0.8rem;
    }

    .view-profile .small {
       font-size: 1.35rem !important;
    }

    .view-profile .btn {
      font-size: 1.4rem !important;
    }
}

@media (max-width: 576px) {
    .top-bettors {
        width: 160px;
    }

    .top-bettors img.rounded-circle {
        width: 50px;
        height: 50px;
    }

    .top-bettors .view-profile {
        padding: 0.75rem;
    }

    .top-bettors-list::-webkit-scrollbar {
        height: 6px;
    }
}

/* Loading State */
.top-bettor-section.loading {
    position: relative;
    min-height: 200px;
}

.top-bettor-section.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #f6b93b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Empty State */
.top-bettors-list:empty::before {
    content: 'No bettors found';
    display: block;
    text-align: center;
    padding: 3rem;
    color: #95a5a6;
    font-size: 1rem;
    width: 100%;
}

/* Animation for New Entries */
.top-bettors {
    animation: fadeInUp 0.5s ease-out;
    animation-fill-mode: both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for each bettor */
.top-bettors:nth-child(1) { animation-delay: 0.05s; }
.top-bettors:nth-child(2) { animation-delay: 0.1s; }
.top-bettors:nth-child(3) { animation-delay: 0.15s; }
.top-bettors:nth-child(4) { animation-delay: 0.2s; }
.top-bettors:nth-child(5) { animation-delay: 0.25s; }
.top-bettors:nth-child(6) { animation-delay: 0.3s; }


/*  */
/* Filter Card Styles */
.flt-card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.flt-card-header {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: none;
}

.flt-header-icon {
    font-size: 1.2rem;
    animation: fltSpin 1s ease-in-out;
}

@keyframes fltSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.flt-header-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.5px;
}

.flt-card-body {
    padding: 0;
}

.flt-form {
    width: 100%;
}

.flt-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.flt-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.25rem 0.5rem 0 0.5rem;
}

.flt-form-group-search {
    grid-column: span 2;
}

@media (min-width: 1200px) {
    .flt-form-group-search {
        grid-column: span 1;
    }
}

.flt-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4a5568;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.flt-label-icon {
    font-size: 1rem;
    color: var(--primary-color);
}

.flt-search-wrapper {
    position: relative;
    width: 100%;
}

.flt-input {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-left: 2.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 50px !important;
    font-size: 1.25rem !important;
    transition: all 0.3s ease;
    background: white;
}

.flt-input-search {
    padding-left: 2.5rem;
}

.flt-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 0.9rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

.flt-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.flt-input:focus + .flt-search-icon {
    color: var(--primary-color);
}

.flt-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1.25rem;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

.flt-select:hover {
    border-color: var(--primary-color);
}

.flt-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.flt-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.flt-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.3px;
}

.flt-btn i {
    font-size: 0.9rem;
}

.flt-btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.flt-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.flt-btn-secondary {
    background-color: white;
    color: #4a5568;
    border: 2px solid #e2e8f0;
}

.flt-btn-secondary:hover {
    border-color: #cbd5e0;
    background-color: #f7fafc;
}

.users-grid {
   padding:5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* .flt-card-body {
        padding: 1.25rem;
    } */

    .flt-form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .flt-form-group-search {
        grid-column: span 1;
    }

    .flt-actions {
        justify-content: stretch;
    }

    .flt-btn {
        flex: 1;
        justify-content: center;
        padding: 0.7rem 1rem;
        font-size: 1.3rem;
    }

    .flt-label {
        font-size: 1.3rem;
    }

    .flt-input, .flt-select {
        padding: 0.65rem 0.875rem;
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .flt-card-header {
        padding: 0.875rem 1.25rem;
    }

    .flt-header-title {
        font-size: 1.55rem;
    }

    .flt-label {
        font-size: 1.2rem;
    }

    .flt-input, .flt-select {
        padding: 0.65rem 0.875rem;
        font-size: 1.2rem;
    }

    .flt-input-search {
        padding-left: 2.25rem;
    }
}

/* Animation for form groups */
.flt-form-group {
    animation: fltSlideIn 0.4s ease-out;
    animation-fill-mode: both;
}

@keyframes fltSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flt-form-group:nth-child(1) { animation-delay: 0.05s; }
.flt-form-group:nth-child(2) { animation-delay: 0.1s; }
.flt-form-group:nth-child(3) { animation-delay: 0.15s; }
.flt-form-group:nth-child(4) { animation-delay: 0.2s; }
.flt-form-group:nth-child(5) { animation-delay: 0.25s; }

/* Hover effects */
.flt-form-group:hover .flt-label {
    color: #667eea;
}

.flt-form-group:hover .flt-label-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Active/Selected state for filters */
.flt-select option:checked {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Loading state for buttons */
.flt-btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.flt-btn.loading i {
    animation: fltPulse 1s ease-in-out infinite;
}

@keyframes fltPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Tooltip styles (optional) */
.flt-form-group {
    position: relative;
}

/* Optional: Add ranking numbers for top bettors */
.ranking-number {
    position: absolute;
    top: -8px;
    left: -8px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #856404;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-card {
    animation: fadeInUp 0.5s ease;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .users-header h1 {
        font-size: 2.5rem;
    }

    .stats-card h3 {
        font-size: 1.8rem;
    }
}

@media (max-width: 992px) {
    .users-header {
        padding: 40px 0 30px;
    }

    .users-header h1 {
        font-size: 2rem;
    }

    .stats-card .card-body {
        padding: 20px;
    }

    .stats-card i {
        font-size: 2rem;
    }

    .stats-card h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .users-header h1 {
        font-size: 1.8rem;
    }

    .users-header .lead {
        font-size: 1rem;
    }

    .filter-card .card-body {
        padding: 20px;
    }

    .user-card .card-body {
        padding: 20px;
    }

    .avatar-container img {
        width: 90px;
        height: 90px;
    }

    .stat-value {
        font-size: 2.2rem !important;
    }

    .user-card .btn-warning,
    .user-card .btn-outline-warning,
    .usr-follow-btn {
        font-size: 1.5rem;
        padding: 6px;
    }

    .sh-meta-value-wrapper {
      text-align: center !important;
      margin: 0 auto !important;
      justify-content: center !important;
    }
}

@media (max-width: 576px) {
    .stats-card h3 {
        font-size: 1.2rem;
    }

    .stats-card i {
        font-size: 1.5rem;
    }

    .stats-card p {
        font-size: 0.75rem;
    }

    .filter-card .btn-warning,
    .filter-card .btn-outline-secondary {
        width: 100%;
        margin-bottom: 10px;
    }

    .user-card .btn-warning,
    .user-card .btn-outline-warning,
    .usr-follow-btn {
        font-size: 0.75rem;
        padding: 6px;
    }

    .top-bettor-name {
        font-size: 0.9rem;
    }

    .stat-label {
        font-size: 0.6rem;
    }
}

/* Loading Skeleton */
.skeleton-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 25px;
    height: 100%;
}

.skeleton-avatar {
    width: 110px;
    height: 110px;
    background: linear-gradient(90deg, #e9ecef 0%, #f8f9fa 50%, #e9ecef 100%);
    border-radius: 50%;
    margin: 0 auto 15px;
    animation: shimmer-bettor 1.5s infinite;
}

.skeleton-title {
    height: 20px;
    background: linear-gradient(90deg, #e9ecef 0%, #f8f9fa 50%, #e9ecef 100%);
    border-radius: 10px;
    margin: 10px auto;
    width: 80%;
    animation: shimmer-bettor 1.5s infinite;
}

.skeleton-text {
    height: 15px;
    background: linear-gradient(90deg, #e9ecef 0%, #f8f9fa 50%, #e9ecef 100%);
    border-radius: 8px;
    margin: 8px auto;
    width: 60%;
    animation: shimmer-bettor 1.5s infinite;
}

@keyframes shimmer-bettor {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: 200px 0;
    }
}


/*  */
.sh-meta-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
}

.sh-meta-content {
  width: 100%;
}

.sh-meta-value-wrapper {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sh-meta-value {
  font-size: 1.35rem;
  font-weight: 500;
  color: #f8f8f8;
}

.sh-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 9999px;
  background-color: #f1f5f9;
  color: #475569;
}

/* Status-specific badge colors */
.sh-badge-past {
  background-color: #fef9c3;
  color: #854d0e;
}

.sh-badge-upcoming {
  background-color: #dcfce7;
  color: #166534;
}

.sh-badge-live {
  background-color: #fee2e2;
  color: #991b1b;
}


/*  */
/* Add to your CSS file to prevent flickering */
.adv-stats-grid,
.adv-progress-details {
    transition: opacity 0.15s ease-in-out;
}

.adv-stat-card {
    transition: all 0.2s ease;
}

.adv-progress-fill-large {
    transition: width 0.3s ease-out;
}

.adv-period-btn {
    transition: all 0.2s ease;
    position: relative;
}

.adv-period-btn i.fa-spinner {
    margin-right: 5px;
}

/* Ensure modal content doesn't shift during updates */
.mdl-modal-body {
    will-change: opacity;
}

/* Smooth content updates */
.adv-stats-grid {
    min-height: 120px;
}

.adv-progress-details {
    min-height: 90px;
}


/*  */
/* Only hide notifications and messages dropdowns/buttons when user is not logged in */
body:not(.user-logged-in) .mn-notifications-dropdown,
body:not(.user-logged-in) .mn-messages-dropdown,
body:not(.user-logged-in) #mnNotificationsBtn,
body:not(.user-logged-in) #mnMessagesBtn {
    display: none !important;
}

/* Keep user menu visible always */
.mn-user-menu {
    display: block !important;
}

/* Ensure badges are properly styled */
.mn-quick-btn {
    position: relative !important;
}

.mn-badge {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    background-color: #dc3545 !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    z-index: 9999 !important;
}

.loading-state {
  text-align: center;
}


/*  */
/* Enhanced Empty State Styles */
.predictions-empty-state,
.achievements-empty-state,
.pf-error-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 16px;
    margin: 20px 0;
    animation: fadeIn 0.5s ease;
}

.predictions-empty-state .empty-icon,
.achievements-empty-state .empty-icon,
.pf-error-state .error-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

.predictions-empty-state .empty-icon {
    color: #d4af37;
}

.achievements-empty-state .empty-icon {
    color: #d4af37;
}

.pf-error-state .error-icon {
    color: #dc3545;
}

.predictions-empty-state h3,
.achievements-empty-state h3,
.pf-error-state h3 {
    color: #333;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 600;
}

.predictions-empty-state p,
.achievements-empty-state p,
.pf-error-state p {
    color: #666;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.5;
}

.btn-create-prediction,
.btn-retry {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-retry {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%);
}

.btn-create-prediction:hover,
.btn-retry:hover {
    opacity: 0.9;
}

.btn-create-prediction i,
.btn-retry i {
    margin-right: 8px;
}

/* Achievements Empty State */
.achievements-empty-state {
    margin: 20px;
}

/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Empty States */
@media (max-width: 768px) {
    .predictions-empty-state,
    .achievements-empty-state,
    .pf-error-state {
        padding: 40px 16px;
        margin: 16px;
    }

    .predictions-empty-state .empty-icon,
    .achievements-empty-state .empty-icon,
    .pf-error-state .error-icon {
        font-size: 48px;
    }

    .predictions-empty-state h3,
    .achievements-empty-state h3,
    .pf-error-state h3 {
        font-size: 20px;
    }

    .predictions-empty-state p,
    .achievements-empty-state p,
    .pf-error-state p {
        font-size: 14px;
    }

    .btn-create-prediction,
    .btn-retry {
        padding: 10px 24px;
        font-size: 14px;
    }
}


/* ===== SPINNER ===== */

.loading {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
}

.spinner {
    width:32px;
    height:32px;
    border: 4px solid #e5e7eb;
    border-top:4px solid var(--primary-color2);
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/*  */
.filter-tabs,
.search-container {
  padding: 1.5rem !important
}


/*  */
/* Loading State */
.state-container {
    text-align: center;
    padding: 0 20px;
}

.loading-state .spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #6c757d;
    font-size: 0.9rem;
}

/* Empty State */
.empty-state .state-icon,
.pl-sidebar-error .state-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.6;
}

.empty-state .state-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
}

.empty-state .state-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    margin-bottom: 20px;
}

/* Error States - Different colors for different error types */
.empty-state.error .state-icon { color: #dc3545; }
.empty-state.network .state-icon { color: #ffc107; }
.empty-state.timeout .state-icon { color: #fd7e14; }
.empty-state.server_error .state-icon { color: #dc3545; }
.empty-state.unauthorized .state-icon { color: #fd7e14; }
.empty-state.forbidden .state-icon { color: #dc3545; }
.empty-state.not_found .state-icon { color: #6c757d; }
.empty-state.api_down .state-icon { color: #dc3545; }

/* Retry Button */
.retry-btn {
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color2) 100%) !important;
    color: white !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
}

.retry-btn:hover {
    opacity: 0.9;
}

/* User Card Styles (keep existing) */
.sideboard-user-card {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 0;
    background: #fff;
    border-radius: 8px;
    transition: all 0.2s;
    gap: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.sideboard-user-card:hover {
    background: var(--card-bg-hover);
}

.sideboard-rank {
    /* width: 35px; */
    font-weight: bold;
    font-size: 0.9rem;
    color: #6c757d;
}

.sideboard-rank.rank-1 { color: #ffd700; font-size: 1.1rem; }
.sideboard-rank.rank-2 { color: #c0c0c0; font-size: 1.1rem; }
.sideboard-rank.rank-3 { color: #cd7f32; font-size: 1.1rem; }

.prd-user-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sideboard-user-info {
    flex: 1;
    min-width: 0;
    margin-left:5px;
}

.sideboard-username {
    font-weight: 500;
    font-size: 1.25rem;
    color: #212529;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sideboard-stats {
    display: flex;
    gap: 10px;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.sideboard-accuracy {
    color: #28a745;
    font-weight: 500;
}

.sideboard-correct {
    color: #6c757d;
}

.sideboard-badges {
    display: flex;
    gap: 4px;
}

.sideboard-badge {
    font-size: 1.2rem;
    cursor: help;
    justify-content: center;
    align-content: center;
    line-height: 1.8rem;
    padding:2px;
    border-radius: 4px;
}

.sideboard-score {
    text-align: right;
    min-width: 45px;
}

.sideboard-score-value {
    font-weight: bold;
    font-size: 1.2rem;
    color: #007bff;
}

.sideboard-score-label {
    font-size: 0.95rem;
    color: #6c757d;
}

/* Level-based styles */
.level-legend {
    background: linear-gradient(135deg, #fff5e6, #fff);
    border-left: 3px solid #ffd700;
}

.level-expert {
    border-left: 3px solid #c0c0c0;
}

.level-advanced {
    border-left: 3px solid #cd7f32;
}


/*  */
/* Login button in search area */
.login-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 400px;
    height: 40px;
    background: linear-gradient(135deg, #b18819 0%, #8a6b12 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    margin: 0 20px;
}

.login-search-btn:hover {
    background: linear-gradient(135deg, #c99a2a 0%, #9e7a1a 100%);
    color: white !important;
    text-decoration: none;
}

.login-search-btn i {
    font-size: 16px;
}

/* Hide search container for non-logged-in users */
body:not(.user-logged-in) .mn-search-container .mn-search {
    display: none;
}

body:not(.user-logged-in) .mn-search-container {
    display: flex;
    justify-content: center;
}

/* Mobile version */
@media (max-width: 768px) {
    .login-search-btn {
        max-width: 200px;
        height: 36px;
        font-size: 12px;
        margin: 0 10px;
    }
}

/*  */
.br {
  border-radius: var(--container-border-radius) !important;
}

/*  */
/* Mobile badges - force visibility */
#mobileNotificationCount,
#mobileMessageCount,
#mnMobileNotificationCount,
#mnMobileMessageCount {
    display: none;
}

/* Desktop badges */
.mn-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 100;
    padding: 0 4px;
}

/* Parent buttons need position relative */
.mn-quick-btn,
#mnNotificationsBtn,
#mnMessagesBtn,
.mn-mobile-icon-btn {
    position: relative;
}


/* ----- PROFESSIONAL BUTTON STYLES (core design) ----- */
.btn-follow {
    /* Primary color palette applied to follow button */
    --btn-bg: var(--primary-color, #d4af37);
    --btn-bg-hover: var(--primary-color2, #b18819);
    --btn-text: #1e272e;
    --btn-border: transparent;
    --btn-shadow: 0 4px 8px rgba(0,0,0,0.05);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    padding: 0.75rem 1.8rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    box-shadow: var(--btn-shadow);
    letter-spacing: -0.01em;
    backdrop-filter: blur(0px);
    line-height: 1.2;
}

.btn-follow i, .btn-following i {
    font-style: normal;
    font-weight: 500;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
}

/* follow icon (plus) */
.btn-follow .btn-icon {
    font-size: 1.25rem;
    font-weight: 500;
    transition: transform 0.2s;
}

.btn-follow:hover {
    background: var(--btn-bg-hover);
    transform: scale(1.02);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.btn-follow:active {
    transform: scale(0.98);
}

/* ----- FOLLOWING BUTTON (secondary color scheme with elegant active state) ----- */
.btn-following {
    --btn-bg-sec: var(--secondary-color, #00a86b);
    --btn-bg-sec-hover: var(--secondary-color2, #008553);
    --btn-text-sec: white;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--btn-bg-sec);
    color: var(--btn-text-sec);
    border: none;
    padding: 0.75rem 1.8rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    letter-spacing: -0.01em;
}

.btn-following .btn-icon {
    font-size: 1.2rem;
    font-weight: 500;
    transition: transform 0.2s;
}

.btn-following:hover {
    background: var(--btn-bg-sec-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0,168,107,0.3);
}

.btn-following:active {
    transform: scale(0.97);
}


/*  */
/* Messages Page Styles */
.mb-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px 32px;
    margin-bottom: 24px;
    color: white;
}

.mb-header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.mb-header__title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mb-header__title i {
    font-size: 28px;
}

.mb-header__stats {
    display: flex;
    gap: 12px;
}

.mb-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.mb-badge--total {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.mb-badge--unread {
    background: #fbbf24;
    color: #78350f;
}

/* Container */
.mb-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Filters */
.mb-filters {
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
}

.mb-filters__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #f9fafb;
    cursor: pointer;
}

.mb-filters__title {
    font-weight: 600;
    color: #374151;
}

.mb-filters__toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    transition: transform 0.3s;
}

.mb-filters__toggle--active {
    transform: rotate(180deg);
}

.mb-filters__body {
    padding: 5px;
    display: block;
    border-top: 1px solid #e5e7eb;
    background-color: wheat;
}

.mb-filters__body--hidden {
    display: none;
}

/* Filter Groups */
.mb-filter-group {
    margin-bottom: 0px;
    padding: 4px;
}

.mb-filter-group:last-child {
    margin-bottom: 0;
}

.mb-filter-group__label {
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 0;
}

.mb-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content:space-between;
}

.mb-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #f3f4f6;
    border: none;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
}

.mb-chip:hover {
    background-color: #e5e7eb;
}

.mb-chip--active {
    background-color: #b18819;
    color: white;
}

.mb-chip--active i {
    color: white;
}

/* Search */
.mb-search {
    position: relative;
}

.mb-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
}

.mb-search__input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.2s;
}

.mb-search__input:focus {
    outline: none;
    border-color: #b18819;
    box-shadow: 0 0 0 3px rgba(177, 136, 25, 0.1);
}

.mb-search__clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
}

/* Messages Grid */
.mb-messages {
    padding: 4px;
    margin-top: 10px;
}

.mb-messages-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Message Card */
.mb-message-card {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    position: relative;
}

.mb-message-card:hover {
    border-color: #b18819;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mb-message-card__type-label {
    text-transform: capitalize;
}

.mb-message-card--unread {
    background-color: #fefce8;
    border-left: 4px solid #b18819;
}

.mb-message-card--important {
    background-color: linear-gradient(135deg, #fff9e6 0%, white 100%);
}

.mb-message-card__type-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.mb-message-card__type-indicator--announcement {
    background: #b18819;
}

.mb-message-card__type-indicator--tip {
    background: #10b981;
}

.mb-message-card__type-indicator--alert {
    background: #ef4444;
}

.mb-message-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.mb-message-card__title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.mb-meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  font-size: 1.2rem;
  color: #6b7280;
}

.mb-message-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fef3c7;
    color: #d97706;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
}

.mb-message-card__content {
    font-size: 1.4rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mb-message-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #9ca3af;
}

/* Loading State */
.mb-loading {
    text-align: center;
    padding: 60px 20px;
}

.mb-loading__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #b18819;
    border-radius: 50%;
    animation: mb-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes mb-spin {
    to { transform: rotate(360deg); }
}

/* Empty State */
.mb-empty {
    text-align: center;
    padding: 60px 20px;
}

.mb-empty__icon {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.mb-empty__title {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.mb-empty__text {
    color: #6b7280;
}

/* Modal */
.mb-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}

.mb-modal--active {
    visibility: visible;
    opacity: 1;
}

.mb-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.mb-modal__content {
    position: relative;
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
}

.mb-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.mb-modal__header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.mb-modal__close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
}

.mb-modal__close:hover {
    color: #374151;
}

.mb-modal__body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(80vh - 140px);
}

.mb-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 16px;
}

.mb-modal__badge--announcement {
    background: #fef3c7;
    color: #d97706;
}

.mb-modal__badge--tip {
    background: #d1fae5;
    color: #059669;
}

.mb-modal__badge--alert {
    background: #fee2e2;
    color: #dc2626;
}

.mb-modal__title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
}

.mb-modal__content {
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 20px;
}

.mb-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.mb-modal__footer .mb-btn {
   padding: 5px 20px;
}

.mb-btn--secondary {
    background-color: #f3f4f6;
    color: #4b5563;
}

.mb-btn--secondary:hover {
    background-color: #e5e7eb;
}

/* Scrollbar */
.mb-messages::-webkit-scrollbar {
    width: 6px;
}

.mb-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mb-messages::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

/* Responsive */
@media (max-width: 768px) {
    .mb-header__content {
        flex-direction: column;
        align-items: flex-start;
    }

    .mb-message-card__header {
        flex-direction: column;
    }
}

/*  */
/* Message Detail Styles */
.message-detail-card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Type-specific header gradients */
.message-header--announcement {
    background: linear-gradient(135deg, #b18819 0%, #d4a11e 100%);
}

.message-header--alert {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

.message-header--security {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
}

.message-header--billing {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.message-header--promotion {
    background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
}

.message-header--reminder {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
}

.message-header--info {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

.message-header--feedback {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
}

.message-header {
    padding: 32px;
    color: white;
}

.message-header__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.message-header__title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

.message-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    opacity: 0.9;
}

.message-header__meta i {
    margin-right: 6px;
}

/* Message Body */
.message-body {
    padding: 32px;
}

.message-body__content {
    font-size: 16px;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 24px;
}

.message-body__content p {
    margin-bottom: 16px;
}

/* Action Buttons */
.message-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.btn-action {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: none;
}

.btn-action--primary {
    background-color: #b18819;
    color: white;
}

.btn-action--primary:hover {
    background-color: #8a6b12;
}

.btn-action--secondary {
    background-color: #f3f4f6;
    color: #4b5563;
}

.btn-action--secondary:hover {
    background-color: #e5e7eb;
}

.btn-action--danger {
    background-color: #fee2e2;
    color: #dc2626;
}

.btn-action--danger:hover {
    background-color: #fecaca;
}

/* Expiry Warning */
.expiry-warning {
    background-color: #fef3c7;
    border-left: 4px solid #fbbf24;
    padding: 16px;
    border-radius: 12px;
    margin-top: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.expiry-warning i {
    color: #d97706;
    font-size: 20px;
}

/* Loader */
.message-detail-loader {
    text-align: center;
    padding: 60px;
}

/* Responsive */
@media (max-width: 768px) {
    .message-header {
        padding: 24px;
    }

    .message-header__title {
        font-size: 22px;
    }

    .message-body {
        padding: 24px;
    }

    .message-actions {
        flex-direction: column;
    }

    .btn-action {
        justify-content: center;
    }
}

/*  */
.date-range {
    font-size: 14px;
    color: #F0F0F0;
    margin-top: 5px;
}

.date-separator {
    margin: 0 8px;
    font-weight: normal;
}

.date-from, .date-to {
    font-weight: 500;
}

/*  */
.tp-tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
}

.tp-tag {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  padding: 10px 20px;
  border-radius: 50px; /* Gives that sleek pill/tag look */
  font-size: 1.35rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Hover State */
.tp-tag:hover {
  background-color: #e5e7eb;
  border-color: #d1d5db;
}

/* Active/Selected State (Using a vibrant betting-friendly blue, feel free to change to your brand color) */
.tp-tag.active {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.mr-2 {
  margin-right: 2px !important;
}

.user-card-footer {
  border-top: 1px solid #e9ecef;
  padding: 12px;
}

/*  */
.user-card-footer .text-muted {
   font-size: 1.15rem;
}

.user-card-footer .fw-bold {
   font-size: 1.2rem;
}

/*  */
.sbe-sidebar-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.6rem;
    /* font-weight: 600; */
    color: #333;
    letter-spacing: 0.5px;

    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    /* letter-spacing: 2px !important; */
}

.sbe-sidebar-header-content i {
    font-size: 1.2rem;
    animation: fltSpin 1s ease-in-out;
}

.sbe-refresh-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color:#65676b;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sbe-refresh-btn:hover {
    background: #f8f9fa;
    color: var(--primary-color2);
    transform: rotate(180deg);
}

/* Bettors List Container */
.sbe-bettors-list {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom Scrollbar */
.sbe-bettors-list::-webkit-scrollbar {
    width: 4px;
}

.sbe-bettors-list::-webkit-scrollbar-track {
    background: transparent;
}

.sbe-bettors-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.sbe-bettors-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Bettor Item */
.sbe-bettor-item {
    display: flex;
    flex-direction: column;
    padding: 12px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.2s ease;
    gap: 8px;
}

.sbe-bettor-item:hover {
    /* background-color: #f8f9fa; */
    background: rgba(255, 255, 255, 0.05);
}

/* Top row: Avatar on left, text on right */
.sbe-bettor-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.sbe-bettor-item:last-child {
    border-bottom: none;
}

/* Avatar Section */
.sbe-bettor-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.sbe-bettor-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.sbe-bettor-item:hover .sbe-bettor-avatar {
    border-color: #c5c7cc;
}

/* Live/Active Indicator */
.sbe-live-indicator {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #9e9e9e;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sbe-live-indicator.sbe-active {
    background: #4caf50;
    animation: sbe-pulse 2s infinite;
}

@keyframes sbe-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* Rank Badge */
.sbe-rank-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #333;
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sbe-rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #fff;
    font-size: 10px;
}

.sbe-rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
    color: #fff;
}

.sbe-rank-3 {
    background: linear-gradient(135deg, #CD7F32, #B87333);
    color: #fff;
}

.sbe-rank-other {
    background: #444;
    color: #aaa;
}

/* Live indicator */
.sbe-live-indicator {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00ff88;
    border: 2px solid #1a1a2e;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* User info - stacked vertically */
.sbe-bettor-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

/* Name section - inline items */
.sbe-bettor-name-section {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.sbe-bettor-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sbe-verified-icon {
    color: #1DA1F2;
    font-size: 14px;
}

.sbe-badge-icon {
    color: #FFD700;
    font-size: 14px;
}

.sbe-hot-streak {
    font-size: 11px;
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.15);
    padding: 1px 8px;
    border-radius: 12px;
    font-weight: 600;
}

/* Meta info */
.sbe-bettor-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #888;
}

.sbe-bettor-username {
    color: #888;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sbe-bettor-followers {
    color: #888;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sbe-bettor-followers i {
    font-size: 11px;
    color: #9e9e9e;
}

/* Follow button wrapper - full width, below everything */
.sbe-follow-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 60px; /* Align with text (avatar width + gap) */
    margin-top: 2px;
}

/* Badges */
.sbe-verified-icon {
    color: #1da1f2;
    font-size: 14px;
    flex-shrink: 0;
}

.sbe-badge-icon {
    color: #ff6b35;
    font-size: 14px;
    flex-shrink: 0;
}

/* Stats Row */
.sbe-bettor-stats {
    font-size: 10px;
    color: #999;
    display: flex;
    gap: 8px;
}

.sbe-stat {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: 11px;
}

.sbe-stat-value {
    font-weight: 600;
    color: #1a1a1a;
}

.sbe-stat-label {
    color: #8a8b91;
}

.sbe-stat-value.sbe-high-win-rate {
    color: #fe2c55;
}

/* Hot Streak Indicator */
.sbe-hot-streak {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 12px;
    line-height: 18px;
    flex-shrink: 0;
    animation: sbe-hot-pulse 1.5s infinite;
}

@keyframes sbe-hot-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Meta Info (Username + Followers) */
.sbe-bettor-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #6c757d;
}

.sbe-hot-streak i {
    font-size: 8px;
}

/* Follow Button */
.sbe-follow-btn,
.be-follow-btn,
.follow-btn {
    /* flex-shrink: 0; */
    padding: 6px 16px !important;
    border: none;
    border-radius: 20px;
    background-color: #191612 !important;
    color: #d4cdc0 !important;
    border: 1px solid #3a352e !important;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.unfollow-btn {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.sbe-follow-btn i,
.be-follow-btn i {
    font-size: 12px;
}

.sbe-follow-btn:hover:not(:disabled),
.be-follow-btn:hover:not(:disabled),
.follow-btn:hover {
    background-color: #3a352e !important;
    color: #f0ece6 !important;
    border-color: #5a4f3e !important;

}

.sbe-follow-btn.sbe-following,
.be-follow-btn.be-following,
.unfollow-btn,
.follow-btn.following {
    background-color: #fff !important;
    color: #191612 !important;
    border:1px solid #D3D3D3 !important;
    box-shadow: none;
    padding: 6px 16px !important;
    font-size:1.3rem;
}

.sbe-follow-btn.sbe-following:hover:not(:disabled),
.be-follow-btn.be-following:hover:not(:disabled),
.unfollow-btn:hover:not(:disabled),
.sbe-follow-btn.sbe-following:hover,
.be-follow-btn.be-following:hover {
    background-color: #E5E4E2 !important;
    color: #191612 !important;
    border-color: #C0C0C0 !important;
}

/* Self button (You) */
.sbe-follow-btn.sbe-self-btn,
.be-follow-btn.be-self-btn {
    background: #f0f2f5;
    color: #6c757d;
    box-shadow: none;
    cursor: default;
}

.sbe-follow-btn:not(.sbe-following),
.be-follow-btn:not(.be-following),
.follow-btn:not(.following) {
    background: transparent;
    color: #fe2c55;
    border-color: #fe2c55;
}

.sbe-follow-btn:not(.sbe-following):hover,
.be-follow-btn:not(.be-following):hover,
.follow-btn:not(.following):hover {
    background: #fe2c55;
    color: white;
}

.sbe-follow-btn:disabled,
.be-follow-btn:disabled,
.follow-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Sidebar Footer */
.sbe-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.sbe-view-all-link {
    color: #fe2c55;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.sbe-view-all-link:hover {
    gap: 8px;
    color: #e01e45;
}

/* Loading State */
.sbe-loading-skeleton {
    padding: 20px;
}

.sbe-skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.sbe-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: tbe-loading 1.5s infinite;
}

.sbe-skeleton-text {
    flex: 1;
}

.sbe-skeleton-name {
    height: 14px;
    width: 120px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: tbe-loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.sbe-skeleton-stats {
    height: 10px;
    width: 80px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: tbe-loading 1.5s infinite;
    border-radius: 4px;
}

.sbe-skeleton-button {
    width: 60px;
    height: 28px;
    border-radius: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: tbe-loading 1.5s infinite;
}

@keyframes tbe-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Empty State */
.sbe-empty-state {
    text-align: center;
    padding: 40px 20px;
}

.sbe-empty-state i {
    font-size: 48px;
    color: #d0d0d0;
    margin-bottom: 12px;
}

.sbe-empty-state p {
    color: #8a8b91;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Error State */
.sbe-error-state {
    text-align: center;
    padding: 40px 20px;
}

.sbe-error-state i {
    font-size: 48px;
    color: #fe2c55;
    margin-bottom: 12px;
}

.sbe-error-state p {
    color: #8a8b91;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .tp-tag {
      font-size: 1.35rem;
    }

    .sbe-bettor-avatar {
        width: 40px;
        height: 40px;
    }

    .sbe-bettor-name {
        font-size: 1.55rem;
    }

    .sbe-bettor-username {
      font-size: 1.3rem;
    }

    .sbe-follow-btn {
        padding: 6px 14px;
        border: none;
        border-radius: 20px;
        background-color: #191612 !important;
        color: #d4cdc0 !important;
        border: 1px solid #3a352e !important;
        font-size: 1.4rem !important;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s ease;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .sbe-stat {
        font-size: 1.2rem;
    }

    /*  */
    .sbe-bettor-item {
        padding: 10px 2px;
        gap: 10px;
    }

    .sbe-bettor-avatar-wrapper {
        width: 40px;
        height: 40px;
    }

    .sbe-bettor-avatar {
        width: 40px;
        height: 40px;
    }

    .sbe-rank-badge {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .sbe-bettor-item {
        padding: 8px 2px;
        gap: 8px;
        min-height: 56px;
    }

    .sbe-bettor-avatar-wrapper {
        width: 36px;
        height: 36px;
    }

    .sbe-bettor-avatar {
        width: 36px;
        height: 36px;
    }

    .sbe-bettor-meta {
        font-size: 10px;
        gap: 8px;
    }

    .sbe-bettor-followers {
        font-size: 10px;
    }

    .sbe-rank-badge {
        width: 16px;
        height: 16px;
        font-size: 8px;
        bottom: -1px;
        right: -1px;
    }

    .sbe-verified-icon,
    .sbe-badge-icon {
        font-size: 11px;
    }

    .sbe-hot-streak {
        font-size: 9px;
        padding: 0 6px;
        line-height: 16px;
    }

    .sbe-live-indicator {
        width: 10px;
        height: 10px;
    }
}

/* ===== Loading Skeleton ===== */
.sbe-loading-skeleton {
    padding: 10px;
}

.sbe-skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f2f5;
}

.sbe-skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f0f2f5 25%, #e4e7eb 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: sbe-skeleton-loading 1.5s infinite;
    flex-shrink: 0;
}

.sbe-skeleton-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sbe-skeleton-name {
    width: 60%;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f2f5 25%, #e4e7eb 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: sbe-skeleton-loading 1.5s infinite;
}

.sbe-skeleton-stats {
    width: 40%;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f2f5 25%, #e4e7eb 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: sbe-skeleton-loading 1.5s infinite;
}

.sbe-skeleton-button {
    width: 70px;
    height: 32px;
    border-radius: 20px;
    background: linear-gradient(90deg, #f0f2f5 25%, #e4e7eb 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: sbe-skeleton-loading 1.5s infinite;
    flex-shrink: 0;
}

@keyframes sbe-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===== Empty & Error States ===== */
.sbe-empty-state,
.sbe-error-state {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.sbe-empty-state i,
.sbe-error-state i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.sbe-empty-state p,
.sbe-error-state p {
    margin: 0 0 16px 0;
    font-size: 14px;
}

.sbe-retry-btn {
    padding: 4px 20px;
    border: none;
    border-radius: 20px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sbe-retry-btn i {
  font-size: 1.3rem;
  color: #fff !important;
}

.sbe-retry-btn:hover {
    opacity:0.9;
}

/* ===== Utility ===== */
.sbe-bettor-item .sbe-follow-btn {
    pointer-events: auto;
}

.sbe-bettor-item .sbe-follow-btn:disabled {
    pointer-events: none;
}

/* Scrollbar styling for the container */
.bettors-list::-webkit-scrollbar {
    width: 4px;
}

.bettors-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.bettors-list::-webkit-scrollbar-thumb {
    background: #c1c7cd;
    border-radius: 10px;
}

.bettors-list::-webkit-scrollbar-thumb:hover {
    background: #a8afb7;
}

/*  */
/* ============================================
    LEADERBOARD STYLES - Complete CSS
============================================ */

/* Leaderboard Container */
.lb-container,
.pf-container,
.tp-container,
.pd-container {
    border-radius: 12px;
    background-color: #fff !important;
    border:1px solid #E0E0E0 !important;
    padding:5px;
}

.lb-search-input::placeholder {
    color: #64748b;
}

.lb-filters {
    display: flex;
    gap: 8px;
}

.lb-filter-group select {
    padding: 10px 12px;
    background-color: #f8f8f8;
    border: 1px solid #DCDCDC;
    border-radius: 30px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
}

/* Table Header */
.lb-table-header {
    display: grid;
    grid-template-columns: 60px 1fr 80px 80px 70px 70px 80px 70px;
    padding: 12px 16px;
    background: #f8f8f8;
    border-bottom: 1px solid #D3D3D3;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* User List */
.lb-user-list {
    min-height: 400px;
}

/*  */
/* ============================================
    ADDITIONAL MODAL STYLES
============================================ */

/* Modal Styles */
.lb-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.lb-modal-container {
    position: relative;
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color, #334155);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lb-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #334155);
    background: #fff;
}

.lb-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.lb-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #333;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.lb-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.lb-modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(85vh - 80px);
}

/* User Profile Section in Modal */
.modal-user-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    /* border-bottom: 1px solid var(--border-color, #334155); */
    border-bottom: 1px solid var(--border-color);
}

.modal-user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color, #3b82f6);
    margin-bottom: 16px;
}

.modal-user-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #333;
}

.modal-user-username {
    font-size: 1.375rem;
    color: #94a3b8;
    margin-bottom: 12px;
}

/* Stats Grid */
.modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.modal-stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: transform 0.2s;
}

.modal-stat-card:hover {
    background: rgba(255, 255, 255, 0.08);
}

.modal-stat-value {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.modal-stat-value.primary {
    color: var(--primary-color, #3b82f6);
}

.modal-stat-value.success {
    color: var(--success-color, #10b981);
}

.modal-stat-value.warning {
    color: var(--warning-color, #f59e0b);
}

.modal-stat-value.danger {
    color: var(--danger-color, #ef4444);
}

.modal-stat-value.gold {
    color: var(--rank-gold, #fbbf24);
}

.modal-stat-label {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

/* Achievements Section */
.modal-achievements {
    margin-bottom: 24px;
}

.modal-section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-achievements-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #ececea;
    border-radius:6px;
}

.modal-achievement-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Badges Section */
.modal-badges {
    margin-bottom: 24px;
}

.modal-badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-badge {
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: capitalize;
}

.last-jackpot-date span {
   font-size: 1.2rem;
}

/* Action Buttons */
.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color, #334155);
}

.modal-btn {
    flex: 1;
    padding: 12px 24px !important;
    border: none;
    border-radius: 50px !important;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    text-decoration: none;
}

.modal-btn-primary {
    background: var(--primary-color, #3b82f6);
    color: #fff !important;
}

.modal-btn-primary:hover {
    background: var(--primary-color, #2563eb);
    color: #fff !important;
}

.modal-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border:1px solid var(--primary-color);
    color: var(--primary-color);
}

.modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* View More Button */
.view-more-btn {
    background: inherit;
    border:none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: #333;
    white-space: nowrap;
}

.view-more-btn:hover {
    color: var(--secondary-color);
    text-decoration:underline;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .modal-stats-grid {
        gap: 12px;
    }

    .modal-stat-value {
        font-size: 2rem;
    }

    .modal-stat-card {
        padding: 12px;
    }

    .modal-user-avatar {
        width: 80px;
        height: 80px;
    }

    .modal-user-name {
        font-size: 1.8rem;
    }

    .modal-stat-label {
       font-size: 1.35rem;
    }

    .modal-section-title {
        font-size: 1.6rem;
    }

    .modal-achievement-item,
    .last-jackpot-date span {
        font-size: 1.3rem;
    }

    .modal-badge {
        font-size: 1.25rem;
    }

    .modal-user-username {
        font-size: 1.4rem;
    }

    .modal-btn {
       font-size: 1.5rem;
    }
}

/*  */
/* ============================================
   COMPACT & NEAT LEADERBOARD STYLES
   ============================================ */

/* Tabs - Compact Design */
.lb-header {
    background: transparent;
    padding: 0;
}

.lb-tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.lb-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px 8px;
    background: transparent;
    border-bottom: 1px solid var(--border-color, #334155);
}

.lb-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: #6b7280;
    font-weight: 500;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.lb-tab .tab-icon {
    font-size: 1.45rem;
}

.lb-tab .tab-text {
    font-size: 1.45rem;
}

.lb-tab.active {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.lb-tab:hover {
    background: white;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Controls - Compact Row */
.lb-controls {
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--border-color, #334155);
}

.lb-search {
    flex: 1;
    position: relative;
    min-width: 0;
}

.lb-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #64748b);
    pointer-events: none;
}

.lb-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--border-color, #334155);
    border-radius: 30px;
    color: #333;
    font-size: 1.45rem;
    transition: all 0.2s;
}

.lb-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    background: #fff;
}

.lb-search-input::placeholder {
    color: var(--text-muted, #64748b);
    font-size: 1.45rem;
}

.lb-filter-group {
    flex-shrink: 0;
}

.lb-filter-select {
    padding: 8px 28px 8px 12px;
    background: var(--dark-bg, #0f172a);
    border: 1px solid var(--border-color, #334155);
    border-radius: 30px;
    color: var(--text-primary, #f1f5f9);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.lb-filter-select:hover {
    border-color: var(--primary-color, #3b82f6);
}

.lb-filter-select:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
}

/*  */
/* ============================================
   MOBILE OPTIMIZED LEADERBOARD STYLES
   ============================================ */

/* Base styles */
.lb-user-card {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}

.lb-user-card:hover {
    background: var(--card-bg-hover);
}

.lb-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Rank */
.lb-rank-col {
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.lb-rank {
    font-size: 1.4rem;
    font-weight: 700;
    color: #9ca3af;
}

.lb-rank.rank-1,
.lb-rank.rank-2,
.lb-rank.rank-3 {
   font-size: 1.4rem;
}

.lb-rank.rank-1 { color: #f59e0b; }
.lb-rank.rank-2 { color: #9ca3af; }
.lb-rank.rank-3 { color: #d97706; }

/* Avatar */
.lb-avatar-col {
    position: relative;
    flex-shrink: 0;
}

.lb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
}

.lb-avatar:hover {
    border-color: #3b82f6;
}

.lb-jackpot-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 1.5rem;
    background: #f59e0b;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* Username */
.lb-username {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.lb-username a {
    color: #1f2937;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.lb-username a:hover {
    color: #3b82f6;
}

/* Bonus Score - Compact */
.lb-bonus-score {
    font-size: 1.35rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Accuracy Badge - Desktop only */
.lb-accuracy-badge {
    font-size: 1.35rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(0,0,0,0.03);
    white-space: nowrap;
}

/* Buttons Container */
.lb-buttons-container {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 4px;
}

/* ============================================
   FOLLOW BUTTON - MOBILE OPTIMIZED
   ============================================ */

/* Mobile follow button - Icon only */
.follow-btn-mobile {
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.follow-btn-mobile.not-following {
    background: #3b82f6;
    color: white;
}

.follow-btn-mobile.not-following:hover {
    background: #2563eb;
}

.follow-btn-mobile.following {
    background: #e5e7eb;
    color: #374151;
}

.follow-btn-mobile.following:hover {
    background: #fca5a5;
    color: #991b1b;
}

/* View More Button */
.view-more-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-more-btn:hover {
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
}

/* Mobile Stats Row */
.lb-mobile-stats {
    display: none;
    padding: 4px 0 0 36px;
    gap: 8px;
    font-size: 0.6rem;
    color: #6b7280;
    flex-wrap: wrap;
}

.lb-mobile-stats span {
    background: #f9fafb;
    padding: 1px 8px;
    border-radius: 10px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile */
@media (max-width: 768px) {
    .lb-user-card {
        padding: 6px 8px;
    }

    .lb-user-row {
        gap: 6px;
    }

    .lb-rank-col {
        width: 22px;
    }

    .lb-rank {
        font-size: 1.5rem;
    }

    .lb-rank.rank-1,
    .lb-rank.rank-2,
    .lb-rank.rank-3 {
        font-size: 1.5rem;
    }

    .lb-avatar {
        width: 30px;
        height: 30px;
    }

    .lb-username a {
        font-size: 1.5rem;
        max-width: 80px;
    }

    .lb-bonus-score {
        font-size: 1.45rem;
        padding: 1px 4px;
    }

    .lb-buttons-container {
        gap: 2px;
    }

    .view-more-btn {
        font-size: 1.5rem;
        width: 24px;
        height: 24px;
        padding: 2px 4px;
    }

    .lb-mobile-stats {
        display: flex !important;
    }

    /* Hide accuracy badge on mobile (shown in stats row) */
    .lb-accuracy-badge {
        display: none !important;
    }

    /* Smaller jackpot badge */
    .lb-jackpot-badge {
        width: 14px;
        height: 14px;
        font-size: 0.4rem;
        bottom: -1px;
        right: -1px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .lb-user-card {
        padding: 4px 6px;
    }

    .lb-user-row {
        gap: 4px;
    }

    .lb-rank-col {
        width: 18px;
    }

    .lb-rank {
        font-size: 1.5rem;
    }

    .lb-rank.rank-1,
    .lb-rank.rank-2,
    .lb-rank.rank-3 {
        font-size: 1.5rem;
    }

    .lb-avatar {
        width: 26px;
        height: 26px;
    }

    .lb-username a {
        font-size: 1.5rem;
        max-width: 60px;
    }

    .lb-bonus-score {
        font-size: 1.45rem;
        padding: 1px 3px;
    }

    .follow-btn-mobile {
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 1.5rem !important;
    }

    .view-more-btn {
        font-size: 1.5rem;
        width: 22px;
        height: 22px;
    }

    .lb-mobile-stats {
        font-size: 1.25rem;
        gap: 4px;
        padding-left: 28px;
    }

    .lb-mobile-stats span {
        padding: 1px 6px;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .lb-username a {
        max-width: 100px;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lb-user-card {
    animation: fadeIn 0.3s ease forwards;
}

.lb-user-card:nth-child(1) { animation-delay: 0.05s; }
.lb-user-card:nth-child(2) { animation-delay: 0.1s; }
.lb-user-card:nth-child(3) { animation-delay: 0.15s; }
.lb-user-card:nth-child(4) { animation-delay: 0.2s; }
.lb-user-card:nth-child(5) { animation-delay: 0.25s; }
.lb-user-card:nth-child(6) { animation-delay: 0.3s; }
.lb-user-card:nth-child(7) { animation-delay: 0.35s; }
.lb-user-card:nth-child(8) { animation-delay: 0.4s; }
.lb-user-card:nth-child(9) { animation-delay: 0.45s; }
.lb-user-card:nth-child(10) { animation-delay: 0.5s; }
/*  */

/* ============================================
   JACKPOT BANNER STYLES
   ============================================ */

.lb-jackpot-banner {
    /* background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); */
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Animated background effect */
.lb-jackpot-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.lb-jackpot-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    position: relative;
    z-index: 1;
}

/* Icon Styles */
.lb-jackpot-icon {
    font-size: 32px;
    animation: bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

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

/* ============================================
   JACKPOT BANNER - VARIATIONS
   ============================================ */

/* Large/Big Banner Style */
.lb-jackpot-banner.large {
    padding: 0;
}

.lb-jackpot-banner.large .lb-jackpot-banner-content {
    padding: 16px 24px;
}

.lb-jackpot-banner.large .lb-jackpot-icon {
    font-size: 40px;
}

.lb-jackpot-banner.large .lb-jackpot-info h3 {
    font-size: 1.6rem;
}

.lb-jackpot-banner.large .lb-jackpot-info p {
    font-size: 1.4rem;
}

.lb-jackpot-banner.large .lb-jackpot-count {
    font-size: 32px;
    padding: 6px 16px;
    min-width: 60px;
}

/* Small/Compact Banner Style */
.lb-jackpot-banner.small .lb-jackpot-banner-content {
    padding: 8px 16px;
}

.lb-jackpot-banner.small .lb-jackpot-icon {
    font-size: 24px;
}

.lb-jackpot-banner.small .lb-jackpot-info h3 {
    font-size: 12px;
}

.lb-jackpot-banner.small .lb-jackpot-info p {
    font-size: 10px;
}

.lb-jackpot-banner.small .lb-jackpot-count {
    font-size: 22px;
    padding: 2px 10px;
    min-width: 45px;
}

/* ============================================
   JACKPOT BANNER - MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .lb-jackpot-banner-content {
        padding: 10px 16px;
        gap: 10px;
    }

    .lb-jackpot-icon {
        font-size: 28px;
    }

    .lb-jackpot-info h3 {
        font-size: 13px;
    }

    .lb-jackpot-info p {
        font-size: 10px;
    }

    .lb-jackpot-count {
        font-size: 24px;
        padding: 3px 10px;
        min-width: 45px;
    }
}

@media (max-width: 480px) {
    .lb-jackpot-banner-content {
        padding: 8px 12px;
        gap: 8px;
    }

    .lb-jackpot-icon {
        font-size: 24px;
    }

    .lb-jackpot-info h3 {
        font-size: 11px;
    }

    .lb-jackpot-info p {
        font-size: 9px;
        margin-top: 2px;
    }

    .lb-jackpot-count {
        font-size: 20px;
        padding: 2px 8px;
        min-width: 40px;
    }
}

@media (max-width: 360px) {
    .lb-jackpot-banner-content {
        padding: 6px 10px;
        gap: 6px;
    }

    .lb-jackpot-icon {
        font-size: 20px;
    }

    .lb-jackpot-info h3 {
        font-size: 10px;
    }

    .lb-jackpot-info p {
        font-size: 8px;
    }

    .lb-jackpot-count {
        font-size: 18px;
        padding: 2px 6px;
        min-width: 35px;
    }
}

/* ============================================
   JACKPOT BANNER - ANIMATIONS & EFFECTS
   ============================================ */

/* Confetti effect for jackpot */
.lb-jackpot-banner.confetti::after {
    content: '🎉';
    position: absolute;
    top: 50%;
    right: 20%;
    font-size: 20px;
    animation: float 3s ease-in-out infinite;
    opacity: 0.6;
    pointer-events: none;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(10deg);
    }
    75% {
        transform: translateY(5px) rotate(-10deg);
    }
}

/* Pulse effect on count when updated */
.lb-jackpot-count.pulse {
    animation: pulseCount 0.5s ease;
}

@keyframes pulseCount {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Glow effect on hover */

.lb-jackpot-banner:hover .lb-jackpot-count {
    background: rgba(255, 255, 255, 0.5);
}

/* ============================================
   JACKPOT BANNER - WINNER CELEBRATION MODE
   ============================================ */

/* Celebration mode when there are winners */
.lb-jackpot-banner.has-winners {
    animation: celebrate 0.5s ease;
}

@keyframes celebrate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* Fireworks effect for multiple winners */
.lb-jackpot-banner.has-winners .lb-jackpot-icon {
    animation: firework 1s ease infinite;
}

@keyframes firework {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* ============================================
   JACKPOT BANNER - EMPTY STATE
   ============================================ */

.lb-jackpot-banner.empty {
    /* background: linear-gradient(135deg, #64748b, #475569); */
    opacity: 0.7;
}

.lb-jackpot-banner.empty .lb-jackpot-icon {
    animation: none;
    opacity: 0.6;
}

.lb-jackpot-banner.empty .lb-jackpot-count {
    background: rgba(0, 0, 0, 0.2);
}

/*  */
/* ============================================
   EMPTY STATE STYLES
   ============================================ */

.lb-empty {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 60px 24px;
    /* min-height: 300px; */
    background-color: #fff;
    border-radius: 12px;
    margin: 20px;
}

/* Empty State Icon */
.lb-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Empty State Heading */
.lb-empty h4 {
    margin: 0 auto 12px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    max-width: 70%;
    text-align: center !important;
}

/* Empty State Paragraph */
.lb-empty p {
    margin: 0 auto 24px;
    font-size: 14px;
    color: #383434;
    max-width: 80%;
    line-height: 1.5;
    text-align: center !important;
}

.lb-empty i {
    font-size: 1.3rem;
}

/* Retry Button */
.btn-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--primary-color, #3b82f6), var(--primary-color2, #2563eb));
    border: none;
    border-radius: 40px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-retry::before {
    content: '🔄';
    font-size: 14px;
    transition: transform 0.3s ease;
}

.btn-retry:hover {
    opacity:0.9;
}

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

/* ============================================
   EMPTY STATE VARIATIONS
   ============================================ */

/* No Results State */
.lb-empty.no-results .lb-empty-icon {
    content: '🔍';
    font-size: 56px;
}

/* Loading Error State */
.lb-empty.error .lb-empty-icon {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* No Data State */
.lb-empty.no-data .lb-empty-icon {
    content: '📊';
    animation: none;
}

/* Search Empty State */
.lb-empty.search-empty .lb-empty-icon {
    content: '🔎';
    font-size: 56px;
}

/* ============================================
   EMPTY STATE - WITH ILLUSTRATION
   ============================================ */

/* Illustration container */
.lb-empty-illustration {
    width: 120px;
    height: 120px;
    margin-bottom: 24px;
    position: relative;
}

.lb-empty-illustration svg {
    width: 100%;
    height: 100%;
}

/* Animated circles for loading */
.lb-empty.loading .lb-empty-icon {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ============================================
   EMPTY STATE - MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .lb-empty {
        padding: 50px 20px;
        min-height: 280px;
        margin: 16px;
    }

    .lb-empty-icon {
        font-size: 56px;
        margin-bottom: 16px;
    }

    .lb-empty h4 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .lb-empty p {
        font-size: 1.25rem;
        margin-bottom: 20px;
        max-width: 260px;
    }

    .btn-retry {
        padding: 9px 22px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .lb-empty {
        padding: 40px 16px;
        min-height: 250px;
        margin: 12px;
    }

    .lb-empty-icon {
        font-size: 48px;
        margin-bottom: 14px;
    }

    .lb-empty h4 {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .lb-empty p {
        font-size: 1.25rem;
        margin-bottom: 18px;
        max-width: 240px;
    }

    .btn-retry {
        padding: 8px 20px;
        font-size: 1.25rem;
    }

    .btn-retry::before {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .lb-empty {
        padding: 30px 12px;
        min-height: 220px;
        margin: 8px;
    }

    .lb-empty-icon {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .lb-empty h4 {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }

    .lb-empty p {
        font-size: 1.25rem;
        margin-bottom: 16px;
        max-width: 220px;
    }

    .btn-retry {
        padding: 7px 18px;
        font-size: 1.25rem;
    }
}

/* ============================================
   EMPTY STATE - DIFFERENT THEMES
   ============================================ */

/* Warning Theme (for errors) */
.lb-empty.warning .lb-empty-icon {
    color: #f59e0b;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}

.lb-empty.warning h4 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Error Theme */
.lb-empty.error .lb-empty-icon {
    color: #ef4444;
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}

.lb-empty.error h4 {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Success Theme */
.lb-empty.success .lb-empty-icon {
    color: #10b981;
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}

.lb-empty.success h4 {
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Info Theme */
.lb-empty.info .lb-empty-icon {
    color: #3b82f6;
}

.lb-empty.info h4 {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/*  */
/* ============================================
   FOOTER STYLES
   ============================================ */

.lb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

/* Updated Time Stamp */
.lb-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #94a3b8);
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

/* Clock icon effect */
.lb-updated::before {
    content: '🕐';
    font-size: 12px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.lb-updated:hover::before {
    transform: rotate(15deg);
}

/* Live update indicator */
.lb-updated.live {
    color: #10b981;
}

.lb-updated.live::before {
    content: '●';
    font-size: 10px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* Refresh Button */
.lb-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--primary-color) !important;
    border-radius: 30px;
    color: var(--primary-color, #3b82f6);
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
}

/* Button hover effect */
.lb-refresh-btn:hover {
    background: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
    color: white;
}

/* Refresh icon rotation animation */
.lb-refresh-btn:active span,
.lb-refresh-btn.refreshing span {
    animation: spin 0.6s ease-in-out;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Refreshing state */
.lb-refresh-btn.refreshing {
    pointer-events: none;
    opacity: 0.7;
}

.lb-refresh-btn.refreshing span {
    animation: spin 0.8s linear infinite;
}

/* ============================================
   FOOTER VARIATIONS
   ============================================ */

/* Compact footer */
.lb-footer.compact {
    padding: 8px 16px;
}

.lb-footer.compact .lb-updated {
    font-size: 10px;
}

.lb-footer.compact .lb-refresh-btn {
    padding: 4px 12px;
    font-size: 11px;
}

/* Sticky footer */
.lb-footer.sticky {
    position: sticky;
    bottom: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    z-index: 10;
}

/* With shadow */
.lb-footer.shadow {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Transparent footer */
.lb-footer.transparent {
    background: transparent;
    border-top-color: transparent;
}

.lb-footer.transparent::before {
    display: none;
}

/* ============================================
   FOOTER - MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .lb-footer {
        padding: 10px 16px;
    }

    .lb-updated {
        font-size: 1.45rem;
    }

    .lb-updated::before {
        font-size: 1.2rem;
    }

    .lb-refresh-btn {
        padding: 5px 12px;
        font-size: 1.45rem;
        gap: 4px;
    }

    .lb-tab {
        font-size: 1.6rem !important;
    }

    .lb-search-input,
    .lb-filter-select {
        font-size: 1.45rem !important;
    }
}

@media (max-width: 480px) {
    .lb-footer {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .lb-updated {
        font-size: 1.2rem;
        order: 2;
    }

    .lb-updated::before {
        font-size: 1.2rem;
    }

    .lb-refresh-btn {
        padding: 4px 10px;
        font-size: 1.45rem;
        order: 1;
        width: auto;
        min-width: 80px;
        justify-content: center;
    }

    .lb-tab {
        font-size: 1.5rem;
    }

    .lb-search-input,
    .lb-filter-select {
        font-size: 1.45rem;
    }
}

@media (max-width: 360px) {
    .lb-footer {
        padding: 8px 10px;
        flex-direction: column;
        gap: 6px;
    }

    .lb-updated {
        order: 2;
        font-size: 1.2rem;
    }

    .lb-refresh-btn {
        order: 1;
        width: 100%;
        padding: 6px 12px;
        justify-content: center;
    }

    .lb-tab {
        font-size: 1.5rem;
    }

    .lb-search-input,
    .lb-filter-select {
        font-size: 1.45rem;
    }
}


/* ============================================
   FOOTER - ANIMATIONS & EFFECTS
   ============================================ */

/* Slide up animation */
.lb-footer {
    animation: slideUp 0.3s ease;
    background: #fff;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Auto-refresh indicator */
.lb-footer.auto-refresh .lb-refresh-btn {
    position: relative;
    overflow: visible;
}

@keyframes borderGlow {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

/* Success state for refresh */
.lb-refresh-btn.success {
    background: #10b981;
    border-color: var(--primary-color);
    color: white;
}

/* Error state for refresh */
.lb-refresh-btn.error {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    75% {
        transform: translateX(3px);
    }
}

/* ============================================
   FOOTER - LOADING STATES
   ============================================ */

/* Skeleton loading for footer */
.lb-footer.skeleton {
    pointer-events: none;
}

.lb-footer.skeleton .lb-updated {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    width: 100px;
    height: 16px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.lb-footer.skeleton .lb-refresh-btn {
    width: 80px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .mb-message-card__content {
      font-size: 1.5rem;
    }
}

/*  */
.ml-5 {
    margin-left: 1.25rem;
}

/*  */
/* ========================================
   VOTE BUTTONS - OUTLINE & FILLED STATES
   ======================================== */
.btn-vote-yes,
.btn-vote-no {
    padding: 14px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

/* ===== YES BUTTON STATES ===== */
/* Outlined state (not voted) */
.btn-outline-success.btn-vote-yes {
    background-color: transparent;
    color: #28a745;
    border: 2px solid #28a745;
}

.btn-outline-success.btn-vote-yes:hover:not(:disabled) {
    background-color: #28a745;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
}

.btn-outline-success.btn-vote-yes:active:not(:disabled) {
    transform: translateY(0);
}

/* Filled state (voted YES) */
.btn-success.btn-vote-yes.voted {
    background-color: linear-gradient(135deg, #28a745, #20c997) !important;
    color: #fff;
    border: 2px solid #28a745 !important;
    box-shadow: 0 4px 20px rgba(40, 167, 69, 0.4);
    cursor: default;
}

.btn-success.btn-vote-yes.voted:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(40, 167, 69, 0.4);
}

/* ===== NO BUTTON STATES ===== */
/* Outlined state (not voted) */
.btn-outline-danger.btn-vote-no {
    background-color: transparent;
    color: #dc3545;
    border: 2px solid #dc3545;
}

.btn-outline-danger.btn-vote-no:hover:not(:disabled) {
    background-color: #dc3545;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3);
}

.btn-outline-danger.btn-vote-no:active:not(:disabled) {
    transform: translateY(0);
}

/* Filled state (voted NO) */
.btn-danger.btn-vote-no.voted {
    background-color: linear-gradient(135deg, #dc3545, #e83e8c);
    color: #fff !important;
    border: 2px solid #dc3545 !important;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4);
    cursor: default;
}

.btn-danger.btn-vote-no.voted:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4);
}

/* Disabled state for non-voted buttons when the other is voted */
.btn-vote-yes:disabled:not(.voted),
.btn-vote-no:disabled:not(.voted) {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== ANIMATIONS ===== */
/* Check mark animation when voting */
.btn-vote-yes .fa-check,
.btn-vote-no .fa-check {
    animation: checkPop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes checkPop {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.4) rotate(10deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Pulse animation when voted */
.btn-vote-yes.voted,
.btn-vote-no.voted {
    animation: votePulse 0.4s ease;
}

@keyframes votePulse {
    0% { transform: scale(1); }
    30% { transform: scale(0.95); }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .btn-vote-yes,
    .btn-vote-no {
        padding: 12px 16px;
        font-size: 1rem;
        min-height: 48px;
    }
}

/*  */
/* Add to your styles */
.private-profile-message {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    margin: 20px;
}

.private-icon {
    font-size: 60px;
    color: #6c757d;
    margin-bottom: 20px;
}

.private-profile-message h3 {
    color: #343a40;
    margin-bottom: 12px;
}

.private-profile-message p {
    color: #6c757d;
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto 24px;
}

.private-profile-actions .btn-follow-private {
    background: #d4af37;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.private-profile-actions .btn-follow-private:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.private-achievements-message {
    text-align: center;
    padding: 40px 20px;
    width: 100%;
}

.private-achievements-message .private-icon {
    font-size: 48px;
    color: #6c757d;
    margin-bottom: 16px;
}

.private-achievements-message h3 {
    color: #343a40;
    margin-bottom: 8px;
}

.private-achievements-message p {
    color: #6c757d;
}

/*  */
/* Privacy and Visibility Styles */
.privacy-message {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    margin: 20px;
    animation: fadeIn 0.3s ease;
}

.privacy-message .privacy-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.privacy-message.followers-only .privacy-icon {
    color: #d4af37;
}

.privacy-message.private .privacy-icon {
    color: #6c757d;
}

.privacy-message h3 {
    font-size: 24px;
    margin-bottom: 12px;
    color: #343a40;
}

.privacy-message p {
    font-size: 16px;
    color: #6c757d;
    max-width: 500px;
    margin: 0 auto 24px;
}

.privacy-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.privacy-actions .btn-follow {
    background: #d4af37;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.privacy-actions .btn-follow:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.privacy-actions .btn-follow i {
    margin-right: 8px;
}

.profile-block-message {
    text-align: center;
    padding: 80px 20px;
    background: #f8f9fa;
    border-radius: 16px;
    margin: 20px 0;
}

.profile-block-message .block-icon {
    font-size: 80px;
    color: #6c757d;
    margin-bottom: 24px;
}

.profile-block-message h2 {
    font-size: 32px;
    margin-bottom: 16px;
    color: #343a40;
}

.profile-block-message p {
    font-size: 18px;
    color: #6c757d;
    max-width: 500px;
    margin: 0 auto 32px;
}

.block-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.achievements-message {
    padding: 40px 20px;
    margin: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Visibility badge in profile header */
.visibility-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.visibility-badge.public {
    background: #d4edda;
    color: #155724;
}

.visibility-badge.followers-only {
    background: #fff3cd;
    color: #856404;
}

.visibility-badge.private {
    background: #f8d7da;
    color: #721c24;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .privacy-message {
        padding: 40px 15px;
        margin: 10px;
    }

    .privacy-message .privacy-icon {
        font-size: 40px;
    }

    .privacy-message h3 {
        font-size: 20px;
    }

    .profile-block-message {
        padding: 40px 15px;
    }

    .profile-block-message .block-icon {
        font-size: 50px;
    }

    .profile-block-message h2 {
        font-size: 24px;
    }
}

/*  */
.privacy-settings {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.privacy-settings h3 {
    margin-bottom: 8px;
    color: #343a40;
}

.privacy-settings > p {
    color: #6c757d;
    margin-bottom: 24px;
}

.visibility-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.visibility-option {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.visibility-option:hover {
    border-color: #d4af37;
    background: #fef9e6;
}

.visibility-option.selected {
    border-color: #d4af37;
    background: #fef9e6;
}

.visibility-option .option-radio {
    margin-right: 16px;
    padding-top: 2px;
}

.visibility-option .option-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: #d4af37;
    cursor: pointer;
}

.visibility-option .option-content h4 {
    margin: 0 0 4px 0;
    color: #343a40;
}

.visibility-option .option-content p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}


/*  */
/* Settings Card Styles */
.st-settings-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.st-settings-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.st-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.st-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fef9e6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    font-size: 18px;
}

.st-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #343a40;
    margin: 0;
}

.st-settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.st-settings-list > li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.st-settings-list > li:last-child {
    border-bottom: none;
}

.st-setting-label-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    padding-top: 4px;
}

.st-setting-label-wrapper i {
    color: #6c757d;
    font-size: 18px;
    width: 24px;
}

.st-setting-label {
    font-weight: 500;
    color: #343a40;
    font-size: 15px;
}

.st-setting-control {
    flex: 1;
}

/* Radio Group Styles */
.st-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #fafafa;
    position: relative;
}

.st-radio-option:hover {
    border-color: #d4af37;
    background: #fef9e6;
}

.st-radio-option:has(input:checked) {
    border-color: #d4af37;
    background: #fef9e6;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
}

.st-radio-input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #d4af37;
    cursor: pointer;
}

.st-radio-input:focus-visible {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}

.st-radio-label {
    display: flex;
    flex: 1;
    cursor: pointer;
}

.st-radio-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-radio-main-text {
    font-weight: 500;
    color: #343a40;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-radio-main-text i {
    color: #6c757d;
    font-size: 16px;
    width: 20px;
}

.st-radio-option:has(input:checked) .st-radio-main-text i {
    color: #d4af37;
}

.st-radio-description {
    color: #6c757d;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .st-settings-list > li {
        flex-direction: column;
        gap: 12px;
        padding: 12px 0;
    }

    .st-setting-label-wrapper {
        min-width: auto;
        width: 100%;
    }

    .st-setting-control {
        width: 100%;
    }

    .st-radio-option {
        padding: 10px 14px;
    }

    .st-radio-main-text {
        font-size: 14px;
    }
}

/* Animation for selection */
@keyframes radioSelect {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.st-radio-option:has(input:checked) {
    animation: radioSelect 0.2s ease;
}

/* Focus styles for accessibility */
.st-radio-input:focus-visible + .st-radio-label {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .st-settings-card {
        background: #2d2d2d;
        border-color: #404040;
    }

    .st-card-header {
        border-bottom-color: #404040;
    }

    .st-card-icon {
        background: #3d3d3d;
        color: #d4af37;
    }

    .st-card-title {
        color: #e9ecef;
    }

    .st-setting-label {
        color: #e9ecef;
    }

    .st-radio-option {
        background: #2d2d2d;
        border-color: #404040;
    }

    .st-radio-option:hover {
        background: #3d3d3d;
        border-color: #d4af37;
    }

    .st-radio-option:has(input:checked) {
        background: #3d3d3d;
        border-color: #d4af37;
    }

    .st-radio-main-text {
        color: #e9ecef;
    }

    .st-radio-description {
        color: #adb5bd;
    }

    .st-setting-label-wrapper i {
        color: #adb5bd;
    }

    .st-radio-option:has(input:checked) .st-radio-main-text i {
        color: #d4af37;
    }
}

/*  */
/* Notification Styles */
.st-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease;
    max-width: 400px;
    min-width: 300px;
}

.st-notification-success {
    background: #00a86b;
}

.st-notification-error {
    background: #dc3545;
}

.st-notification-info {
    background: #d4af37;
}

.st-notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.st-notification-content i {
    font-size: 20px;
}

.st-notification-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.st-notification-close:hover {
    opacity: 1;
}

/* Loading Spinner */
.st-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.st-spinner {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #343a40;
    font-weight: 500;
}

.st-spinner i {
    color: #d4af37;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/*  */
/* Jackpot Distribution Banner */
.lb-jackpot-banner {
    background-color: #fff;
    border-radius: 16px;
    padding: 24px;
    margin: 20px 12px;
    border: 1px solid #334155;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); */
}

.lb-jackpot-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.lb-jackpot-icon {
    font-size: 2rem;
}

.lb-jackpot-info h3 {
    color: var(--primary-color2);
    font-size: 1.6rem;
    margin: 0;
    font-weight: 600;
}

.lb-jackpot-info p {
    color: #94a3b8;
    font-size: 1.25rem;
    margin: 4px 0 0 0;
}

/* Distribution Grid */
.lb-jackpot-distribution {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.lb-distribution-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.lb-distribution-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2e7d32;
    background-color: #e6f7e6;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid #a5d6a7;
}

.lb-distribution-bar {
    width: 100%;
    height: 6px;
    background-color: #E8E8E8;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.lb-distribution-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
}

.lb-distribution-count {
    font-size: 1.5rem;
    color: #333;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .lb-jackpot-distribution {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .lb-jackpot-distribution {
        grid-template-columns: repeat(2, 1fr);
    }

    .lb-jackpot-banner {
        padding: 16px;
    }
}

/*  */
button.bn-sm.sbe-follow-btn {
    padding: 1px 10px !important;
    font-size: 1.2rem !important;
}

button.bn-sm.sbe-follow-btn i {
   font-size: 1.2rem !important;
}

.txt-capitalize {
   text-transform: capitalize;
}

/*  */
/* ============================================ */
/* MOBILE BOTTOM NAVIGATION                     */
/* ============================================ */

/* ===== HIDE ON DESKTOP ===== */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* ===== SHOW ON MOBILE ===== */
@media (max-width: 768px) {

    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        background: #ffffff;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding: 0 env(safe-area-inset-bottom, 0px) 0 0;
        height: 70px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
    }

    .bottom-nav-container {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 0 8px;
    }

    /* ===== NAV ITEMS ===== */
    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #888;
        font-size: 1rem;
        font-weight: 500;
        padding: 4px 12px;
        min-height: 60px;
        min-width: 50px;
        transition: all 0.2s ease;
        cursor: pointer;
        position: relative;
        border: none;
        background: none;
    }

     .bottom-nav-item i {
       font-size: 1.4rem;
     }

    .bottom-nav-item .bottom-nav-icon {
        font-size: 20px;
        margin-bottom: 2px;
        transition: all 0.2s ease;
        color: #888;
    }

    .bottom-nav-item .bottom-nav-label {
        font-size: 10px;
        color: #888;
        transition: all 0.2s ease;
        letter-spacing: 0.2px;
    }

    /* Active state */
    .bottom-nav-item.active .bottom-nav-icon {
        color: #667eea;
    }

    .bottom-nav-item.active .bottom-nav-label {
        color: #667eea;
        font-weight: 600;
    }

    .bottom-nav-item:hover {
        text-decoration: none;
    }

    /* ===== CREATE BUTTON (Prominent) ===== */
    .bottom-nav-create {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        position: relative;
        margin-top: -10px;
        z-index: 10;
        min-width: 60px;
    }

    .create-icon-wrapper {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, var(--primary-color2) 0%, var(--primary-color) 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #fff;
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.45);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        margin-bottom: 2px;
        position: relative;
    }

    /* Pulse ring around create button */
    .create-icon-wrapper::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 3px solid rgba(177, 136, 25, 0.3);
        animation: createPulse 2s ease-out infinite;
        pointer-events: none;
    }

    @keyframes createPulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(1.3);
            opacity: 0;
        }
    }

    .bottom-nav-create .create-label {
        font-size: 10px;
        color: #667eea;
        font-weight: 600;
        letter-spacing: 0.2px;
        margin-top: 2px;
    }

    /* Active/Tap state */
    .bottom-nav-create:active .create-icon-wrapper {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

    /* ===== BADGE (Optional) ===== */
    .bottom-nav-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #ff4757;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
    }

    /* ===== SAFE AREA FOR NOTCH PHONES ===== */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .mobile-bottom-nav {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }

    /* ===== EXTRA SMALL PHONES ===== */
    @media (max-width: 380px) {
        .bottom-nav-container {
            padding: 0 4px;
        }

        .bottom-nav-item {
            padding: 4px 6px;
            min-width: 40px;
        }

        .bottom-nav-item .bottom-nav-icon {
            font-size: 18px;
        }

        .create-icon-wrapper {
            width: 48px;
            height: 48px;
            font-size: 20px;
        }
    }
}
/*  */

.follow-btn-container {
    padding:0 10px 10px 10px;
}

.view-profile .card-body .position-relative {
    padding:3px 10px 0 10px;
}

#loadMoreContainer .btn-outline-warning:hover,
.load-more-comments:hover {
   color:#fff;
}

/*  */
/* Phone Input Group Styles */
.phone-input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.phone-input-group:focus-within {
    border-color: var(--primary-color);
}

.phone-input-group .country-code-select {
    border-color: var(--border-color);
    border-right: 1px solid #e5e5e5;
    background: #f8f9fa;
    min-width: 100px;
    cursor: pointer;
    flex: 0 0 auto;
    border-radius: 4px 0 0 4px;
    color: #333;
    font-weight: 500;
    outline: none;
}

.phone-input-group .country-code-select:hover {
    background: #e9ecef;
}

.phone-input-group .country-code-select:focus {
    background: #e9ecef;
    outline: none;
}

.phone-input-group .phone-input {
    flex: 1;
    border: none;
    border-radius: 0 4px 4px 0;
    background: transparent;
    color: #333;
    outline: none;
}

.phone-input-group .phone-input:focus {
    outline: none;
    box-shadow: none;
}

/* Phone helper text */
.phone-helper-text {
    display: block;
    margin-top: -8px;
    margin-bottom: 15px;
    color: #6c757d;
    font-size: 12px;
    padding-left: 5px;
    line-height: 1.8rem;
}

/* Mobile Responsive */

@media (max-width: 768px) {
  .phone-input-group .country-code-select,
  .account__login--input {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 576px) {
    .phone-input-group {
        flex-wrap: wrap;
        border-radius: 4px;
    }

    .phone-input-group .country-code-select {
        min-width: 80px;
        border-radius: 4px 4px 0 0;
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
        width: 100%;
        flex: 1 1 100%;
    }

    .phone-input-group .phone-input {
        border-radius: 0 0 4px 4px;
        flex: 1 1 100%;
    }

    .dark-theme .phone-input-group .country-code-select {
        border-bottom-color: #404040;
    }
}

/* Validation states */
.phone-input-group.is-invalid {
    border-color: #dc3545;
}

.phone-input-group.is-invalid:focus-within {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.phone-input-group.is-valid {
    border-color: #28a745;
}

.phone-input-group.is-valid:focus-within {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Flag emoji styling */
.phone-input-group .country-code-select option {
    padding: 8px;
}

/* Loading state */
.phone-input-group.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Tooltip for validation */
.phone-input-group .validation-tooltip {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

.phone-input-group.is-invalid .validation-tooltip {
    display: block;
    color: #dc3545;
}

.phone-input-group.is-valid .validation-tooltip {
    display: block;
    color: #28a745;
}

/* Account Login Input Override */
.account__login--input.phone-input {
    border-radius: 0 4px 4px 0;
    margin-bottom: 0;
}

.account__login--input.phone-input:focus {
    border-color: transparent;
    box-shadow: none;
}

/* RTL Support */
[dir="rtl"] .phone-input-group .country-code-select {
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #e5e5e5;
    border-right: none;
}

[dir="rtl"] .phone-input-group .phone-input {
    border-radius: 4px 0 0 4px;
}

[dir="rtl"] .phone-input-group .country-code-select {
    border-radius: 0 4px 4px 0;
}

/*  */
/* Add to your existing CSS */
#email-input-container {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease;
}

#email-input-container label {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

#email-input-container input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

#email-input-container input.error {
    border-color: #dc3545;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*  */
.payment-container {
  width:100%;
  margin:auto;
  padding:0 4px;
  height:100%;
  padding:1rem !important;
}

/*  */
#user-email {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    height: auto !important;

    /* Visual enhancements */
    padding: 12px 16px !important;
    font-size: 1.4rem !important;
    font-family: inherit !important;
    color: #333 !important;
    background: #f8f9fa !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* Focus state - more appealing */
#user-email:focus {
    /* border-color: var(--primary-color) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.15) !important; */

    border-color: var(--primary-color) !important;
    /* box-shadow: 0 0 0 4px rgba(177, 136, 25, 0.25) !important; */
    outline: none !important;
    background: #ffffff !important;
}

/* Hover state */
#user-email:hover {
    border-color: var(--primary-color) !important;
    background: #ffffff !important;
}

/* Placeholder styling */
#user-email::placeholder {
    color: #999 !important;
    opacity: 1 !important;
    font-weight: 300 !important;
}

#user-email[readonly] {
    background-color: #f8f9fa !important;
    cursor: not-allowed !important;
}

#user-email:not([readonly]) {
    background-color: #ffffff !important;
    cursor: text !important;
}

#email-group {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#email-helper-text {
    display: block !important;
    visibility: visible !important;
}

.modal-jackpot-date {
    display: flex;
}

.account__login--header p {
   font-size:1.35rem;
   text-align: center;
}

/*  */
.sdb-loading {
   display:flex;
   justify-content: center;
   padding:2rem;
}

.sdb-spinner {
   width:2rem;
   height:2rem;
   border: 3px solid #e5e7eb;
   border-top:3px solid var(--primary-color2);
   border-radius:50%;
   animation:sdb-spin 1s linear infinite;
}

@keyframes sdb-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*  */
/* Minimal styles for the messages */
.sideboard-empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    min-height: 100px;
    color: #6c757d;
}

.sideboard-empty-message .empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.sideboard-empty-message .empty-text {
    font-size: 1.2rem;
    font-weight: 500;
}


/*  */
/* Read-only field styles */
.mdl-form-input[readonly] {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    border-color: #e9ecef;
}

.mdl-form-input[readonly]:focus {
    border-color: #e9ecef;
    box-shadow: none;
}

.country-code-select:disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Verified badge */
.phone-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #28a745;
    font-size: 0.8rem;
    font-weight: normal;
}

.phone-verified-badge i {
    font-size: 0.9rem;
}

/*  */
.phone-display-group {
   background-color: #f8f9fa;
}

.phone-display {
    padding: 10px 12px;
    font-size: 1.4rem !important;
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

.change-phone {
    padding: 10px 12px;
    font-size: 1.4rem !important;
    color: green !important;
    text-decoration: none;
}

.change-phone span {
  text-decoration: underline;
}

#pfNewPhoneInput {
   border: none !important;
   border-radius: 0 8px 8px 0;
}

.btn i {
    font-size:1.4rem;
}

/*  */