:root {
  /* Neutral Colors */
  --color-neutral-0: hsl(0, 0%, 100%);
  --color-neutral-300: hsl(252, 6%, 83%);
  --color-neutral-500: hsl(245, 15%, 58%);
  --color-neutral-700: hsl(245, 19%, 35%);
  --color-neutral-900: hsl(248, 70%, 10%);

  /* Orange Colors */
  --color-orange-500: hsl(7, 88%, 67%);
  --color-orange-700: hsl(7, 71%, 60%);

  /* Gradient */
  --gradient-text: linear-gradient(
    to right,
    hsl(7, 86%, 67%),
    hsl(0, 0%, 100%)
  );
}






* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000; /* Fallback color in case background image fails */
  color: var(--color-neutral-0);
    font-family: 'Inconsolata', monospace;
  font-weight: 400; /* default */
}

.Base {
  
  width: 100%;
  display: flex;
  justify-content: center; /* centers items horizontally */
  align-items: center;
  background-image: 
   url('assets/images/pattern-lines.svg'),
    url('assets/images/background-desktop.png');
   

  background-repeat: 
    no-repeat,
    no-repeat;

  background-position: 
    center top,
    center;

  background-size: 
    contain,
    cover;
}

.container{
    min-height: 100vh;
    padding:  4rem 0;
    width: 100%;
   display: flex;
   flex-direction: column;
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically */
  text-align: center;      /* centers inline text inside content */
    gap: 20px;
    background-image: 
    url('assets/images/pattern-circle.svg'),
    url('assets/images/pattern-circle.svg'),
    url('assets/images/pattern-squiggly-line-top.svg'),
    url("assets/images/pattern-squiggly-line-bottom-desktop.svg");
   

  background-repeat: 
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;

  background-position: 
    10% -10%,
    70% 80%,
    100% 0%,
    0% 100%;

  background-size: 
    11%,
    11%,
    50%,
    50%;
}
.space{
    height: 2rem;
}
.heading .content .logo img {
  height: 100px;
  width: auto;
  padding: 0;        /* remove padding unless you want it */
}
.heading .content h1 {
  font-weight: 800;
  font-size: 3.5rem;
  width: 60%;
  margin: 0 auto;       /* centers horizontally */
  text-align: center;
  padding: 30px;
}
.heading .content p {
  font-weight: 400;
  font-size: 20px;
  width: 60%;
  margin: 0 auto;       /* centers horizontally */
  text-align: center;
  color: var(--color-neutral-500);
}



/* ...............................
form
............................... */

.custom-form {
  width: 100%;
  max-width: 400px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Inconsolata', monospace;
}

.input-field {
 background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--color-neutral-500);
  padding: 1rem;
  border-radius: 6px;
  color: var(--color-neutral-0);
  font-size: 1rem;
  outline: none;
  width: 100%;
}

.input-field::placeholder {
  color: var(--color-neutral-500);
}

.avatar-upload-box {
  border: 2px dashed var(--color-neutral-500);
  padding: 0;
  border-radius: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}
.info{
    display: flex;
    width: 100%;
    max-width: 400px;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
.upload-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-neutral-0);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.upload-button:hover {
  background:var(--color-neutral-900);
  border: none;
}

.upload-icon {
  font-size: 1.2rem;
}

.avatar-preview {
  margin-top: 1.5rem;
  border: none;
}

.avatar-preview img {
  height: 60px;
  opacity: 0.6;
}

.avatar-preview p {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-neutral-500);
}

