/* Quetzalsoft brand theme overrides for the osTicket client portal */
:root {
  --qs-primary: #008156;
  --qs-primary-light: #5AB88D;
  --qs-cream: #FFF1E0;
  --qs-red: #D72D3E;
  --qs-red-dark: #99191A;
}

body {
  background: var(--qs-cream);
}

#container {
  box-shadow: 0 0 12px rgba(0, 129, 86, 0.18);
}

#header {
  border-bottom: 3px solid var(--qs-primary);
  padding-bottom: 10px;
}

#header #logo img {
  max-height: 60px;
}

#nav {
  background: var(--qs-primary);
  border-top: none;
  box-shadow: none;
  margin: 0;
  padding: 0 20px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

#nav li {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav li a {
  float: none;
  display: flex !important;
  align-items: center;
  height: auto;
  line-height: normal;
  padding: 17px 18px;
  margin: 0;
  border-radius: 0;
  background-image: none !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 3px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#nav li a.active,
#nav li a:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-bottom-color: var(--qs-primary-light);
}

a, a:visited {
  color: var(--qs-primary);
}

a:hover {
  color: var(--qs-primary-light);
}

/* Buttons */
.button, .button:visited,
.blue.button, .blue.button:visited,
.green.button, .green.button:visited {
  background-color: var(--qs-primary);
}

.button:hover,
.blue.button:hover,
.green.button:hover {
  background-color: var(--qs-primary-light);
}

/* Ticket / login form submit buttons (plain input[type=submit], unstyled by default) */
#ticketForm input[type="submit"],
#clientLogin input[type="submit"] {
  background: var(--qs-primary);
  color: #fff;
  border: none;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

#ticketForm input[type="submit"]:hover,
#clientLogin input[type="submit"]:hover {
  background: var(--qs-primary-light);
}

/* Secondary buttons: Reset / Cancel */
#ticketForm input[type="reset"],
#ticketForm input[type="button"] {
  background: #fff;
  color: var(--qs-primary);
  border: 1px solid #cfd8d3;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: none;
}

#ticketForm input[type="reset"]:hover,
#ticketForm input[type="button"]:hover {
  background: var(--qs-cream);
  border-color: var(--qs-primary-light);
  color: var(--qs-primary);
}

#ticketForm p.buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Form field focus states */
#ticketForm input:focus,
#ticketForm textarea:focus,
#ticketForm select:focus,
#clientLogin input:focus {
  border-color: var(--qs-primary-light);
  outline: none;
  box-shadow: 0 0 0 2px rgba(90, 184, 141, 0.35);
}

/* Error styling aligned to brand red */
#msg_error {
  border-color: var(--qs-red);
}

.error,
font.error,
div.error label {
  color: var(--qs-red-dark);
}

div.error input,
.error input {
  border-color: var(--qs-red) !important;
}

#faq ol li a:hover {
  background-color: var(--qs-cream);
}

/* ---------------------------------------------------------------- */
/* Landing page modernization                                       */
/* ---------------------------------------------------------------- */
#landing_page {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
  gap: 32px;
  padding: 16px 0 30px;
}

#landing_page .main-content {
  flex: 1 1 420px;
}

#landing_page .main-content .thread-body h1 {
  font-size: 30px;
  line-height: 1.25;
  color: var(--qs-primary);
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#landing_page .main-content .thread-body p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #4a4a4a;
  max-width: 560px;
}

#landing_page .sidebar.pull-right {
  float: none;
  width: 280px;
  flex: 0 0 280px;
}

#landing_page .front-page-button {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#landing_page .front-page-button p {
  margin: 0;
}

#landing_page .front-page-button a.button.qs-cta {
  width: auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  font-size: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 129, 86, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#landing_page .front-page-button a.button.qs-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 129, 86, 0.35);
}

#landing_page .front-page-button a.button.qs-cta i {
  font-size: 15px;
}

#landing_page .sidebar .content section {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

#landing_page .sidebar .content .header {
  font-weight: 700;
  color: var(--qs-primary);
  margin-bottom: 8px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#landing_page .sidebar .content section div a {
  display: block;
  padding: 4px 0;
  font-size: 13.5px;
}

@media (max-width: 700px) {
  #landing_page .sidebar.pull-right {
    width: 100%;
    flex-basis: 100%;
  }
}