@font-face {
  font-family: Stolzl;
  src: url("fonts/Stolzl.4e85d39cdaa4.otf") format('opentype');
}

*,
*::before,
*::after {
  box-sizing: border-box;
} 

* {
  margin: 0;
  padding: 0;
  outline: 0;
  /*appearance: none; removing default browser styles for elements like buttons*/
  border: 0;
  text-decoration: none;
  list-style: none;
} 

/* Root Variable */
:root {
  --color-background: #14161F;

  --box-border-color-accent: #E99A35;
  --box-border-weight: #E99A35;
  --box-border-radius: 1.5rem;
  --box-border-radius-light: 1rem;
  --box-border-radius-heavy: 3rem;
  --box-border: 0.75px solid #4F4F51; /* ???? */
  --box-color-1: #1F1F31;
  --box-color-2: #28283B;
}

html {
  font-size: 14px;
}

body {
  width: 100vw; /* 100vh vw helps avoid scroll bars and helps with responsiveness*/
  height: 100vh;
  font-family: Stolzl, sans-serif;
  font-size: 0.88rem;
  background: var(--color-background);
  user-select: none;
  overflow-x: hidden;
  color: var(--color-font);
}

main {
  margin: 0 auto;
  grid-area: main;
  margin-top: 1rem;
  overflow-y: auto;
}

p {
  font-size: 1.15rem;
  font-weight: 100;
}

h1 {
  font-size: 1.7rem; 
  font-weight: bold;
}

h2 {
  font-size: 1.4rem; 
  font-weight: bold;
}

/*======================= REGISTER - START =====================*/

.product-steps {
  height: 100px;
  background: var(--box-color-2);
  color: white;

}

.master-product {
  display: grid;
  grid-template-rows: 50px 300px; 
  grid-template-areas:
    "product-head" 
    "product-main";
  margin-left: 200px;
  margin-right: 200px;
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  padding: 2rem;



}

.product-head {

}

.product-select {
  display: flex;
  justify-content: space-evenly;
}


/*======================= REGISTER - END =====================*/


/*======================= PAYMENT - START ====================*/

.master-new {
  display: grid;
  grid-template-rows: 6rem 1fr; 
  grid-template-areas:
    "new-top"
    "new-main";
  margin: auto;
  width: 41rem;
  
}

.new-top {
  grid-area: new-top;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-areas:
    "new-1 new-2 new-3";


  text-align: left;
  font-size: 1rem;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.new-step {
  font-size: 0.8rem;
  color: grey;
}

.new-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--box-color-2);
  border: 2px solid green;
  border-radius: var(--box-border-radius-light);
  height: 100%;
  padding: 0.5rem;
  align-items: center;

}



.new-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--box-color-2);
  border-radius: var(--box-border-radius-light);
  height: 100%;
  padding: 0.5rem;
  opacity: 35%;
  align-items: center;

}

.new-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--box-color-2);
  border-radius: var(--box-border-radius-light);
  height: 100%;
  padding: 0.5rem;
  opacity: 35%;
  align-items: center;
}




.new-main {
  grid-area: new-main;
  display: grid;
  grid-template-rows: 1fr 2fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-areas:
    "new-title" 
    "new-select"
    "new-logo" 
    "new-size-head"
    "new-size"
    "new-flex"
    "new-flex"
    "new-flex"
    "new-flex"
    "new-price"
    "new-buton";

  background: var(--box-color-2);
  border: var(--box-border);
  border-radius: var(--box-border-radius);

  text-align: center;
  padding: 2rem;
  font-size: 1.1rem;
  gap: 1rem;
  height: 45rem;
}

.new-select {
  display: flex;
  justify-content: space-evenly;
  height: 4.5rem;
  align-items: center;
  gap: 0.5rem;
  color: #F2F2F2;
  margin-bottom: 2rem;
}

.new-select > * {
 

  border-radius: 1rem;
  padding: 1rem;
  opacity: 80%;
  background: #222236;
}

.new-select > *:hover {
  background: #18182B;
}

