/* CUSTOM PROPERTIES */
:root {
  --clr-accent-100: #FFEEB8;
  --clr-accent: #e94610;
  --clr-accent-900: #C52200;
  --clr-neutral-100: #ffffff;
  --clr-neutral-300: #595959;
  --clr-neutral-400: #333333;
  --clr-neutral-800: #0d0d0d;
  --clr-neutral-900: #000000;
}

/* RESET */
html, body, ul, button, input {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
}

body {
  background-color: var(--clr-neutral-800);
  font-family: 'Rowdies', cursive;
  font-size: clamp(.875rem, 1104.9474rem + -981.1088vw, 1.2rem);
  font-weight: 300;
  color: var(--clr-neutral-800);
  color-scheme: light dark;
}

img {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* TYPOGRAPHY */
header,
#payment-modal,
#password-input {
  text-align: center;
}

h1 {
  margin: 0;
  font-family: 'Faster One', cursive;
  font-size: clamp(2.5rem, 1.3750rem + 5.0000vw, 4rem);
  letter-spacing: .5rem;
  color: var(--clr-accent);
}

.tagline {
  display: inline;
  margin-top: 0;
  padding: .25rem;
}

.fa-plus {
  padding: .35rem;
  color: var(--clr-accent-100);
}

.fa-delete-left {
  font-size: 2.3rem;
  color: var(--clr-accent);
}

.tagline,
.fa-plus {
  background-color: var(--clr-accent);
}

h2 {
  text-align: center;
  color: var(--clr-accent);
}

.number-ordered {
  color: var(--clr-neutral-300);
}

.total {
  text-align: center;
}

.total-price,
h3 {
  font-weight: 400;
  color: var(--clr-accent);
}

.order-btn {
  padding: .25rem .5rem;
  font-size: clamp(2rem, 1.2500rem + 3.3333vw, 3rem);
  border: none;
  color: var(--clr-accent-100);
  background: linear-gradient(45deg, #D06100, var(--clr-accent), var(--clr-accent-900));
}

/* border radius */
.tagline,
.fa-plus,
.order-btn,
#payment-modal {
  border-radius: .25rem;
}

/* hover/focus effects */
.fa-plus:hover,
.fa-plus:focus {
  background-color: var(--clr-accent-900);
  box-shadow: 1px 2px 5px var(--clr-neutral-800);
}

.fa-delete-left:hover,
.fa-delete-left:focus {
  color: var(--clr-accent-900);
  filter: drop-shadow(1px 2px 5px var(--clr-neutral-800));
}

.order-btn:hover,
.order-btn:focus {
  color: #FFFFA9;
  background: linear-gradient(135deg, var(--clr-accent-900), #BD1A00,  #CC2900, #D93600, #E94610, var(--clr-accent), #F5521C, #FF5F29, #FF6C36, #FF804A);
}

/* LAYOUT */
body {
  display: grid;
  align-items: center;
  background-color: var(--clr-neutral-400);
}

.container {
  width: min(100%, 90em);
  margin: 0;
  margin-inline: auto;
  background-color: var(--clr-accent-100);
  overflow: auto;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 12em;
  margin-top: 0;
  padding: 1px;
  background-image: url("./images/background.jpg");
  background-position: center;
}

h1 {
  margin-left: 1rem;
}

.menu-item {
  display: grid;
  justify-content: start;
  align-items: center;
  grid-template-areas: 
  "img details controls"
  "img details controls";
  grid-template-columns: 2fr 70% 1fr;
  gap: .5rem;
  width: 95%;
  margin-inline: auto;
}

.menu-item:first-child {
  margin-top: 1em;
}

.menu-item:not(:first) {
  margin-top: 10em;
}

.menu-img {
  width: 4em;
}

.menu-item-description {
  width: 100%;
}

.menu-item-description h3 {
  margin: 0;
}

.menu-item-description p {
  margin-top: 0;
}

#order-details {
  display: flex;
  flex-direction: column;
}

.order-line {
  display: flex;
  justify-content: space-between;
  width: 70%;
  margin-inline: auto;
}

.order-line {
  border-bottom: 1px solid var(--clr-neutral-800);
}

.order-item-dets li {
  list-style: none;
}

.order-item-dets {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .5rem;
}

.hidden {
  display: none;
}

/* COMPONENTS */

#payment-modal {
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 30%;
  margin: auto;
  padding: .5em;
  height: fit-content;
  width: 80%;
  background-color: #333333F2;
  color: var(--clr-neutral-100);
  box-shadow: 3px 5px 15px var(--clr-neutral-800);
}

.payment-modal-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.QRcode {
  width: 7em;
}

.QRcode,
.spinner, 
.final-img {
  margin-bottom: 1.5em;
}

/* mobile */
.pay-icon {
  width: 2em;
  margin-bottom: 1em;
}

.password {
  display: flex;
  gap: .5em;
}

.password-input {
  width: 1.5em;
  aspect-ratio: 1;
  margin-bottom: 2em;
  color: var(--clr-neutral-800);
  text-align: center;
  background-color: var(--clr-accent-100);
  border: var(--clr-neutral-800);
}

/* Media Queries */

@media (min-width: 768px) {
  .container {
    width: 30em;
  }
  header {
    height: 15em;
  }
  #payment-modal {
    width: 20em;
  }
}

@media (max-width: 400px) {
  .order-line {
    width: 95%;
  }
}