:root {
  /*
  --color-brand-500:#BA8749;
  --color-brand-600:#9E743F;
  */

  --color-brand:33 45%;
  --color-neutral:0 0%;
  --color-danger:hsl(0 95% 70%);

  --border-radius-sm: 2px;
}

* {
  margin:0;padding:0;
  box-sizing:border-box;
}
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.hidden {
  display:none !important;
}
.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;
}

body {
  background-color:hsl(var(--color-neutral) 0%);
  color:hsl(var(--color-neutral) 100%);
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height:1.5;
  &.modal-open {
    overflow:hidden;
  }
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom:0.5rem;
  color:hsl(var(--color-brand) 90%);
  font-weight:400;
  letter-spacing:1px;
}
h1 {
  font-size:1.5rem;
}
h2 {
  margin:0;
  font-size:1rem;
  letter-spacing:4px;
  text-transform:uppercase;
}

.lang-switcher {
  display:flex;
  justify-content:space-between;
  padding:1rem;
}

main, footer {
  --gutter:1rem;
  max-width:calc(660px + var(--gutter));
  margin:0 auto;
  padding:0 var(--gutter);
}

.giftcard-hero {
  padding:32px 0 64px;
}
.hero-content {
  display:flex;
  flex-flow:column;
  align-items:center;
  justify-content:flex-start;
}
.hero-tagline,
.hero-sub {
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:5px;
}
.hero-tagline {
  color:hsl(var(--color-brand) 40%);
}
.hero-sub {
  color:hsl(var(--color-neutral) 100%);
}
.hero-logo-svg {
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  margin-top:36px;
  svg {
    max-width:300px;
    height:auto;
  } 
}

.page-header {
  margin-bottom:32px;
}
.giftcard-page-sub {
  margin-bottom:1rem;
}
.giftcard-page-small {
  margin-top:-0.5rem;
  color:hsl(var(--color-neutral) 70%);
  font-size:14px;
}

button {
  cursor:pointer;
}
.learn-more-btn {
  display:inline-flex;
  gap:0.5rem;
  align-items:baseline;
  border-width:0;
  background-color:transparent;
  padding:0;
  color:hsl(var(--color-brand) 50%);
  text-transform:uppercase;
  font-size:12px;
  .btn-ico {
    font-size:14px;
  }
}
.remove-row {
  position:absolute;
  top:1.5rem;right:1.5rem;
  @media(max-width:486px) {
    bottom:0.5rem;
    top:unset;
  }
}
.remove-giftcard-btn {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  border-width:0;
  background:transparent;
  color:hsl(var(--color-brand) 50%);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.btn-ghost {
  padding:0;
  background:transparent;
  font-size:inherit;
  color:hsl(var(--color-brand) 50%);
  border-width:0;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  letter-spacing:2px;
}
.homepage-cta {
  text-decoration:none;
  font-size:12px;
  text-transform:uppercase;
}
.section-card {
  margin-bottom:1.5rem;
}
.sec-label {
  display:flex;
  align-items:center;
  white-space:nowrap;
  gap:14px;
  margin-bottom:20px;
  &:after {
    content:'';
    display:flex;
    height:1px;
    flex:1 1 calc(100% );
    background-color:hsl(var(--color-brand) 50%);
  }
  @media(max-width:468px) {
    padding-bottom:0.5rem;
    white-space:normal;
    font-size:16px;
    /*border-bottom:1px solid hsl(var(--color-brand) 50%);*/
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, transparent, hsl(var(--color-brand) 50%)) 1;

    &:after {
      display:none;
    }
  }
}
.slider-field {
  display:flex;
  flex-flow:column;
  gap:1.5rem;
  label {
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:600;
  }
}
.slider-field__row {
  display:flex;
  gap:1rem;
  align-items:center;
}
.slider-field__limit {
  font-size:12px;
  flex:1 1 auto;
}
.slider-field__track {
  display:flex;
  flex:1 1 100%;
  input {
    width:100%;
  }
}
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  --track-fill: 0%;
  background: linear-gradient(
    to right,
    hsl(var(--color-brand) 50%) var(--track-fill),
    hsl(var(--color-neutral) 15%) var(--track-fill)
  );
  height:20px;
  border-radius:1rem;
  outline:none;
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width:32px;height:32px;
    background-color:hsl(var(--color-brand) 50%);
    border-radius:50%;
    border:2px solid hsl(var(--color-neutral) 100%);
    cursor:pointer;
  }
  &::-moz-range-thumb {
    width:32px;height:32px;
    background-color:hsl(var(--color-brand) 50%);
    border-radius:50%;
    border:2px solid hsl(var(--color-neutral) 100%);
    cursor:pointer;
  }
}
.slider-value {
  color:hsl(var(--color-brand) 50%);
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:1px;
  text-align:center;
}