.new-select-inner {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.new-select-inner:hover {
  cursor: pointer;
}

.new-select-inner.active {
    background: green;
    font-weight: bold;
    border: var(--box-border);
    opacity: 100%;
}

.new-logo {
  color: white;
  height: 3.5rem;
  align-items: center;
}

.new-size-head {
  font-size: 1.8rem;
}

.new-size {
  margin-bottom: 1.25rem;
}

.new-price {
  display: flex;
  font-size: 3rem;
  color: var(--box-border-color-accent);
  font-weight: bold;
  justify-content: center;
  gap: 0.3rem;
}

.new-price span {
  font-size: 1rem;
  color: var(--box-border-color-accent);
  font-weight: bold;
  vertical-align: top;
  line-height: 2.2;
}


.new-button {
  margin-top: 0.5rem;
  color: white;
  border-radius: var(--box-border-radius-light);
  width: 100px;
  height: 45px;
  margin: auto;
  font-size: 1.1rem;
  background: #b0b0b0;
}

.new-button:hover {
  background: #d3d3d3;
}

.new-flex {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  gap: 0.5rem;
  color: white;
  font-size: 1.75;
}


.new-flex i {
  color: green;
  font-size: 1.5rem;

}


/*======================= PAYMENT - END ======================*/



/*======================= CHECKOUT - START ===================*/

.master-checkout-top {
  height: 18rem;
  background: var(--box-color-1);
  z-index: 5;
}

.desktop-top {
  display: flex;
  margin: 0rem auto;
  width: 75rem;
  padding: 2rem 0rem 1rem 0rem;
  border-bottom: 1px solid #48485B;
}

.desktop-top img {
  width: 11rem;
  filter: invert(100%);
}

.master-checkout {
  display: flex;
  width:75rem;
  gap: 2rem;
  justify-content: space-evenly;
  margin: -7rem auto 0rem auto;
  z-index: 10;

}

.master-checkout > * {
  flex: 50%; /* Make each item take equal space */
}

.bill-select-master-title {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: var(--box-color-2);
}

.billing-grid {
  border: 0.1rem solid grey;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border-radius: 0.8rem;
  padding: 2rem 3.25rem;
  background: white;


}

.billing-select {
  display: grid;
  grid-template-rows: 70px auto;
  grid-template-areas: 
    "bill-top"
    "bill-bottom";
  border-radius: var(--box-border-radius);
  order: 2px solid #4F4F51;
  color: black;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 2px solid #4F4F51;
  background: #F2F2F2;


}

.bill-select-inner-title {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.bill-product-select {
  display: flex;
  font-size: 1rem;
  gap: 1rem;
  color: black;
  margin-bottom: 4rem;
  flex-wrap: wrap;


}

.bill-product-select > * {
  width: 6.5rem; /* Make each item take equal space */
  height: 3rem;
  text-align: center;
  align-content: center;
}

.active1 {
  background: var(--box-border-color-accent);
  border: 1px solid #E99A35;
  color: black;
}

.bill-product-select > * {
  border: 0.75px solid #808080;

  border-radius: 0.5rem;
}

.bill-product-select > *:hover {
  background: var(--box-border-color-accent);
  border: 0.75px solid #E99A35;
}



.bill-declare {
  font-size: 1rem;
  gap: 1rem;
}

.declare-1 {
  display: flex;
  margin-bottom: 0.5rem;
  gap: 1rem;
}

input[type="checkbox"] {
  color: var(--box-border-color-accent);
  background: var(--box-border-color-accent);
}

.declare-1 span {
  color: var(--box-border-color-accent);
}

.bill-select-main {

  

}



.bill-select-title {
  grid-area: bill-top;
  border-top-left-radius: var(--box-border-radius);
  border-top-right-radius: var(--box-border-radius);
  color: white;
  background: var(--box-color-1);
  padding: 1.5rem;
  font-size: 1.3rem;
}

.billing-title {
  border-top-left-radius: var(--box-border-radius);
  border-top-right-radius: var(--box-border-radius);
  grid-area: billing-top;
  color: white;
  background: var(--box-color-1);
  padding: 1.5rem;
  font-size: 1.3rem;
}

.billing-main {
  grid-area: billing-bottom;
  background: white;
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 2.75fr 1fr 2.75fr 2.75fr 2.75fr auto 2fr auto;
  grid-template-areas: 
    "bill-first bill-last"
    "bill-first-input bill-last-input"
    "bill-email bill-country"

    "bill-email-input bill-country-input"

    "declare declare"

    "declare2 declare2"
    "warning warning"
    "line line"
    "bill-button bill-button";
  
  font-size: 1.1rem;
  gap: 1rem;
  align-items: flex-end;


}

.bill-email span, .bill-first span, .bill-last span, .bill-street span, .bill-country span, .bill-city span{
  color: red;
}

.bill-input::placeholder  {
  color: lightgray;
}



.bill-input {
  border: 2px solid #E0E0E0;
  color: black;
  border-radius: 0.7rem;
  padding:0.5rem 0.5rem 0.5rem 1rem;
  font-weight: 100;
  height: 100%;
  font-size: 1.1rem;
  align-content: center;
  width: 100%;

}

.bill-input:hover {
  border: 1.5px solid #E99A35;
}

.bill-title{
  grid-area: bill-title;
  align-items: baseline;
}

.bill-email{
  grid-area: bill-email;
  align-items: start;
}

.bill-phone{
  grid-area: bill-phone;
}

.bill-street {
  grid-area: bill-street;
}

.bill-street-input {
  grid-area: bill-street-input;

}

.bill-country {
  grid-area: bill-country;
}

.bill-country-input {
  grid-area: bill-country-input;
}

.bill-zip {
  grid-area: bill-zip;
}

.bill-zip-input {
  grid-area: bill-zip-input;
}

.line {
  grid-area: line;
  background-color: #E6E6FA; /* Light purple color */
  height: 1px; /* Adjust the height to control line thickness */
}


.bill-button-flex {
  grid-area: bill-button;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.bill-button1 {
  background: white;
  border: var(--box-border);
  color: black;
  border-radius: 0.75rem;
  height: 3.5rem;
  width: 9rem;
  margin-top: 2rem;
  font-size: 1.1rem;
  justify-self: end;
}

.bill-button {
  background: var(--box-border-color-accent);
  color: var(--box-color-2);
  border-radius: 0.75rem;
  height: 3.5rem;
  width: 9rem;
  margin-top: 2rem;
  font-size: 1.1rem;
  justify-self: end;
}

.declare {
  grid-area: declare;
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}

.declare2 {
  grid-area: declare2;
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}

.declare span, .declare2 span{
  color: red;
}

.warning {
  grid-area: warning;
  display: flex;
  gap: 2rem;
  border: 0.75px solid #142867;
  padding: 1.25rem;
  border-radius: 0.8rem;
  font-size: 1rem;
  margin-top: 2rem;
  background: #F5FAFF;
  align-items: center;
}

.warning i {
  color: #142867;
}

.warning-inner {

}


.bill-button:hover, .bill-button1:hover {
  cursor: pointer;

}





.checkout-right {
  grid-area: check-right;
  /* background: var(--box-color-1); */


}

.check-right-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: white;
}

.orderbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas: 
    "order-right order-right"
    "order-a order-b"
    "order-c order-d"
    "order-e order-f";

  height: 200px;
  padding: 1rem 2rem;
  margin-bottom: 1.75rem;
  align-items: center;
  font-size: 1.25rem;

  color: black;

  color: grey;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.orderbox > * {

}

.order-icon {
  grid-area: order-left;

}


.order-b {
  justify-self: right;
}

.order-d {
  justify-self: right;
}

.order-f {
  justify-self: right;
}

.order-des {
  grid-area: order-right;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  gap: 0.5rem;
  border-bottom: var(--box-border);
  padding-bottom: 1rem;

}

.order-info{
  grid-area: order-info;
  display: flex;
  font-size: 1.5rem;
  padding: 0rem 1rem;
  gap: 2rem;
}

.order-info-2 {
  grid-area: order-info-2;
  display: flex;
  font-size: 1.1rem;
  padding: 0rem 1rem;
  gap: 2rem;
}

.order-price{
  grid-area: order-price;
}

.check-right-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  padding: 0rem 1rem;

}

.order-des-1 {
  font-size: 1.5rem;
  color: white;
}

.order-des-2 {
  color: var(--box-border-color-accent);
}

.checkout-right-inner {
  height: 32rem;
  border: var(--box-border);
  border-radius: 0.8rem;
  background: var(--box-color-1);
  padding: 2rem;

  /*background-size: cover;  Adjust as needed: cover, contain, etc. */
  /*background-position: center center;  Adjust as needed */
  /*background-repeat: no-repeat;*/

}

.check-right-total-title {
  color: white;
  font-weight: bold;
  font-size: 1.8rem;
}

.check-right-total-amount {
  color: var(--box-border-color-accent);
  font-weight: bold;
  font-size: 1.8rem;
}

.email-error {
  
  display: block;
  flex-direction: row;
  gap: 0.5rem;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10; /* Adjust this value if needed */
  width: 20rem;
  height: 4.5rem;
  background: #D65745;
  color: white;
  /*border: 2px solid red;*/
  font-weight: 200;
  border-radius: 0.3rem;

  align-items: center;
  padding-left: 1rem;
  transition: transform 0.3s ease-in-out;
  transform: translate(-130%);
}

.email-error.visible {
  transform: translate(0);
}

.email-error i, .field-error i {
  color: white;
  line-height: 0.5;

}

.field-error {
  display: block;
  flex-direction: row;
  gap: 0.5rem;
  position: fixed;
  top: 6rem;
  left: 1rem;
  z-index: 10; /* Adjust this value if needed */
  width: 20rem;
  height: 4.5rem;
  background: #D65745;
  color: white;
  /*border: 2px solid red;*/
  font-weight: 200;
  border-radius: 0.3rem;
  align-items: center;
  padding-left: 1rem;
  transition: transform 0.3s ease-in-out;
  transform: translate(-130%);
}

.field-error.visible {
  transform: translate(0);
}

/*======================= CHECKOUT - END ===========================*/

/*======================= LOGIN - START ============================*/


.form-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content min-content min-content min-content min-content min-content min-content;
  grid-template-areas: 
    "log-logo log-logo"
    "log-title log-title"
    "log-email log-email"
    "log-email-input log-email-input"
    "log-forgot log-forgot"
    "log-button log-button"
    "log-reg log-reg";
  background: var(--box-color-1);
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  height: 38rem;
  width: 30rem;
  margin: 5rem auto 10rem;
  align-items: center;

  color: #F0F0F0;
  font-size: 1.25rem;
  padding: 2.1rem;
}

