/* component.css */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts-3by.pages.dev/poppins-v21-latin/poppins-v21-latin-regular.woff2")
    format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("https://fonts-3by.pages.dev/poppins-v21-latin/poppins-v21-latin-500.woff2")
    format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("https://fonts-3by.pages.dev/poppins-v21-latin/poppins-v21-latin-600.woff2")
    format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("https://fonts-3by.pages.dev/poppins-v21-latin/poppins-v21-latin-700.woff2")
    format("woff2");
}

:root {
  /* Colors */
  --color-error-background: hsl(0, 100%, 74%);
  --color-submit-button: hsl(154, 59%, 51%);
  --color-hover-submit-button: hsl(154, 26%, 63%);
  --color-highlight: hsl(248, 32%, 49%);
  --color-form-dark-text: hsl(249, 10%, 26%);
  --color-form-light-text: hsl(246, 25%, 77%);
  --color-primary-text: hsl(0, 0%, 96%);

  /* Font  */
  /* Font family */
  --font-family: "Poppins";

  /* Font Size */

  --font-size-biggest : 3.25rem;              /* 52px */
  --font-size-bigger : 2rem;              /* 32px */
  --font-size-big : 1.3rem;              /* 21px */
  --font-size-base: 1rem;              /* 16px */
  --font-size-small: 0.688rem;          /* 11px */
  --font-size-very-small: 0.625rem;    /* 10px */

  /* spacing  */
  --space100 : 0.625rem;   /* 10px */
  --space200 : 1.25rem;    /* 20px */
  --space300 : 1.875rem;   /* 30px */
  --space400 : 2.5rem;     /* 40px */
  --space500 : 3.125rem;   /* 50px */
   
  /* border radius  */
  --border-radius:  0.625rem;   /* 10px */
 
}

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

* {
  margin: 0;
}

body {
   line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family), sans-serif;
  background-image: url(../images/bg-intro-desktop.png);
  background-color: var(--color-error-background);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

#root,
#__next {
  isolation: isolate;
}

.btn{
  width: 100%;
  padding: var(--space100);
  border-radius: var(--border-radius);
  font-weight: 600;
  word-spacing: 0.0625rem;
  cursor: pointer;
  margin-block:5px ;
  transition: all 0.3s ease-in-out;
}
a{
  text-decoration: none;
}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width:65% ;
  margin: 100px auto;
  gap: var(--space500);
  align-items: center;
}
.intro-text {
  color: var(--color-primary-text);
  height: 100%;
  align-content: center;
}
.intro-text .title{
  font-size: clamp(var(--font-size-bigger),3vw ,var(--font-size-biggest));
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: var(--space200);

}
.intro-text .description{
  font-size: var(--font-size-base);
  font-weight: 500;
}

.offer-form{
  display: grid;
  grid-template-rows:0.5fr 5fr;
  gap: var(--space200);

}
.offer-form .offer-block{
  background-color: var(--color-highlight);
  text-align: center;
  padding: 15px;
  color: var(--color-primary-text);
  font-weight: 500;
  border-radius: var(--border-radius);
}
.offer-form .offer-block .offertext-light-color{
  color: var(--color-form-light-text);
  font-weight: 400;
}

.offer-form form{
  background-color: var(--color-primary-text);
  padding: var(--space400);
  border-radius: var(--border-radius);
  max-height: fit-content;
}

input{
  width: 100%;
  padding-left: var(--space100);
  padding-right: var(--space200);
  line-height: 2.5;
  font-size: clamp(var(--font-size-base), 1.7vw, var(--font-size-big));
  color: var(--color-form-dark-text);
  caret-color: var(--color-highlight);
  background-color: inherit;
  border-radius: 5px;
  outline-color:var(--color-highlight) ;
  border: 1px solid var(--color-form-light-text);
  transition: border-color 0.3s ease;
}

.seprated-input{
  height: 80px;
}
 /* validation */
 input:focus {
  border-color: var(--color-highlight);
  box-shadow: 0 0 0 0.125rem rgba(87, 87, 221, 0.1);
}

input:valid:not(:placeholder-shown){
  border-color:  var(--color-highlight);
}

input:invalid:not(:placeholder-shown){
  border: var(--color-error-background);
  background-image: url(../images/icon-error.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 95%;
}

input:valid:not(:placeholder-shown) + .error[data-erroron]{
  display: none;
}

input:invalid:not(:placeholder-shown) + .error[data-erroron]{
  display: block;
  color:var(--color-error-background);
  
}

input:invalid ~ button[type="submit"]{
  opacity: 0.6; ;
  pointer-events: none;
  cursor:not-allowed;
}


.error{
  --spacing : 0.625rem;  /* 10px */

  display: none;
  color: var(--color-error-background);
  margin-block: var(--spacing);
  font-size: var(--font-size-very-small);
  text-align: right;
  transition: all .2s ease-in;
}

.btn-submit{
  background-color: var(--color-submit-button);
  color: var(--color-primary-text);
  border-color: var(--color-submit-button);
}


.btn-submit:hover{
  background-color: var(--color-hover-submit-button);
  border-color: var(--color-hover-submit-button);
}

.bottom-text{
  font-size: var(--font-size-small);
  font-weight: 500;
  text-align: center;
  color: var(--color-form-light-text);
}
.bottom-text .terms-services{
  color: var(--color-error-background);
  font-weight: 600;
}
.bottom-text .terms-services:hover {
  text-decoration: underline;
}
/* Thanks component  */

.thank-you-component{
  display: none;
  place-content: center;
  min-height: 100vh; 
  padding: var(--space200);
  background-color: var(--color-primary-text);
  padding: var(--space300);
}
.success-msg{
  background-color: var(--color-error-background);
  width:fit-content;
  padding: 5px var(--space100);
  border-radius: var(--border-radius);
}

.thank-you-details{
  margin-block: var(--space100) ;
}

.thank-you-actions{
  margin-block:var(--space100);
  display: grid;
  text-align: center;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space200);
 } 

.btn-primary{
  color: var(--color-form-dark-text);
  background-color:var(--color-form-light-text);
  border:2px solid var(--color-form-light-text); 
}

.btn-primary:hover, 
.btn-secondary:hover{
  color: var(--color-primary-text);
  background-color: var(--color-form-dark-text);
  border:2px solid var(--color-form-dark-text); 
}

.btn-secondary{
  color: var(--color-form-dark-text);
  border:2px solid var(--color-form-dark-text) ;
  background-color: transparent;
}

/* Media Queries */

@media (max-width : 68.75rem){

  .wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    width: 70%;
    margin: 3.125rem auto;
  }
  .seprated-input{
    height: 4.375rem;
  }

  input{
    font-size: var(--font-size-base)
  }

  .intro-text {
    text-align: center;
  }
}

@media (max-width: 37.5rem){
  .wrapper{
    grid-template-rows: .5fr 1fr;
    width: 90%;
    margin: 1.875rem auto;
  }

  .offer-form form {
    padding: 1.25rem;
  }

  .thank-you-actions{
    margin-block:var(--space100);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space200);
   } 
}