/* HERE CSS FOR CARD FORM AND USER INFOS FORM */
/* CSS USER PAYMENT FORM */
section.cart_page {
  padding: 3vmax 3.8vmin 10vmax !important;
}
/* PUIRCHASE ITEMS */
.purchase {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid #ddd;
  overflow: hidden;
  overflow-wrap: break-word;
  padding: 10px;
  margin: 0 auto 1rem;
  width: 100%;
}
.puchase_container {
  display: flex;
  justify-items: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.block_title_price {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.6rem;
}
.purchase>.product_img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.product_img>img {
  max-width: 200px;
  border-radius: 4px;
}
.product_title_price {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-evenly;
}
.purchase .product_title {
  align-self: flex-start;
  font-size: var(--text-large);
  font-weight: 400;
}
.block_quant_unit_price {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.5rem;
  line-height: 2ch;
}
.purchase_quantity {
  font-size: var(--text-large);
  font-weight: 400;
  align-self: flex-start;
}
.buttons_cart_item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.btns_purchase {
  line-height: 2ch;
  width: 45px;
  height: 40px;
  padding: 0.01em !important;
  font-size: var(--text-large) !important;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.purchase .suppr_item {
  margin-right: 16px;
  background: var(--dark-gray) !important;
  color: var(--white-dim) !important;
}
.quant_button_group {
  background: var(--back-button);
  color: var(--white);
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.render_quant {
  display: inline-block;
  font-size: var(--text-large);
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
  min-width: 4ch;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.render_sub {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: end;
  line-height: 2ch;
  gap: 0.2rem;
  font-size: var(--text);
  font-weight: 400;
  margin-top: 0.1rem;
}
.purchase_footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: 2ch;
  overflow-wrap: break-word;
  padding: 0 10px;
  width: 100%;
  margin: 0 auto;
  font-size: var(--text-large);
  font-weight: 400;
}
.total_order {
  font-weight: 500;
}
@media all and (max-width: 700px) {
  .block_title_price {
    flex-direction: column;
  }
  .product_img>img {
    max-width: inherit;
    width: 100%;
    border-radius: 4px;
  }
  .product_title_price {
    align-items: flex-start;
    gap: 0.6rem;
  }
  .block_quant_unit_price {
    gap: 0.4rem;
  }
  .render_sub {
    gap: 0.4rem;
    align-items: flex-start;
  }
  .purchase_footer {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
}
/* DELIVERY FORM */
input[name="post_code"],
input[name="post_code_sup"] {
  width: 120px !important;
}
i.checkbox {
  color: var(--color-theme);
  font-size: 36px !important;
  vertical-align: sub;
}
section.section_pages.cart_page h3 {
  margin: 2rem 0 1rem !important;
}
button#btn_form_payment {
  font-size: var(--text-large);
}
#form_payment input,
#form_payment textarea,
#form_payment select {
  width: 94% !important;
  margin: 0 0 10px;
  min-height: 40px;
  height: 40px;
  border-radius: 4px;
}
#form_payment {
  margin: 3vmax 0 0;
  font-size: var(--text-large);
  font-weight: 400;
}
label.label_input {
  margin: 0 0 2px 2px;
  display: inline-block;
  font-size: var(--text-large);
  font-weight: 400;
}
label[role="radio"],
label[role="checkbox"] {
  font-size: var(--text-large);
  font-weight: 400;
}
/* CSS CARD MODAL CONTAINER */
#card_form {
  padding: 1rem;
  background: var(--bkg-content);
  border-radius: 4px;
  font-size: var(--text-large);
  color: var(--color-text);
  margin-bottom: 100px;
}
#card_form section.form_card_header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    min-height: inherit;
    padding: 0;
    column-gap: 0.25rem;
}
#card_form img#logo_shop {
    width: 100px;
}
#card_form h2 {
    color: var(--color-title-shop);
    font-weight: 600;
    font-size: 36px;
}
#card_form p {
    font-size: var(--text-large);
    font-weight: 500;
}
#card_form i.secure_icon {
    color: var(--dark-green);
    font-size: var(--text-xxlarge);
}
#card_form .separator {
  height: 2px;
  background: var(--back-button);
  margin: 16px auto;
  width: 98%;
}
#card_container {
    width: 360px;
    margin: 0 auto;
    font-size: var(--text-large);
    font-weight: 500;
}
#card_form label {
    margin: 0 0 4px 2px;
    display: inline-block;
    max-width: 170px;
    overflow-wrap: anywhere;
}
#card-number-element,
#card-expiry-element,
#card-cvc-element {
    user-select: text;
    padding: 6px 10px 5px;
    border: 2px solid #888888;
    margin: 0 0 10px 0;
    border-radius: 4px;
    background: #ffffff;
    outline: 2px solid transparent;
    font-size: 20px;
}
#card-number-element:focus,
#card-expiry-element:focus,
#card-cvc-element:focus {
  outline: 2px solid var(--dark-green);
}
#card_number {
  width: 270px;
  max-width: 270px;
}
#card_exp {
  width: 170px;
  max-width: 170px;
}
#card_cvc {
  width: 100px;
  max-width: 100px;
}
#card-number-element {
  width: 270px;
}
#card-expiry-element {
  width: 120px;
}
#card-cvc-element {
  width: 96px;
}

#card-errors {
    color: orangered;
    margin: -1rem 0 0;
    display: none;
}

#buttons_card {
    width: 375px;
    margin: 2rem auto 1rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1rem;
}
.container_card_buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}
button#submit_card,
button#destroy_card {
    font-size: var(--text-large);
    color: var(--text-button);
    font-weight: 500;
}
button#submit_card > .amount {
    letter-spacing: 0.5px;
}
button#destroy_card {
    letter-spacing: 0.5px;
    background-color: var(--mid-gray);
}
#render_pay_work {
  display: none;
}

/* @media querys 768px  */
@media all and (max-width: 768px) {
  #card_form section.form_card_header {
    justify-content: flex-start;
    column-gap: 0;
  }
  #card_form img#logo_shop {
    width: 80px;
  }
  #card_form h2 {
    font-size: 34px;
  }
  #card_form p.center {
    text-align: left !important;
    margin: 1rem auto 0 !important;
  }
  #card_number {
    width: 100%;
    max-width: inherit;
  }
  #card-number-element {
    width: 240px;
  }
  #card_container {
    width: 97%;
  }
  #buttons_card {
    width: 97%;
  }
}
/* end  CSS FOR CARD FORM */