.form-container img {
  width: 12rem;
  filter: invert(100%);
  margin-bottom: 2rem;
}

.log-logo {
  grid-area: log-logo;
  align-items: center;
  margin-bottom: 3rem;
  margin-top: 3rem;
}

.log-title {
  grid-area: log-title;
  margin-bottom: 2rem;
}

.log-inputs {
  grid-area: log-email-input;

}

.log-button {
  grid-area: log-button;
  margin-bottom: 1rem;
}

.log-button {
  border: var(--box-border);
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  background: var(--box-border-color-accent);
  font-size: 1.1rem;
  color: white;
}

.log-button:hover {
  background-color: #F0B46B;
}

.log-forgot {
  grid-area: log-forgot;
  font-size: 0.9rem;
  justify-self: center;
  align-items: start;
  margin-bottom: 2.5rem;
  color: #E0E0E0;
}

.log-forgot:hover {
  color: white;
}

.log-email, .log-pass {
  font-size: 1rem;
}

.log-email {
  grid-area: log-email;
}
.log-reg {
  grid-area: log-reg;

  padding: 0.8rem 1rem;
  border-radius: 0.6rem;

  font-size: 1rem;
  justify-self: center;
  color: #F0F0F0;
}

.log-reg:hover {
  color: var(--box-border-color-accent);
}

