/* =========================================================
   FutCoinSniper — Buy Coins Slider READY CSS
   Version: 1.0

   What this file does:
   - Replaces the old blue/orange slider styles.
   - Removes the old grey commented code. It is not needed.
   - Keeps support for the active jQuery UI slider classes.
   - Adds light support for the older .slider-container/.theme-green slider
     in case the plugin outputs those classes.
   - Uses the black/gold FutCoinSniper design from the new home page.

   Install:
   1) Replace the old slider CSS file with this file, OR
   2) Paste this entire file at the END of your current CSS.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  --fcs-bg: #02060a;
  --fcs-bg-2: #050b12;
  --fcs-panel: rgba(5, 10, 16, 0.82);
  --fcs-panel-dark: rgba(2, 7, 13, 0.96);
  --fcs-white: #e6edf5;
  --fcs-white-2: #f3f4f6;
  --fcs-muted: rgba(230, 237, 245, 0.72);
  --fcs-gold: #f7bd3d;
  --fcs-gold-2: #eccc79;
  --fcs-gold-dark: #d89a13;
  --fcs-border: rgba(247, 189, 61, 0.72);
  --fcs-border-soft: rgba(247, 189, 61, 0.28);
  --fcs-shadow: rgba(247, 189, 61, 0.32);
}

/* =========================================================
   GENERAL RESET ONLY FOR SLIDER ELEMENTS
========================================================= */

.coinRangeSlider,
.coinRangeSlider *,
.coin_quantity_show,
.show_price_n_discount,
.show_price_n_discount *,
.add_to_cart_section,
.add_to_cart_section *,
.steps-2,
.steps-2 * {
  box-sizing: border-box !important;
}

/* =========================================================
   MAIN SLIDER WIDTH / POSITION
========================================================= */

.coinRangeSlider {
  width: min(100%, 790px) !important;
  max-width: 790px !important;
  margin: 42px auto 0 !important;
  padding: 0 12px !important;
  position: relative !important;
  text-align: center !important;
}

/* =========================================================
   JQUERY UI SLIDER LINE
========================================================= */

.coinRangeSlider .ui-widget,
.coinRangeSlider .ui-widget-content,
.coinRangeSlider .ui-slider,
.ui-slider-horizontal {
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.17) !important;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(247, 189, 61, 0.08) !important;
}

.coinRangeSlider .ui-slider-horizontal {
  position: relative !important;
}

/* Active selected line, if jQuery UI range is enabled */
.coinRangeSlider .ui-slider-range,
.coinRangeSlider .ui-widget-header {
  height: 4px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(90deg, var(--fcs-gold-dark) 0%, var(--fcs-gold) 55%, var(--fcs-gold-2) 100%) !important;
  box-shadow: 0 0 16px rgba(247, 189, 61, 0.42) !important;
}

/* Slider handle */
.ui-slider-horizontal .ui-slider-handle,
.coinRangeSlider .ui-slider-handle {
  width: 22px !important;
  height: 22px !important;
  top: -9px !important;
  margin-left: -11px !important;

  border-radius: 50% !important;
  border: 2px solid rgba(255, 230, 150, 0.95) !important;

  background:
    radial-gradient(circle at 34% 30%, #fff2a8 0%, var(--fcs-gold) 34%, var(--fcs-gold-dark) 70%, #8a5b08 100%) !important;

  box-shadow:
    0 0 15px rgba(247, 189, 61, 0.90),
    0 0 34px rgba(247, 189, 61, 0.34),
    inset 0 0 7px rgba(255, 255, 255, 0.42) !important;

  cursor: pointer !important;
  outline: none !important;
  z-index: 5 !important;
}

.ui-slider-horizontal .ui-slider-handle:hover,
.ui-slider-horizontal .ui-slider-handle:focus,
.coinRangeSlider .ui-slider-handle:hover,
.coinRangeSlider .ui-slider-handle:focus {
  transform: scale(1.06) !important;
  box-shadow:
    0 0 18px rgba(247, 189, 61, 1),
    0 0 42px rgba(247, 189, 61, 0.42),
    inset 0 0 7px rgba(255, 255, 255, 0.48) !important;
}

/* =========================================================
   TICK NUMBERS UNDER SLIDER
========================================================= */

.steps-2 {
  width: 100% !important;
  height: 46px !important;
  margin: 15px 0 0 !important;
  padding: 0 !important;
  position: relative !important;
  border: 0 !important;
}

.tick {
  position: absolute !important;
  top: 0 !important;
  left: 0;

  width: 58px !important;
  margin-left: -29px !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--fcs-white-2) !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.60) !important;
}