#giftcard-items {
  display:flex;
  gap:1.5rem;
  flex-flow:column;
}
.giftcard-item {
  position:relative;
  display:flex;
  flex-flow:column;
  gap:1.5rem;
  padding:1.5rem;
  background-color:hsl(var(--color-neutral) 10%);
  border-radius:var(--border-radius-sm);
  @media(max-width:486px) {
    padding-bottom:4rem;
  }
}
.giftcard-item--results {
  .giftcard-item__row {
    display:flex;
    flex-flow:column;
    gap:1.5rem;
  }
}
.giftcard-item__cta {
  display:flex;
  justify-content:flex-end;
  .btn-ghost {
    font-size:12px;
    text-transform:uppercase;
    text-decoration:none;
  }
}
.giftcard-item__brand {
  display:block;
  max-width:194px;
  margin:0 auto;
}
.giftcard-item__recipient {
  display:flex;
  flex-flow:column;
  justify-items:center;
  gap:0.5rem;
  text-align:center;
}
.giftcard-item__fullname {
  color:#B0AAA0;
  text-transform:uppercase;
  font-weight:700;
  font-size:14px;
  letter-spacing:2px;
}
.giftcard-item__email {
  font-size:14px;
}
.giftcard-item__value {
  color:hsl(var(--color-brand) 50%);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:1px;
  text-align:center;
}

.recipient-type {
  border-width:0;
  legend {
    margin-bottom:1rem;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:hsl(var(--color-neutral) 66%);
    font-weight:600;
  }
}
.recipient-type__choices {
  display:flex;
  gap:2rem;
  label {
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:2px;
    cursor:pointer;
    input {
      margin-right:12px;
    }
  }
}
.recipient-email-container {
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem 2rem;
  &.hidden {
    display:none;
  }
}

#add-giftcard {
  display:inline-flex;
  height:42px;
  margin-top:20px;
  padding:0 18px;
  gap:0.5rem;
  align-items:center;
  justify-content:center;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:hsl(var(--color-neutral) 100%);
  background-color:transparent;
  border:1px dashed hsl(var(--color-brand) 50%);
  font-weight:400;
  .add-giftcard-ico {
    font-size:14px;
  }
}

input[type=radio] {
  width:20px;height:20px;
  border:1px solid hsl(var(--color-brand) 50%);
  background-color:hsl(var(--color-neutral) 100%);
  appearance: none;
  border-radius:50%;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  transition:background-color 0.3s ease-in-out;
  cursor:pointer;
  &::before {
    content:'';
    display:block;
    width:8px;height:8px;
    background-color:hsl(var(--color-neutral) 90%);
    border-radius:50%;
    transition:background-color 0.3s ease-in-out;
  }
  &:checked {
    background-color:hsl(var(--color-brand) 50%);
      ::before {
        background-color:hsl(var(--color-neutral) 100%);
      }    
  }
}

input[type=checkbox] {
  display:inline-flex;
  align-items:center;
  justify-content: center;
  appearance: none;
  width:20px;height:20px;
  background-color:hsl(var(--color-neutral) 100%);
  border:1px solid hsl(var(--color-brand) 50%);
  border-radius:var(--border-radius-sm);
  cursor:pointer;
  transition:background-color 0.3s ease-in-out;
  &::before {
    content:'';
    display:block;
    width:10px;height:10px;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2598 0.114047C10.5176 0.278109 10.5645 0.629672 10.4004 0.887484L4.21289 9.51248C4.0957 9.65311 3.95508 9.72342 3.79102 9.74686C3.62695 9.74686 3.46289 9.69998 3.3457 9.5828L0.158203 6.3953C-0.0527344 6.18436 -0.0527344 5.80936 0.158203 5.59842C0.369141 5.38748 0.744141 5.38748 0.955078 5.59842L3.67383 8.31717L9.48633 0.231234C9.65039 -0.0265781 10.002 -0.0734531 10.2598 0.114047Z' fill='white'/%3E%3C/svg%3E%0A");
  }
  &:checked {
    background-color:hsl(var(--color-brand) 50%);
  }
}
.checkbox-row {
  display:flex;
  gap:0.5rem;
  align-items:baseline;
  label {
    cursor:pointer;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
  }
}