.floating-label input {
    width: 360px;
  }

.floating-label label.active {
  opacity: 0; /* Faded opacity */
}

.log-email-error {
  
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10; /* Adjust this value if needed */
  width: 20rem;
  height: 4.5rem;
  background: #D65745;
  color: white;
  /*border: 2px solid red;*/
  font-weight: 200;
  border-radius: 0.3rem;

  align-items: center;
  padding-left: 1rem;
  transition: transform 0.4s ease-in-out;
  transform: translate(-130%);
}

.log-email-error.visible {
  transform: translate(0);
}

.log-email-error i {
  color: white;
  line-height: 0.5;

}
/*======================= LOGIN - END ============================*/

/*======================= RESET - START ==========================*/


.reset-container {
  display: grid;
  grid-template-rows: repeat(7, auto);
  background: var(--box-color-1);
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  height: auto;
  width: 30rem;
  margin: 5rem auto 10rem;
  align-items: center;
  color: #D9D9D9;
  font-size: 1.8rem;
  padding: 2.4rem;
  gap:1rem;
}

.reset-container img {
  width: 12rem;
  color: grey;
  filter: invert(100%);

}

.reset-logo {
  margin-bottom: 3rem;
  font-size: 1rem;
}

.reset-title {
  margin-bottom: 1.25rem;
}

