@import "vars";
@import "pages/terms";
@import "pages/referral";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary);
  color:            var(--text-primary);
  font-family:      "Inter", sans-serif;
  min-height:       100vh;
  overflow-x:       hidden;
  position:         relative;
}

#prices-page {
  --circle-size: 95vw;
  --circle-mask-gradient-top: 50%;
  
  &::after {
    content:         '';
    position:        fixed;
    left:            50%;
    transform:       translateX(-50%);
    top:             calc(var(--circle-size) * -0.5);
    width:           var(--circle-size);
    height:          var(--circle-size);
    background:      radial-gradient(
      circle closest-side,
      var(--bg-primary) 72%,
      var(--accent-primary-light) 100%
    );
    --mask:          linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 0) var(--circle-mask-gradient-top)
    ); 
    mask:            var(--mask);
    -webkit-mask:    var(--mask);
    border-radius:   50%;
    z-index:         0;
    pointer-events:  none;
  }

  //&::before {
  //  content:         '';
  //  position:        fixed;
  //  left:            50%;
  //  transform:       translateX(-50%);
  //  top:             calc(var(--circle-size) * -0.5);
  //  width:           var(--circle-size);
  //  height:          var(--circle-size);
  //  border-image: var(--accent-primary-gradient);
  //  border-width: 20%;
  //  background:      radial-gradient(
  //    circle closest-side,
  //    var(--bg-primary) 72%,
  //    var(--accent-primary-light) 100%
  //  );
  //  border-radius:   50%;
  //  z-index:         0;
  //  pointer-events:  none;
  //}
}

#prices-page .orange-spheres {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background-image: 
    radial-gradient(circle at 15% 20%, var(--orange-sphere) 0.4vw,   transparent 0.5vw),
    radial-gradient(circle at 85% 25%, var(--orange-sphere) 0.3vw,   transparent 0.4vw),
    radial-gradient(circle at 45% 15%, var(--orange-sphere) 0.2vw,   transparent 0.3vw),
    radial-gradient(circle at 75% 35%, var(--orange-sphere) 0.4vw,   transparent 0.5vw),
    radial-gradient(circle at 25% 45%, var(--orange-sphere) 0.3vw,   transparent 0.4vw),
    radial-gradient(circle at 65% 55%, var(--orange-sphere) 0.2vw,   transparent 0.3vw),
    radial-gradient(circle at 35% 65%, var(--orange-sphere) 0.4vw,   transparent 0.5vw),
    radial-gradient(circle at 55% 75%, var(--orange-sphere) 0.3vw,   transparent 0.4vw),
    radial-gradient(circle at 85% 65%, var(--orange-sphere) 0.2vw,   transparent 0.3vw),
    radial-gradient(circle at 15% 75%, var(--orange-sphere) 0.4vw,   transparent 0.5vw),
    radial-gradient(circle at 25% 85%, var(--orange-sphere) 0.2vw,   transparent 0.3vw),
    radial-gradient(circle at 75% 85%, var(--orange-sphere) 0.3vw,   transparent 0.4vw),
    radial-gradient(circle at 95% 45%, var(--orange-sphere) 0.2vw,   transparent 0.3vw),
    radial-gradient(circle at 5% 55%,  var(--orange-sphere) 0.4vw,   transparent 0.5vw),
    radial-gradient(circle at 95% 15%, var(--orange-sphere) 0.3vw,   transparent 0.4vw),
    radial-gradient(circle at 5% 25%,  var(--orange-sphere) 0.2vw,   transparent 0.3vw),
    radial-gradient(circle at 65% 5%,  var(--orange-sphere) 0.4vw,   transparent 0.5vw),
    radial-gradient(circle at 35% 5%,  var(--orange-sphere) 0.2vw,   transparent 0.3vw),
    radial-gradient(circle at 45% 95%, var(--orange-sphere) 0.3vw,   transparent 0.4vw),
    radial-gradient(circle at 85% 95%, var(--orange-sphere) 0.2vw,   transparent 0.3vw);
  background-size: 
    48vw 48vw,
    40vw 40vw,
    32vw 32vw,
    44vw 44vw,
    36vw 36vw,
    28vw 28vw,
    52vw 52vw,
    34vw 34vw,
    30vw 30vw,
    38vw 38vw,
    42vw 42vw,
    46vw 46vw,
    24vw 24vw,
    56vw 56vw,
    26vw 26vw,
    50vw 50vw,
    54vw 54vw,
    22vw 22vw,
    58vw 58vw,
    60vw 60vw;

  --mask-size: 55vw;
  
  mask: radial-gradient(
    circle at 50% 0%,
    rgba(0, 0, 0, 1) var(--mask-size),
    transparent var(--mask-size)
  );
  -webkit-mask: radial-gradient(
    circle at 50% 0%,
    rgba(0, 0, 0, 1) var(--mask-size),
    transparent var(--mask-size)
  );
}