.tick::before {
  content: "" !important;
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  margin: -16px auto 13px !important;
  border-radius: 50% !important;
  background: var(--fcs-gold) !important;
  box-shadow: 0 0 11px rgba(247, 189, 61, 0.78) !important;
}

span.tick:first-child {
  margin-left: -7px !important;
}

span.tick:last-child {
  margin-left: -51px !important;
}

/* =========================================================
   SELECTED COIN AMOUNT BOX
   This is the box with value like "50k".
========================================================= */

.coin_quantity_show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: min(100%, 670px) !important;
  min-height: 54px !important;
  height: auto !important;

  margin: 34px auto 0 !important;
  padding: 13px 24px !important;

  position: relative !important;
  top: auto !important;

  border: 1.5px solid var(--fcs-border) !important;
  border-radius: 14px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255, 197, 66, 0.16) 0%, rgba(255, 197, 66, 0.04) 38%, rgba(255, 197, 66, 0) 68%),
    linear-gradient(180deg, rgba(7, 14, 22, 0.72) 0%, rgba(2, 7, 13, 0.92) 100%) !important;

  color: var(--fcs-gold) !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-align: center !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 122, 0.05),
    0 0 16px rgba(239, 181, 46, 0.16),
    inset 0 0 22px rgba(247, 189, 61, 0.05) !important;
}

.coin_quantity_show::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -1px !important;
  width: 120px !important;
  height: 1px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(90deg, rgba(247, 189, 61, 0), rgba(247, 189, 61, 0.95), rgba(247, 189, 61, 0)) !important;
  box-shadow: 0 0 14px rgba(247, 189, 61, 0.65) !important;
  pointer-events: none !important;
}

/* Compatibility if you later rename the selected amount box */
.selected-amount,
.coin_selected_amount,
.coin_amount_box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 670px) !important;
  min-height: 54px !important;
  margin: 34px auto 0 !important;
  padding: 13px 24px !important;
  border: 1.5px solid var(--fcs-border) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 197, 66, 0.16) 0%, rgba(255, 197, 66, 0.04) 38%, rgba(255, 197, 66, 0) 68%),
    linear-gradient(180deg, rgba(7, 14, 22, 0.72) 0%, rgba(2, 7, 13, 0.92) 100%) !important;
  color: var(--fcs-gold) !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-align: center !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 122, 0.05),
    0 0 16px rgba(239, 181, 46, 0.16),
    inset 0 0 22px rgba(247, 189, 61, 0.05) !important;
}

/* =========================================================
   PRICE / DISCOUNT ROW
========================================================= */

.show_price_n_discount {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;

  width: min(100%, 670px) !important;
  margin: 28px auto 0 !important;
  padding: 0 !important;

  position: relative !important;
  text-align: center !important;
}

.show_price_n_discount .show_price_n_item {
  float: none !important;
  width: 50% !important;
  padding: 0 18px !important;
  text-align: center !important;
}