.reset-content-1 {
  font-size: 1rem;
  color: #D9D9D9;
}

.reset-content-2 {
  font-size: 0.9rem;
  font-weight: 100;
  margin-bottom: 1.25rem;
  color: #BDBDBD;
}

.reset-content-3 {
  font-size: 0.8rem;
}

input[type="email"] {
  width: 100%; /* Set width to full width */
  padding: 10px;
  border: 1px solid #ccc; /* Light gray border */
  border-radius: 5px; /* Rounded corners */
}

.reset-button {
  border: var(--box-border);
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  background: var(--box-border-color-accent);
  font-size: 1.1rem;
  color: white;
  width: 100%;
  margin-top: 1.5rem;
}

.reset-button:hover {
  background-color: #F0B46B;
}

.reset-back {
  font-size: 1rem;
  justify-self: center;
  color: #D9D9D9;
}

/*======================= RESET - END ==============================*/

/*======================= RESET FORM - START =======================*/

.reset-container-form {
  display: grid;
  grid-template-rows: repeat(6, auto);
  background: var(--box-color-1);
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  height: auto;
  width: 30rem;
  margin: 5rem auto 10rem;
  align-items: center;
  color: #D9D9D9;
  font-size: 1.8rem;
  padding: 2.4rem;
  gap:0.5rem;
}

.reset-hint {
  font-size: 0.9rem;
  color: #F8F8F8;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.reset-options {
  display: flex;
  gap: 0.5rem;

}

.reset-pass-2 {
  margin-top: 1rem;
  font-size: 0.8rem;
  align-items: baseline;
}

input[type="password"] {
  width: 100%; /* Set width to full width */
  padding: 10px;
  border: 1px solid #ccc; /* Light gray border */
  border-radius: 5px; /* Rounded corners */
}

/*======================= RESET FORM - END ========================*/

/*======================= SUCCESS - START =========================*/

.master-success-container {
  display: grid;
  hieght: 50rem;
  weight: 50rem;
  border: var(--box-border);
  margin: 0 auto;
}



/*======================= SUCCESS - END ===========================*/

.reset-container-done {
  display: grid;
  text-align: center;
  grid-template-rows: repeat(4, auto);
  background: var(--box-color-1);
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  height: auto;
  width: 40rem;
  margin: 5rem auto 10rem;
  align-items: center;
  color: #D9D9D9;
  font-size: 1.8rem;
  padding: 2rem 8rem;
  gap:0.5rem;
}

.reset-container-done i {
  font-size: 6rem;
  color: green;
}

.reset-done {
  margin-top: 2rem;
  font-size: 1rem;
  justify-self: center;
  color: #D9D9D9;
  padding: 1rem 2rem;
  background: var(--box-border-color-accent);
  border-radius: 0.6rem;
}

.pass-sent-container {
  display: grid;
  text-align: center;
  grid-template-rows: repeat(4, auto);
  background: var(--box-color-1);
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  height: auto;
  width: 35rem;
  margin: 5rem auto 10rem;
  align-items: center;
  color: #D9D9D9;
  font-size: 1.8rem;
  padding: 3rem 3rem;
  gap:1rem;
}

.pass-sent-logo {
  margin-bottom: 2rem;
}

.pass-sent-container i {
  font-size: 6rem;
}

.pass-sent-title {
  font-size: 1.4rem;
}