.form-grid {
  display:flex;
  flex-wrap:wrap;
  padding:1.5rem;
  gap:1.5rem 2rem;
  background-color:hsl(var(--color-neutral) 10%);
  border-radius:var(--border-radius-sm);
}
.form-field {
  flex:1 1 calc(50% - 2rem);
  label {
    display:block;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:2px;
    cursor:pointer;
    span {
      color:hsl(var(--color-brand) 50%);
    }
    .has-error & {
      color:var(--color-danger);
    }
  }
  @media(max-width:468px) {
    flex:1 1 100%;
  }
}
.form-field__help {
  margin-top:0.5rem;
  font-size:14px;
  color:hsl(var(--color-neutral) 70%);
}
.errorlist {
  margin-top:0.5rem;
  list-style:none;
  font-size:14px;
  color:var(--color-danger);
}

input[type=text], input[type=tel], input[type=email], textarea {
  width:100%;
  height:52px;
  padding:0 12px;
  font-size:14px;
  font-weight:600;
  border-width:0;
  letter-spacing:1px;
  background-color:transparent;
  color:hsl(var(--color-neutral) 80%);
  border-bottom:1px solid hsl(var(--color-neutral) 60%);
  border-radius:var(--border-radius-sm);
  transition:all 0.3s ease-in-out;
  outline:none;
  &:focus {
    border-color:hsl(var(--color-brand) 50%);
    background-color:hsl(var(--color-neutral) 15%)
  }
}
.legal-address-field {
  flex:1 1 100%;
}
textarea {
  width:100%;
  height:14ch;
  padding:12px;
}

.company-card {
  padding:1.5rem;
  background-color:hsl(var(--color-neutral) 10%);
  border-radius:var(--border-radius-sm);
  h3 {
    text-transform:uppercase;
    font-size:14px;
    font-weight:600;
    margin-bottom:1.5rem;
  }
}
.submit-row {
  margin-top:2rem;
}
.btn-primary {
  width:100%;
  height:56px;
  display:inline-flex;
  background-color:hsl(var(--color-brand) 50%);
  color:hsl(var(--color-neutral) 0%);
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  border-width:0;
  align-items:center;
  justify-content:center;
  transition:background-color 0.3s ease-in-out;
  text-decoration:none;
  &:hover {
    background-color:hsl(var(--color-brand) 40%);
  }
}
.btn-secondary {
  padding:8px 12px;
  border-radius:var(--border-radius-sm);
  border:1px solid hsl(var(--color-brand) 50%);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:hsl(var(--color-brand) 50%);
  background-color:transparent;
}

.modal-overlay {
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background-color:hsl(var(--color-neutral) 0%);
  z-index:999;
  align-items:center;
  justify-content:center;
  margin-top:3rem;
  &.flex {
    display:flex;
  }
}
.modal {
  position:relative;
  max-width:660px;
  max-height:100vh;
  overflow:auto;
  padding:1rem;
  background-color:hsl(var(--color-neutral) 0%);
}
.modal__header {
  position:relative;
  height:3rem;
}
.modal__close {
  position:absolute;
  top:0;right:0;
  display:inline-flex;
  gap:0.5rem;
  align-items:center;
  background:transparent;
  border-width:0;
  color:hsl(var(--color-brand) 50%);
  text-transform:uppercase;
  font-size:12px;
  font-weight:500;
  padding:0.5rem;
  svg {
    width:1rem;
    height:1rem;
  }
}
.modal__title {
  font-size:24px;
}
.modal__content {
  p, ul {
    margin-bottom:1rem;
    font-size:14px;
  }
}
.modal__body {
  section {
    margin-bottom:2rem;
  }
}

.modal-steps {
  display:flex;
  flex-flow:column;
  gap:1.5rem;
  margin:0;padding:0;
  list-style:none;
}
.modal-step {
  display:flex;
  gap:1rem;
}
.modal-step__title {
  font-weight:400;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:2px;
}
.modal-step__text {
  color:hsl(var(--color-neutral) 70%);
}

.condition-card {
  padding:1.5rem;
  background-color:hsl(var(--color-neutral) 10%);
  border-radius:var(--border-radius-sm);
}
.condition-card__header {
  display:flex;
  gap:0.5rem;
  margin-bottom:1rem;
}
.condition-card__title {
  font-size:14px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
}
.condition-card__text {
  font-size:14px;
  color:hsl(var(--color-neutral) 70%);
}

footer {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  margin-top:3rem;
  padding-bottom:2rem;
  gap:1.5rem;
  color:hsl(var(--color-neutral) 70%);
  font-size:14px;
  .legal {
    flex:1 1 100%;
    text-align:center;
    color:hsl(var(--color-neutral) 100%);
    font-size:16px;
  }
}