.show_price_n_discount .show_price_n_item span.spntitle {
  display: block !important;
  margin: 0 0 11px !important;

  color: var(--fcs-muted) !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

.show_price_n_discount .show_price_n_item span.spnAmount {
  display: block !important;

  color: #ffffff !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: 0.25px !important;

  text-shadow: 0 0 11px rgba(255, 255, 255, 0.10) !important;
}

span.spnArrow {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;

  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;

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

  transform: translate(-50%, -20%) !important;
  pointer-events: none !important;
}

.spnArrow svg {
  width: 29px !important;
  height: 29px !important;
  fill: var(--fcs-gold) !important;
  filter: drop-shadow(0 0 8px rgba(247, 189, 61, 0.48)) !important;
}

.spnArrow svg path {
  fill: var(--fcs-gold) !important;
}

/* =========================================================
   ADD TO CART BUTTON
========================================================= */

.add_to_cart_section {
  display: block !important;
  width: 100% !important;
  margin: 34px auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.add_to_cart_section a.add_to_cart_btn,
.add_to_cart_section a.add_to_cart_btn:visited,
.add_to_cart_section a.add_to_cart_btn:active,
.add_to_cart_section button.add_to_cart_btn,
.add_to_cart_section button.add_to_cart_btn:active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 200px !important;
  height: 66px !important;
  min-height: 66px !important;
  padding: 0 38px !important;
  max-width: 100% !important;

  border: 1.5px solid rgba(247, 189, 61, 0.86) !important;
  border-radius: 16px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255, 197, 66, 0.14) 0%, rgba(255, 197, 66, 0.02) 45%, rgba(255, 197, 66, 0) 72%),
    linear-gradient(180deg, rgba(7, 14, 22, 0.82) 0%, rgba(2, 7, 13, 0.96) 100%) !important;

  color: var(--fcs-gold) !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;

  box-shadow:
    0 0 12px rgba(247, 189, 61, 0.34),
    inset 0 0 10px rgba(247, 189, 61, 0.12) !important;

  cursor: pointer !important;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease !important;
}

.add_to_cart_section a.add_to_cart_btn:hover,
.add_to_cart_section button.add_to_cart_btn:hover {
  transform: translateY(-1px) !important;
  border-color: #ffd36a !important;
  color: #ffd36a !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 213, 106, 0.18) 0%, rgba(255, 213, 106, 0.04) 45%, rgba(255, 213, 106, 0) 72%),
    linear-gradient(180deg, rgba(8, 14, 24, 0.92) 0%, rgba(2, 7, 13, 0.98) 100%) !important;
  box-shadow:
    0 0 18px rgba(247, 189, 61, 0.52),
    inset 0 0 12px rgba(247, 189, 61, 0.16) !important;
}

/* =========================================================
   OPTIONAL DISCLAIMER TEXT UNDER BUTTON
   These classes are safe. They work only if your HTML has them.
========================================================= */

.buy-note,
.fcs-buy-note,
.coinRangeSlider-note,
.fcs-slider-note {
  max-width: 670px !important;
  margin: 34px auto 0 !important;
  color: var(--fcs-muted) !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* =========================================================
   LEGACY RANGE-SLIDER SUPPORT
   This replaces the old grey commented .slider-container/.theme-green code.
   It is active but short and safe.
========================================================= */

.slider-container {
  width: min(100%, 790px) !important;
  margin: 42px auto 0 !important;
  padding: 0 12px !important;
  font-family: "Poppins", Arial, sans-serif !important;
}

.slider-container .back-bar,
.theme-green .back-bar,
.theme-blue .back-bar {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.17) !important;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(247, 189, 61, 0.08) !important;
  position: relative !important;
}

.slider-container .back-bar .selected-bar,
.theme-green .back-bar .selected-bar,
.theme-blue .back-bar .selected-bar {
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--fcs-gold-dark) 0%, var(--fcs-gold) 55%, var(--fcs-gold-2) 100%) !important;
  box-shadow: 0 0 16px rgba(247, 189, 61, 0.42) !important;
}

.slider-container .back-bar .pointer,
.theme-green .back-bar .pointer,
.theme-blue .back-bar .pointer {
  width: 22px !important;
  height: 22px !important;
  top: -9px !important;
  margin-left: -11px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 230, 150, 0.95) !important;
  background:
    radial-gradient(circle at 34% 30%, #fff2a8 0%, var(--fcs-gold) 34%, var(--fcs-gold-dark) 70%, #8a5b08 100%) !important;
  box-shadow:
    0 0 15px rgba(247, 189, 61, 0.90),
    0 0 34px rgba(247, 189, 61, 0.34),
    inset 0 0 7px rgba(255, 255, 255, 0.42) !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

.slider-container .back-bar .pointer-label {
  top: -39px !important;
  min-width: 38px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  background: rgba(5, 10, 16, 0.86) !important;
  color: var(--fcs-gold) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: 0 0 14px rgba(247, 189, 61, 0.18) !important;
}

.slider-container .scale {
  top: 16px !important;
  position: relative !important;
}

.slider-container .scale span,
.theme-green .scale span,
.theme-blue .scale span {
  height: 0 !important;
  border-left: 0 !important;
}

.slider-container .scale span::before,
.theme-green .scale span::before,
.theme-blue .scale span::before {
  content: "" !important;
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  margin: -20px 0 13px -2px !important;
  border-radius: 50% !important;
  background: var(--fcs-gold) !important;
  box-shadow: 0 0 11px rgba(247, 189, 61, 0.78) !important;
}

.slider-container .scale ins,
.theme-green .scale ins,
.theme-blue .scale ins {
  top: 0 !important;
  color: var(--fcs-white-2) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.60) !important;
}

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