.pass-sent-email {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.pass-sent-text {
  font-size: 0.9rem;
  color: #C0C0C0;
}


/*======================= T&C - START ===========================*/


.terms-top {
  height: 400px;
  background: var(--box-color-1);

}

.terms-flex-top {
  height: 100%;
  font-size: 3rem;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}





.terms-container {
  padding: 8rem 6rem;
  border-radius: var(--box-border-radius);
  background: ;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1);
  margin: 6rem;
  color: black;
  font-size: ;
}

.privacy-container {
  padding: 2rem;
  border-radius: var(--box-border-radius);
  border: var(--box-border);
  background: var(--box-color-2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1);
  margin: 3rem;
  color: white;
}

/*======================= T&C - END ===========================*/

.payout-master {
  grid-area: main;
  max-width: 85rem;
}

.slide-out-grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  align-items: center;

}

.slide-out-grid-USDT {
  display: none;
  grid-template-rows: 1.25fr 1fr 1.25fr 1fr ;
  align-items: center;
  margin-top: 2rem;

}

.slide-out-grid-USDC {
  display: none;
  grid-template-rows: 1.25fr 1fr 1.25fr 1fr ;
  align-items: center;
  margin-top: 2rem;

}

.slide-out-grid-BankTransfer {
  display: none;
  grid-template-rows: 1.25fr 1fr 1.25fr 1fr 1.25fr 1fr 1.25fr 1fr;
  align-items: center;
  margin-top: 2rem;
}

.slide-out-grid-Wise {
  display: none;
  grid-template-rows: 1.25fr 1fr 1.25fr 1fr 1.25fr 1fr;
  align-items: center;
  margin-top: 2rem;
}

.show-grid {
  display: grid; /* Show the grid when the class is added */
}

.payout-slideout {
   /* add display: none; */
  position: fixed;
  top: 0;
  right: -600px;
  bottom: 0;
  width: 600px; /* Adjust the width as needed */
  padding: 2rem;
  background-color: #fff;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
  /*transform: translateX(100%);*/
  transition: transform 0.3s ease-in-out;
  z-index: 999;
  color: #444444;
  font-size: 1.25rem;
  transition: right 0.5s ease-in-out;

  @media (max-width: 768px) {
    width: 100%; /* Full width */
    right: -100%; /* Slide in from the right */

  }
}

.show-slideout {
  right: 0; /* Slide in from the right */
}

.slideout-title-flex {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.slideout-title-flex i {
  color: grey;
  margin-top: 0.3rem;


}

.slide-title {
  font-size: 1.4rem;
  font-weight: bold;
}

.slide-out-line {
  height: 1px;
  background-color: #E6E6FA;
}

.slide-withdraw-text {

  font-size: 1.1rem;

}

.slide-withdraw-text span {
  font-weight: bold;
  color: black;
}

.slide-method span {
  color: red;
}

.slide-method-input {
  padding-left: 1rem;
  border-radius: 0.75rem;
  border: var(--box-border);
  height: 3rem;
  color: #444444;
  font-size: 1.25rem;
}

.slide-method-input:hover {
  border: 0.75px solid orange; /* 0.75px solid ##444444 */
}

.slideout-button-flex {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
}

.payout-submit {
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: bold;
  background: var(--box-border-color-accent);
  font-size: 1.1rem;
}

.payout-cancel {
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: bold;
  font-size: 1.1rem;
  background: white;
  border: var(--box-border);

}

.payout-title {
  margin-top: 2rem;
  font-size: 1.6rem;
  margin-bottom: 2rem;
  color: #F5F5F5;

}

.payout-ready-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--box-border-radius);
  border: var(--box-border);
  background: var(--box-color-1);

  padding: 2rem 3rem 2rem 2rem;
  align-items: center;
  margin-bottom: 2rem;
  color: #F5F5F5;
}

.left-1 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.left-2 {
  font-size: 1rem;
  color: #B0B0B0;
}

.payout-button {
  padding: 1rem;
  border-radius: 0.5rem;
  float: right;
  background: var(--box-border-color-accent);
  color: #F5F5F5;


}