@keyframes float-spheres {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translateY(-10px) rotate(90deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-5px) rotate(180deg);
    opacity: 0.9;
  }
  75% {
    transform: translateY(-15px) rotate(270deg);
    opacity: 0.7;
  }
}

/* + scrollbar */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  margin: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-main-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--main-main-dark);
}

/* - scrollbar */

.custom-input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.custom-input {
  flex: 1;
  width: 100%;
  background-color: var(--input-bg);
  border: 2px solid var(--input-border);
  border-radius: 16px;
  padding: 18px 20px;
  padding-right: 60px; // Space for the right icon
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 20px var(--shadow-dark),
    inset 0 1px 0 var(--shadow-light);
  
  &::placeholder {
    color: var(--text-muted);
    font-weight: 400;
  }
  
  &:hover {
    border-color: var(--input-border-hover);
    background-color: var(--input-bg-hover);
    box-shadow: 
      0 6px 25px var(--shadow-darker),
      inset 0 1px 0 var(--shadow-medium);
  }
  
  &:focus {
    outline: none;
    border-color: var(--main-main-light) 1;
    background-color: var(--input-bg-focus);
    box-shadow: 
      0 0 0 4px var(--main-main-light),
      0 8px 30px var(--shadow-darkest),
      inset 0 1px 0 var(--shadow-medium);
    transform: translateY(-1px);
  }
}

.left-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: var(--input-bg);
  border: 2px solid var(--input-border);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  
  &:hover {
    background-color: var(--input-bg-hover);
    border-color: var(--input-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px var(--shadow-dark);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.button-icon {
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
}

.button-text {
  font-weight: 600;
  color: var(--text-muted);
}

.icon-button {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  padding: 6px;
  
  &:hover {
    color: var(--text-muted);
    background-color: var(--input-bg);
    transform: translateY(-50%) scale(1.05);
  }
  
  &:active {
    transform: translateY(-50%) scale(0.95);
  }
}

input.custom-input:-webkit-autofill,
input.custom-input:-webkit-autofill:hover,
input.custom-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

input.custom-input:-moz-autofill {
  box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
  -moz-text-fill-color: var(--text-muted) !important;
}

#home-center-card {
  @extend #prices-page;
  position: relative;
  overflow: hidden;
  --circle-size: 40vw; // Override the size for card context
  
  &::before,
  &::after {
    position: absolute; // Override fixed positioning for card context
  }
  
  &::before {
    top: calc(var(--circle-size) * -0.75); // Move up by half (was -0.5, now -0.75)
  }
  
  &::after {
    top: calc(var(--circle-size) * -1.25); // Move up by half (was -1, now -1.25)
  }
}

#hero-accent-section {
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

#hero-simple-section {
  position: relative;
  overflow: visible;
  z-index: 1;
  
  &::before {
    content: '';
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: -1;
    mix-blend-mode: overlay;
  }
  
  &::after {
    content: '';
    position: absolute;
    width: clamp(100px, 15vw, 164px);
    height: clamp(100px, 15vw, 164px);
    left: calc(50% - clamp(50px, 7.5vw, 82px));
    top: calc(-10vh);
    background: rgba(255, 249, 247, 0.95);
    filter: blur(clamp(80px, 15vw, 164px));
    z-index: -1;
  }
  
  .hero-visual-left-1 {
    position: absolute;
    width: clamp(80px, 12vw, 143.54px);
    height: clamp(400px, 60vh, 805.26px);
    left: calc(10vw);
    top: calc(-20vh);
    background: rgba(255, 249, 247, 0.95);
    filter: blur(clamp(25px, 4vw, 53.8738px));
    transform: matrix(0.87, -0.49, 0.36, 0.93, 0, 0);
    z-index: -1;
    pointer-events: none;
  }
  
  .hero-visual-left-2 {
    position: absolute;
    width: clamp(90px, 14vw, 167.94px);
    height: clamp(420px, 62vh, 829.99px);
    left: calc(25vw);
    top: calc(-15vh);
    background: rgba(255, 249, 247, 0.95);
    filter: blur(clamp(25px, 4vw, 53.8738px));
    transform: rotate(-25.02deg);
    z-index: -1;
    pointer-events: none;
  }
  
  .hero-visual-center {
    position: absolute;
    width: clamp(90px, 14vw, 167.94px);
    height: clamp(420px, 62vh, 829.99px);
    left: calc(48vw);
    top: calc(-20vh);
    background: rgba(255, 249, 247, 0.95);
    filter: blur(clamp(25px, 4vw, 53.8738px));
    transform: rotate(-25.02deg);
    z-index: -1;
    pointer-events: none;
  }
  
  .hero-visual-right {
    position: absolute;
    width: clamp(80px, 12vw, 143.54px);
    height: clamp(400px, 60vh, 805.26px);
    left: calc(75vw);
    top: calc(-18vh);
    background: rgba(255, 249, 247, 0.95);
    filter: blur(clamp(25px, 4vw, 53.8738px));
    transform: matrix(0.87, -0.49, 0.36, 0.93, 0, 0);
    z-index: -1;
    pointer-events: none;
  }
  
  > * {
    position: relative;
    z-index: 2;
  }
}