.info label{
font-size: 14px;
letter-spacing: 2px;
color: var(--color-neutral-300);
padding-top: 1rem;
}
.submit-button{
    width: 400px;
    padding-top: 1rem;
}
.submit-button button {
  width: 100%; /* Stretch across the container */
  background-color: var(--color-orange-700); /* Nice orange */
  color: #fff; /* White text */
  padding: 1rem 1.5rem; /* Comfortable padding */
  border: none;
  border-radius: 8px; /* Slightly rounded corners */
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Optional hover effect */
.submit-button button:hover {
  background-color: #e56b00; /* Slightly darker orange */
}
.error-message {
  color: #e63946; /* Soft red */
  font-size: 0.85rem;
  margin-top: 4px;
  margin-bottom: 12px;
  display: block;
}
.avatar-thumb {
  height: 80px;
  width: auto;
  border-radius: 50%;
  object-fit: cover;
}


    .ticket {
  position: relative;
  width: 600px;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto; /* ensures it's centered in flow */
}

    .ticket-content {
      position: relative;
      display: flex;
      height: 230px;
      width: 451px;
      color: white;
      backdrop-filter: blur(20px);
      background: rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      z-index: 1;
    }

    .left {
      width: 70%;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .left h1 {
      font-size: 28px;
      margin: 10px 0;
      text-align: start;
    }

    .left p {
      font-size: 11px;
      margin: 0;
      color: #ccc;
      text-align: start;
    }

    .profile {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .profile img {
      width: 60px;
      height: 60px;
      border-radius: 12px;
    }

    .profile-details {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .profile-details strong {
      font-size: 16px;
    }

    .profile-details span {
      font-size: 13px;
      color: #aaa;
    }

    .right {
      width: 30%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .dashed-line {
      position: absolute;
      left: 0;
      top: 30px;
      bottom: 30px;
      border-left: 2px dashed rgba(255, 255, 255, 0.3);
    }

    .ticket-number {
      transform: rotate(90deg);
      font-size: 18px;
      color: rgba(255, 255, 255, 0.4);
      letter-spacing: 2px;
    }

    .ticket svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

  .upper-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  gap: 10px;
}


.download-button {
  margin-top: 2rem;
}

.download-button button {
  background-color: var(--color-orange-700);
  color: white;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.download-button button:hover {
  background-color: #e56b00;
}


@media screen and (max-width: 600px) {
  /* Container adjusts padding and background positions for small screens */
  .container {
    padding: 2rem 1rem;
    background-position:
      10% -5%,
      70% 90%,
      100% 0%,
      0% 100%;
    background-size:
      18%,
      18%,
      100%,
      100%;
  }

  /* Heading section text */
  .heading .content h1 {
    font-size: 2rem;
    width: 100%;
    padding: 1rem;
  }

  .heading .content p {
    font-size: 1rem;
    width: 100%;
    padding: 0 0.5rem;
  }

  /* Form and input fields */
  .custom-form,
  .submit-button {
    width: 100%;
    max-width: 100%;
  }

  .input-field {
    font-size: 0.9rem;
    padding: 0.8rem;
  }

  .submit-button button {
    font-size: 1rem;
    padding: 0.8rem;
  }

  /* Ticket layout */
  .ticket {
    width: 100%;
    height: auto;
    padding: 1rem;
  }

  .ticket-content {
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 1rem;
  }

  .left,
  .right {
    width: 100%;
    padding: 1rem 0.5rem;
    align-items: center;
    text-align: center;
  }

  .left {
    flex-direction: column;
    justify-content: center;
  }

  .upper-left {
    align-items: center;
    text-align: center;
  }

  .upper-left img {
    width: 100px;
  }

  .left h1 {
    font-size: 1.5rem;
  }

  .left p {
    font-size: 0.9rem;
  }

  .profile {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .profile img {
    width: 70px;
    height: 70px;
  }

  .profile-details {
    align-items: center;
  }

  .profile-details strong {
    font-size: 1rem;
  }

  .profile-details span {
    font-size: 0.85rem;
  }

  .dashed-line {
    display: none;
  }

  .ticket-number {
    transform: rotate(0);
    margin-top: 1rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
  }

  /* Download button */
  .download-button {
    width: 100%;
    text-align: center;
  }

  .download-button button {
    width: 90%;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    margin-top: 1.5rem;
  }

  /* Avatar preview adjustments */
  .avatar-preview img {
    height: 50px;
  }

  .error-message {
    font-size: 0.8rem;
  }
}