.payout-button:hover {
  background-color: #F0B46B;
}
.payout-title-2 {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

.payout-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, 19.5rem);
  grid-template-rows: repeat(auto-fit, 20rem);
  gap: 2rem;
  height: auto;
  color: white;
  margin-bottom: 3rem;
}


.pay-out-grid {
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  background: var(--box-color-1);
  padding: 2rem 1rem;
  align-items: center;
  text-align: center;
  height: 20rem;
  color: #CCCCCC;
  font-size: 1.1rem;

}

.pay-out-grid .flaticon-checklist{
  font-size: 2.5rem;
  color: var(--box-border-color-accent);
}

.pay-out-grid .flaticon-clock{
  font-size: 2.5rem;
  color: grey;
}

.payout-main-amount{
  font-size: 1.5rem;
  color: var(--box-border-color-accent);

}



.payout-request-error {
  display: none;
  gap: 1rem;
  align-items: center;

  font-size: 1.25rem;
  justify-content: center;
  color: grey;
  margin-bottom: 2rem;
  
}

.payout-request-error i {
  margin-top: 0.5rem;
}

.payout-request-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  background: var(--box-color-1);
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  height: auto;
  width: 35rem;
  margin: 5rem auto 10rem;
  align-items: center;
  color: #D9D9D9;
  font-size: 1.2rem;
  padding: 3rem 3rem;
  gap:1rem;
}

.request-button {
  border: var(--box-border);
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  background: var(--box-border-color-accent);
  font-size: 1.1rem;
  color: white;
  width: 40%;
  margin-top: 1.5rem;
  margin: 0 auto;
}

.request-done {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  background: var(--box-color-1);
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  height: auto;
  width: 35rem;
  margin: 5rem auto 10rem;
  align-items: center;
  color: #D9D9D9;
  font-size: 1.2rem;
  padding: 3rem 3rem;
  gap:1rem;
}

/*======================= PAYMENT SUCCESS - START ===========================*/




.pay-success-container {
  display: flex;
  flex-direction: column;
  height: 15rem;
  width: 32rem;
  background: ;
  border: ;
  border-radius: ;
  margin: 8rem auto;

  justify-content: space-evenly;
  text-align: center;
  gap: 1rem;
  align-items: center;
  color: #F5F5F5;
  font-size: 2rem;

}

.pay-success-container img {
  width: 12rem;
  filter: invert(100%);
}

.pay-success-container .flaticon-checked-1 {
  font-size: 4rem;

}

.pay-success-title {
 

}

.pay-success-text {
  color: #E5E5E5;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.pay-success-text2 {
  color: #E5E5E5;
  font-size: 1rem;
  align-items: center;
  margin-bottom: 2rem;
}

.pay-success-button {
  border: var(--box-border);
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  background: var(--box-border-color-accent);
  font-size: 1.1rem;
  color: white;
  width: 40%;
  margin-top: 1.5rem;
  margin: 0 auto;
}

.pay-success-button:hover {
  background-color: #F0B46B;
}

.pay-out-grid {
  display: grid;
  grid-template-columns: 4fr;
}


/*================== MEDIA START =================*/


@media only screen and (max-width: 768px) {
  main .payout-ready-container {
    grid-template-columns: 1fr;
    width: 32rem;
  }

  .payout-button {
    float: none;

  }

  .payout-main {
    grid-template-columns: repeat(auto-fit, 15rem);
  }

  .payout-ready-container {
    height: 20rem;
  }

}

@media only screen and (max-width: 768px) {


  body .master-checkout-top{
    display: none;
  }

  html body .master-checkout {
    flex-direction: column-reverse;
    width: 33rem;
    margin: 0 auto;
  }


}


@media only screen and (max-width: 768px) {

  .terms-top .terms-flex-top {
    font-size: 2.5rem;

  }

  body .terms-bottom .terms-container {
    margin: 1rem;

  }

}


@media only screen and (max-width: 1024px) {

  body .master-checkout {
    flex-direction: column-reverse;
    width: 45rem;
  }

  .master-checkout-top .desktop-top {
    width: 45rem;
  }

}

@media only screen and (max-width: 1024px) {
  .terms-bottom .terms-container {
    padding: 2rem;

  }
}

/*================== MEDIA END =================*/