.responsive-blur {
  transition: all 0.3s ease-in-out;
  
  @media (max-width: 768px) {
    filter: blur(clamp(15px, 3vw, 35px)) !important;
    opacity: 0.8;
  }
  
  @media (max-width: 480px) {
    filter: blur(clamp(10px, 2vw, 25px)) !important;
    opacity: 0.6;
  }
}

.premium-label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 1px 6px 3px;
  gap: 10px;
  
  width: 47px;
  height: 22px;
  
  background: linear-gradient(180deg, #FF5011 0%, #FF4400 100%);
  box-shadow: 0px 0px 54px #FF4400;
  border-radius: 6px;
  
  /* Typography */
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-align: center;
  line-height: 1;
  
  /* Layout */
  flex: none;
  order: 1;
  flex-grow: 0;
}

//.text-style-h1 {
//  @apply text-[48px] font-bold text-text-primary mb-5 text-center;
//  text-shadow: 2px 2px 4px var(--text-shadow);
//}

.profile-nav-item {
  &:hover:not(.active) {
    background: var(--other-light-20) !important;
  }
}

a.button {
  border-radius: 14px;
  background-color: var(--main-light-80);
  padding: 14px;
  color: var(--main-dark-text);
}

#proxy-types ul > li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 22px;
  color: var(--main-light-40);
}

#proxy-types ul {
  list-style-image: url(/checkmark.svg);
  list-style-position: inside;
  margin-top: 24px;
}

#proxy-types h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}

#proxy-types > * {
  flex: 1;
}

#prices-selector > div {
  flex: 1;
}

#prices-selector > div.selected {
  background-color: red;
}

#prices-slider-progress {
  background: var(--other-light-5);
  border-radius: 4px;
  width: 30%;
  margin: 0 auto;
}

#prices-slider-progress-bar {
  position: relative;
  background: var(--other-light-60);
  transition: all 200ms ease;
  width: 64px;
  height: 8px;
  border-radius: 4px;
}

#prices-slider .splide__slide > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 14px;
  padding: 24px;
  width: 100%;

  aspect-ratio: 1/1;
}

#prices-slider .splide__slide > div > * {
  margin: 0 auto;
}

.splide__track {
  margin: 32px 0;
}

.slide__current_price {
  color: var(--main-light-40);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}

.slide__discounted_price {
  color: var(--other-light-20);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  vertical-align: super;
  margin-left: 4px;
}

#simple-hero-shading {
  background-image: url('/proxy-bg-shading.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: calc(50% - 60vh);
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  opacity: 0.1;
  filter: blur(40px);
}

#home-center-card__planet,
#home-center-card__planet__shading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100%;
}

#home-center-card__planet {
  background-image: url('/profile-planet-bg.svg');
  background-color: black;
  z-index: -1;
}

#home-center-card__planet__shading {
  background-image: url('/profile-planet-shading.svg');
  mix-blend-mode: overlay;
  z-index: -1;
}

.selector {
  display: flex;
}

.selector button:nth-of-type(1) {
  border-radius: 0.75rem 0 0 0.75rem;
}

.selector button:nth-last-of-type(1) {
  border-radius: 0 0.75rem 0.75rem 0;
}