@media (min-width: 768px) and (max-width: 1024px) {
  .coinRangeSlider,
  .slider-container {
    width: min(100%, 700px) !important;
  }

  .coin_quantity_show,
  .show_price_n_discount,
  .selected-amount,
  .coin_selected_amount,
  .coin_amount_box {
    width: min(100%, 620px) !important;
  }
}

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

@media only screen and (max-width: 767px) {
  .coinRangeSlider,
  .slider-container {
    width: 100% !important;
    max-width: 430px !important;
    margin-top: 30px !important;
    padding: 0 18px !important;
  }

  .ui-slider-horizontal .ui-slider-handle,
  .coinRangeSlider .ui-slider-handle,
  .slider-container .back-bar .pointer,
  .theme-green .back-bar .pointer,
  .theme-blue .back-bar .pointer {
    width: 20px !important;
    height: 20px !important;
    top: -8px !important;
    margin-left: -10px !important;
  }

  .steps-2 {
    height: 38px !important;
    margin-top: 12px !important;
  }

  .tick {
    width: 44px !important;
    margin-left: -22px !important;
    font-size: 12px !important;
  }

  .tick::before {
    width: 4px !important;
    height: 4px !important;
    margin: -15px auto 10px !important;
  }

  span.tick:first-child {
    margin-left: -4px !important;
  }

  span.tick:last-child {
    margin-left: -40px !important;
  }

  .coin_quantity_show,
  .selected-amount,
  .coin_selected_amount,
  .coin_amount_box {
    width: calc(100% - 36px) !important;
    min-height: 50px !important;
    margin-top: 26px !important;
    padding: 12px 18px !important;
    font-size: 20px !important;
    border-radius: 13px !important;
  }

  .show_price_n_discount {
    width: calc(100% - 36px) !important;
    margin-top: 24px !important;
  }

  .show_price_n_discount .show_price_n_item {
    padding: 0 10px !important;
  }

  .show_price_n_discount .show_price_n_item span.spntitle {
    margin-bottom: 8px !important;
    font-size: 14px !important;
  }

  .show_price_n_discount .show_price_n_item span.spnAmount {
    font-size: 26px !important;
  }

  span.spnArrow {
    width: 28px !important;
    height: 28px !important;
  }

  .spnArrow svg {
    width: 23px !important;
    height: 23px !important;
  }

  .add_to_cart_section {
    margin-top: 28px !important;
  }

  .add_to_cart_section a.add_to_cart_btn,
  .add_to_cart_section button.add_to_cart_btn {
    min-width: 180px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 32px !important;
    font-size: 18px !important;
    border-radius: 15px !important;
  }

  .buy-note,
  .fcs-buy-note,
  .coinRangeSlider-note,
  .fcs-slider-note {
    width: calc(100% - 36px) !important;
    margin-top: 28px !important;
    font-size: 14px !important;
  }

  .slider-container .scale ins,
  .theme-green .scale ins,
  .theme-blue .scale ins {
    font-size: 12px !important;
  }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media only screen and (max-width: 374px) {
  .tick {
    font-size: 11px !important;
  }

  .show_price_n_discount .show_price_n_item span.spnAmount {
    font-size: 23px !important;
  }

  .add_to_cart_section a.add_to_cart_btn,
  .add_to_cart_section button.add_to_cart_btn {
    min-width: 165px !important;
    height: 54px !important;
    min-height: 54px !important;
    font-size: 17px !important;
  }
}