.selector button {
  background-color: var(--other-light-5); 
  color: var(--main-light-40);
  gap: 10px;
  flex: 1;
  height: 46px;
  font-weight: 600;
  line-height: 22px;
  border: none;
  cursor: pointer;
  transition: color;
  transition: background-color;
}

.selector button.selected {
  background-color: var(--main-light-80); 
  color: var(--main-dark-text);
}

.selector button:not(.selected):hover {
  background-color: var(--other-light-20);
  color: var(--other-light-60);
}


#parameters-button:hover {
  color: var(--other-light-60);
  background-color: var(--other-light-20);
  border-color: transparent;
}

#sidebar-nav > .profile-nav-item {
  padding: 0.75rem;
  border-radius: 0.75rem;
  color: var(--text-muted)
}

#sidebar-nav > .profile-nav-item.active {
  box-shadow: var(--shadow-medium);
  background: var(--other-lg-active-elements);
  color: var(--main-dark-text);
}

#format-dropdown {

}

// Pricing slider styles
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  user-select: none;
  cursor: grab;
  
  &::-webkit-scrollbar {
    display: none;
  }
  
  &:active {
    cursor: grabbing;
  }
}

.progress-bar {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
  
  &:hover {
    background: rgba(255, 249, 247, 0.1);
  }
}

#privacy-page__content {
  line-height: 1.8em;
  h3 {
    font-size: 1.2em;
    font-weight: 700;
    margin-top: 1em;
  }
}

#terms-page__content {
  line-height: 1.8em;
  h3 {
    font-size: 1.2em;
    font-weight: 700;
    margin-top: 1em;
  }
}

///////////////////////////////////////////////////////////////////////////////

.custom-container {
  //max-w-[1380px] mx-auto px-12 w-full relative z-[1] 
  padding: 16px;
  width: full;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

#hero-accent-section {
  background-size: 200%;
  background-position-x: 50%;
  background-position-y: calc(50% - 52vh);
  background-color: var(--bg-primary);
  background-image: url('/bg-planet.svg');
  background-repeat: no-repeat;
}

#accent-background-overlay {
  background-image: url('/bg-shading.svg');
  background-repeat: no-repeat;
  background-size: 200%;
  mix-blend-mode: overlay;
}

#hero-accent-content {
  padding-top: 50vh;
  padding: 50vh 16px 0 16px;
}

#hero-accent-content > * {
  margin: 0 auto;
}

#hero-accent-content > span {
  margin-top: 24px;
}

#hero-buy-traffic-button {
  width: 100%;
  margin-top: 92px;
}

#telegram-bot-card {
  padding: 0;
  margin-top: 100px;
}

@font-face {
  font-family: "Twemoji";
  src: url("/Twemoji.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.flag-emoji {
  font-family: 'Twemoji', sans-serif;
}

@media (min-width: 1024px) {
  #telegram-bot-card { 
    padding: 2.5rem; 
  }
}

#telegram-bot-card > div {
  flex-direction: column-reverse;
}

#telegram-bot-card > div > div {
  padding: 24px;
}

#telegram-bot-card a {
  margin-top: 32px;
}

#proxy-types {
  overflow-x: scroll;
}

#proxy-types > * {
  flex: 0 0 80%;
}

#full-control-block {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 24px;
  margin-top: 92px;
}

#full-control-block div:nth-child(1) {
  color: var(--text-primary);
  font-size: 36px;
  line-height: 42px;
  font-weight: 700;
}

#full-control-block div:nth-child(2) {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 22px;
}

#ip-pool-card {
  padding: 0;
}

@media (min-width: 1024px) {
  #ip-pool-card {
    padding: 2.5rem; 
  }
}

#ip-pool-card > div{
  flex-direction: column-reverse;
}

#ip-pool-card a{
  margin-top: 32px;
}

#prices-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

footer {
  flex-direction: column;
  background: var(--other-dark-80);
  width: 100%;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  border-radius: 16px 16px 0 0;
  margin: 0 auto;
}

#footer-logo {
  display: flex;
  flex-direction: row;
  margin: 28px auto;
}

#footer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 5px auto;
  text-align: center;
}

#mobile-menu-overlay {
  top: 4rem;
}

#mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;

  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  transition: display 300ms ease-in-out;

  &.open {
    display: block;
  }

  &.closed {
    display: none;
  }

}

#mobile-menu-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#mobile-navigation-links {
  margin-top: 20px;
  width: fit-content;
  color: var(--text-muted);
}

#login-button {
  display: block;
  text-align: center;
}

#desktop-navigation {
  align-items: center;
}

#mobile-menu-panel #login-button {
  padding: 14px 0;
  border-radius: 14px;
  width: 100%;
  margin-top: auto;
}

#main-header {
  z-index: 100;
  background: var(--bg-primary);
  border: none;
  border-radius: 0;
  padding: 1.25rem 3rem;
  display: flex;
  justify-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px var(--shadow-darker);
  width: 100%;

  &.fixed {
    position: fixed;
  }
  position: relative;
}

#server-region-section button {
  min-width: fit-content;
  height: 46px;
}

#payment-method-dropdown-section {
  display: none;
}

@media (min-width: 640px) {
  #hero-accent-section {
    background-position-y: calc(50% - 58vh);
  }
}

@media (min-width: 768px) {
  #hero-accent-content {
    padding: 0 16px;
  }

  #hero-accent-content h1 {
    width: 60%;
  }

  #hero-accent-content h1 + span {
    width: 50%;
  }

  #hero-buy-traffic-button {
    width: 50%;
    margin-top: 48px;
  }

  #proxy-types > * {
    flex: 0 0 40%;
  }

  #prices-selector {
    display: flex;
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  // .custom-container {
  //   max-width: 1000px;
  // }

  #hero-accent-section {
    background-size: 100%;
    background-position-y: calc(50% - 45vh);
  }

  #full-control-block {
    flex-direction: row;
    align-items: center;
    padding: 0 40px;
  }

  #telegram-bot-card > div {
    flex-direction: row;
  }

  #main-header {
    align-items: center;
  }

  #ip-pool-card > div {
    flex-direction: row;
  }

  #ip-pool-card a {
    margin-top: auto;
  }

  #proxy-types {
    overflow-x: hidden;
  }

  #proxy-types > * {
    flex: 1;
  }

  #main-footer {
    flex-direction: row;
    padding: 24px 32px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  #main-footer #footer-logo {
    margin: 0;
  }

  #main-footer #footer-links {
    flex-direction: row;
    height: fit-content;
    margin: auto 0;
  }
}

@media (min-width: 1280px) {
  .custom-container {
    max-width: 1180px;
  }

  #hero-accent-content {
    padding-top: 70px;
  }

  #hero-accent-content > h1 {
    width: 30%;
  }

  #hero-accent-content > span {
    width: 30%;
  }

  #hero-accent-content > button {
    width: 25%;
  }

  #main-footer {
    width: 1000px;
  }
}

@media (min-width: 1536px) {
  .custom-container {
    max-width: 1380px;
  }

  #hero-accent-content {
    padding-top: 90px;
  }

  #main-footer {
    width: 1380px;
  }
}

///////////////////////////////////////////////////////////////////////////////

@media (max-width: 640px) {
  #proxy-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  #payment-method-dropdown-section {
    display: block;
  }

  #proxy-info-container {
    width: 100%;
  }

  #payment-methods-container {
    display: none;
  }
}

@media (max-width: 1024px) {
  #dashboard-sidebar-card {
    width: 100%;
    margin-top: 16px;
  }

  #dashboard-container {
    flex-direction: column-reverse;
  }

  #dashboard-container #two-column-container {
    flex-direction: column;
  }

  #dashboard-container #two-column-container > {
    width: 100%
  }

  #dashboard-container #two-column-container #first-column {
    width: 100%;
    background: var(--main-linear-light-10);
    border-radius: 14px;
  }

  #dashboard-container #two-column-container #second-column {
    width: 100%;
  }

  #dashboard-container #two-column-container #usage-statistics-card {
    display: none;
  }

  #action-buttons-container {
    margin-top: 20px;
  }

  #api-card {
    max-width: unset;
    width: 100%;
  }

  #home-center-card__planet {
    display: none;
  }

  #sidebar-profile {
    margin-bottom: 0;
  }

  #sidebar-profile > #profile-info-card {
    display: none;
  }

  #proxy-pools-title {
    display: none;
  }

  #dashboard-card {
    margin-top: -50px;
  }

  #location-settings {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  #pool-tabs {
    flex-direction: column;
  }

  #protocol-type-section {
    flex-direction: column;
  }

  #asn-section {
    flex-direction: column;
  }
}

@media (max-width: 1280px) {
}

@media (max-width: 1536px) {
}
