:root {
  --gta-bg-deep: #02141b;
  --gta-bg-mid: #072635;
  --gta-bg-soft: #0d3447;
  --gta-panel: rgba(7, 30, 41, 0.82);
  --gta-panel-2: rgba(9, 41, 57, 0.75);
  --gta-line: rgba(110, 196, 255, 0.18);
  --gta-text: #eef6fb;
  --gta-muted: #a7bcc8;
  --gta-blue: #1492ff;
  --gta-blue-2: #3cb2ff;
  --gta-green: #31d17c;
  --gta-amber: #ffbf47;
  --gta-red: #ff6f6f;
  --gta-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

/* =========================
   GLOBAL
   ========================= */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  color: var(--gta-text);
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(circle at 28% 12%, rgba(34, 127, 184, 0.18), transparent 0 28%),
    radial-gradient(circle at 72% 22%, rgba(20, 146, 255, 0.1), transparent 0 24%),
    linear-gradient(180deg, rgba(2,20,27,0.88), rgba(2,20,27,0.96)),
    linear-gradient(115deg, #031820 0%, #062533 38%, #03131a 100%);
}

main,
.container,
#main-content {
  width: 100%;
}

a {
  color: #7cc8ff;
}

a:hover {
  color: #a8dcff;
}

img {
  max-width: 100%;
}

ul,
ol {
  padding-left: 20px;
}

.gta-homepage,
.gta-alert-banner,
.gta-hero,
.gta-card-grid,
.gta-page,
.gta-article-page,
.requests-page,
.my-activities-page,
.subscriptions-page,
.request-page-container {
  width: min(calc(100% - 32px), 1240px);
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   HEADER
   ========================= */
.gta-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(2, 20, 27, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 14px 24px;
}

.gta-header-inner {
  max-width: 1240px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.gta-logo a {
  text-decoration: none;
}

.gta-logo-text {
  color: #8cd1ff;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.gta-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.gta-nav a {
  color: #d7e7ef;
  text-decoration: none;
  font-weight: 500;
}

.gta-nav a:hover {
  color: #fff;
  text-decoration: none;
}

.gta-user-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.gta-user-nav a {
  color: #a7bcc8;
  text-decoration: none;
}

.gta-user-nav a:hover {
  color: #fff;
}

.gta-brand-switch {
  display: flex;
  gap: 12px;
  margin-left: 20px;
}

.gta-brand-switch a {
  color: #a7bcc8;
  text-decoration: none;
  font-size: 14px;
}

.gta-brand-switch a:hover {
  color: #fff;
}

/* =========================
   FOOTER
   ========================= */
.gta-footer {
  margin-top: 48px;
  padding: 30px;
  background: #02141b;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.gta-footer-inner {
  max-width: 1240px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.gta-footer-left strong {
  color: #fff;
  font-size: 18px;
}

.gta-footer-left p {
  margin: 8px 0 0 0;
  color: #a7bcc8;
}

.gta-footer-right {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.gta-footer-right a {
  color: #a7bcc8;
  text-decoration: none;
}

.gta-footer-right a:hover {
  color: #fff;
}

.gta-footer-bottom {
  text-align: center;
  margin-top: 20px;
  color: #6c8a99;
}

/* =========================
   SHARED COMPONENTS
   ========================= */
.gta-homepage {
  padding-bottom: 32px;
}

.gta-page,
.gta-article-page {
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(7, 30, 41, 0.82);
  border: 1px solid rgba(255,255,255,0.08);
  color: #eef6fb;
  box-shadow: var(--gta-shadow);
}

.gta-page h1,
.gta-article-page h1 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #fff;
}

.gta-page p,
.gta-article-page p {
  color: #a7bcc8;
  line-height: 1.6;
}

.gta-alert-banner {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 111, 111, 0.22);
  background: linear-gradient(135deg, rgba(93, 15, 25, 0.9), rgba(74, 20, 28, 0.7));
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  box-shadow: var(--gta-shadow);
}

.gta-alert-copy {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gta-status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

.gta-critical {
  background: var(--gta-red);
  box-shadow: 0 0 0 6px rgba(255,111,111,0.12);
}

.gta-ok {
  background: var(--gta-green);
  box-shadow: 0 0 0 6px rgba(49,209,124,0.12);
}

.gta-degraded {
  background: var(--gta-amber);
  box-shadow: 0 0 0 6px rgba(255,191,71,0.12);
}

.gta-button {
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 600;
  transition: 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gta-button:hover,
.gta-button:focus {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

.gta-button-primary {
  background: linear-gradient(135deg, var(--gta-blue), var(--gta-blue-2));
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(20, 146, 255, 0.26);
}

.gta-button-secondary {
  background: rgba(255,255,255,0.04);
}

.gta-button-row,
.gta-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.gta-button-row {
  margin-top: 18px;
}

.gta-search-shell {
  margin-top: 24px;
  max-width: 720px;
}

.gta-search-shell .search-full {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  padding: 10px;
}

.gta-search-shell .search input[type="search"],
.gta-search-shell .search input[type="text"] {
  color: #fff;
  background: transparent;
}

/* =========================
   HOMEPAGE HERO
   ========================= */
.gta-hero {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  padding: 40px;
  min-height: 420px;
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 28px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(135deg, rgba(7, 37, 52, 0.72), rgba(2, 20, 27, 0.94)),
    url("../assets/gta-hero-bg.png") center/cover no-repeat;
  box-shadow: var(--gta-shadow);
}

.gta-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.54), rgba(0,0,0,0.42)),
    linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.36));
  pointer-events: none;
}

.gta-hero-content,
.gta-hero-panel {
  position: relative;
  z-index: 1;
}

.gta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  color: var(--gta-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gta-hero h1 {
  margin: 20px 0 14px;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 680px;
  color: #fff;
}

.gta-hero-text,
.gta-panel-card p,
.gta-card p,
.gta-table-card p,
.gta-small,
.gta-link-item span,
.gta-channel-row span,
.gta-kpi span {
  color: var(--gta-muted);
  line-height: 1.6;
}

.gta-hero-actions {
  margin-top: 28px;
}

.gta-hero-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

/* =========================
   CARDS / PANELS
   ========================= */
.gta-panel-card,
.gta-card,
.gta-table-card {
  background: var(--gta-panel);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--gta-shadow);
  backdrop-filter: blur(14px);
}

.gta-table-card {
  background: var(--gta-panel-2);
}

.gta-panel-card h3,
.gta-card h3,
.gta-table-card h3 {
  margin: 0 0 10px;
  color: #fff;
}

.gta-card-grid {
  margin-top: 24px;
  display: grid;
  gap: 20px;
}

.gta-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gta-grid-2 {
  grid-template-columns: 1.2fr 0.8fr;
}

.gta-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.gta-kpi {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.gta-kpi strong {
  display: block;
  font-size: 28px;
  margin-bottom: 6px;
  color: #fff;
}

.gta-tag {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.gta-green {
  background: rgba(49, 209, 124, 0.12);
  color: #9bf3c1;
}

.gta-amber {
  background: rgba(255, 191, 71, 0.12);
  color: #ffd98d;
}

.gta-blue {
  background: rgba(20, 146, 255, 0.12);
  color: #8cd1ff;
}

.gta-red {
  background: rgba(255, 111, 111, 0.12);
  color: #ffb1b1;
}

/* =========================
   SLA / STATUS / LINKS
   ========================= */
.gta-sla-list,
.gta-status-list,
.gta-link-list,
.gta-channel-table {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.gta-sla-item,
.gta-status-item,
.gta-link-item,
.gta-channel-row {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
}

.gta-sla-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
}

.gta-priority {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.gta-p0 {
  color: #ff9e9e;
}

.gta-p1 {
  color: #ffc978;
}

.gta-p2 {
  color: #9bd6ff;
}

.gta-p3 {
  color: #afe9c4;
}

.gta-metric {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
}

.gta-status-item,
.gta-link-item,
.gta-channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
}

.gta-service {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gta-pill {
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gta-pill-ok {
  background: rgba(49,209,124,0.14);
  color: #9bf3c1;
}

.gta-pill-degraded {
  background: rgba(255,191,71,0.14);
  color: #ffd98d;
}

.gta-pill-critical {
  background: rgba(255,111,111,0.14);
  color: #ffb1b1;
}

.gta-link-item {
  text-decoration: none;
  color: #fff;
}

.gta-link-item:hover {
  text-decoration: none;
  background: rgba(255,255,255,0.05);
}

/* =========================
   ARTICLES / SECTIONS / KB
   ========================= */
.gta-articles {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.gta-article {
  display: block;
  padding: 20px;
  border-radius: 18px;
  background: rgba(7, 30, 41, 0.82);
  border: 1px solid rgba(255,255,255,0.08);
  color: #eef6fb;
  text-decoration: none;
}

.gta-article:hover {
  background: rgba(255,255,255,0.05);
  text-decoration: none;
  color: #fff;
}

.gta-article h3 {
  margin: 0 0 8px;
}

.gta-article p {
  margin: 0;
  color: #a7bcc8;
}

.gta-article-body {
  color: #eef6fb;
  line-height: 1.8;
}

.gta-article-body a {
  color: #7cc8ff;
}

.gta-form-container {
  margin-top: 24px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

/* =========================
   REQUESTS / MY ACTIVITIES
   ========================= */
.requests-page,
.my-activities-page,
.subscriptions-page,
.request-page-container {
  margin: 32px auto 48px auto;
  color: #eef6fb;
}

.requests-page h1,
.my-activities-page h1,
.request-page-container h1 {
  font-size: 48px;
  line-height: 1.05;
  margin: 0 0 24px 0;
  color: #ffffff;
}

.my-activities-nav,
.requests-nav,
.requests-sidebar,
.subscriptions-nav {
  margin-bottom: 24px;
}

.my-activities-nav ul,
.requests-nav ul,
.subscriptions-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.my-activities-nav li,
.requests-nav li,
.subscriptions-nav li {
  margin: 0;
}

.my-activities-nav a,
.requests-nav a,
.subscriptions-nav a {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: #c7d7df;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.my-activities-nav a:hover,
.requests-nav a:hover,
.subscriptions-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

.requests-search,
.my-activities-table-toolbar,
.requests-table-toolbar,
.requests-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0 0 22px 0;
}

.requests-search input,
.requests-search select,
.my-activities-table-toolbar input,
.my-activities-table-toolbar select,
.requests-filters input,
.requests-filters select {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #eef6fb;
}

.requests-search input::placeholder,
.my-activities-table-toolbar input::placeholder,
.requests-filters input::placeholder {
  color: #9fb3be;
}

.requests-table,
.my-activities-table,
table.requests-table,
table.my-activities-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  overflow: hidden;
  background: rgba(7, 30, 41, 0.82);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.24);
}

.requests-table thead,
.my-activities-table thead {
  background: rgba(255,255,255,0.04);
}

.requests-table th,
.my-activities-table th {
  text-align: left;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #dbe8ef;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.requests-table td,
.my-activities-table td {
  padding: 16px 18px;
  color: #eef6fb;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}

.requests-table tr:last-child td,
.my-activities-table tr:last-child td {
  border-bottom: none;
}

.requests-table tr:hover td,
.my-activities-table tr:hover td {
  background: rgba(255,255,255,0.03);
}

.requests-table a,
.my-activities-table a {
  color: #7cc8ff;
  text-decoration: none;
  font-weight: 600;
}

.requests-table a:hover,
.my-activities-table a:hover {
  color: #a8dcff;
  text-decoration: underline;
}

.status-label,
.requests-table .status,
.my-activities-table .status {
  font-weight: 700;
}

.requests-page button,
.my-activities-page button,
.request-page-container button,
.requests-page .button,
.my-activities-page .button {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(135deg, #1492ff, #3cb2ff);
  color: #fff;
  cursor: pointer;
}

.gta-requests-placeholder {
  margin-top: 24px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

/* optional cleanup for duplicate default nav toggles */
@media (min-width: 1024px) {
  .my-activities-sub-nav-trigger,
  .requests-sub-nav-trigger,
  .collapsible-nav-toggle {
    display: none !important;
  }
}

/* =========================
   ZENDESK FORM / INPUT POLISH
   ========================= */
input,
select,
textarea,
button {
  font-family: "Inter", sans-serif;
}

input,
select,
textarea {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #eef6fb;
  padding: 10px 14px;
}

textarea {
  min-height: 140px;
}

input::placeholder,
textarea::placeholder {
  color: #9fb3be;
}

label {
  color: #dbe8ef;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1080px) {
  .gta-alert-banner,
  .gta-hero,
  .gta-grid-2,
  .gta-grid-4,
  .gta-kpis,
  .gta-sla-item {
    grid-template-columns: 1fr;
  }

  .gta-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .gta-nav,
  .gta-user-nav {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .gta-homepage,
  .gta-alert-banner,
  .gta-hero,
  .gta-card-grid,
  .gta-page,
  .gta-article-page,
  .requests-page,
  .my-activities-page,
  .subscriptions-page,
  .request-page-container {
    width: min(calc(100% - 20px), 1240px);
  }

  .requests-table,
  .my-activities-table,
  table.requests-table,
  table.my-activities-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .requests-page h1,
  .my-activities-page h1,
  .request-page-container h1 {
    font-size: 36px;
  }

  .gta-footer-inner {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .gta-hero {
    padding: 28px 22px;
  }

  .gta-hero h1 {
    font-size: 34px;
  }

  .gta-logo-text {
    font-size: 18px;
  }

  .gta-nav {
    gap: 14px;
  }
}.gta-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gta-status-open {
  background: rgba(20, 146, 255, 0.14);
  color: #8cd1ff;
}

.gta-status-pending {
  background: rgba(255, 191, 71, 0.14);
  color: #ffd98d;
}

.gta-status-solved {
  background: rgba(49, 209, 124, 0.14);
  color: #9bf3c1;
}

.gta-banner-critical {
  border-color: rgba(255, 111, 111, 0.22);
  background: linear-gradient(135deg, rgba(93, 15, 25, 0.9), rgba(74, 20, 28, 0.7));
}

.gta-banner-degraded {
  border-color: rgba(255, 191, 71, 0.22);
  background: linear-gradient(135deg, rgba(92, 59, 8, 0.9), rgba(84, 52, 10, 0.7));
}

.gta-banner-ok {
  border-color: rgba(49, 209, 124, 0.22);
  background: linear-gradient(135deg, rgba(10, 77, 42, 0.9), rgba(9, 65, 36, 0.7));
}/* =========================
   NEW REQUEST PAGE / FORM
   ========================= */

.new-request-page,
.request-page,
.submit-a-request-page {
  width: min(calc(100% - 32px), 1240px);
  margin: 32px auto 48px auto;
  color: #eef6fb;
}

.new-request-page h1,
.request-page h1,
.submit-a-request-page h1 {
  font-size: 48px;
  line-height: 1.05;
  margin: 0 0 24px 0;
  color: #ffffff;
}

/* outer form card */
.request-form,
.new-request-form,
form#new_request,
.request-container {
  background: rgba(7, 30, 41, 0.82);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.24);
  backdrop-filter: blur(14px);
}

/* form fields spacing */
.form-field,
.request-form .form-field,
.new-request-form .form-field {
  margin-bottom: 22px;
}

/* labels */
label,
.form-field label,
.request-form label,
.new-request-form label {
  display: block;
  margin-bottom: 8px;
  color: #dbe8ef;
  font-weight: 600;
}

/* text inputs / textarea */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
textarea,
.nesty-input,
.request-form input,
.request-form textarea,
.new-request-form input,
.new-request-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #eef6fb;
  outline: none;
}

textarea {
  min-height: 160px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #9fb3be;
}

/* native select fallback */
select,
.request-form select,
.new-request-form select {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #eef6fb;
  outline: none;
}

/* Zendesk dropdown shell */
.nesty-panel {
  background: #0b2330 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.28) !important;
  overflow: hidden !important;
}

.nesty-panel ul {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.nesty-panel li,
.nesty-panel li[role="option"] {
  padding: 12px 16px !important;
  color: #eef6fb !important;
  background: transparent !important;
  border: none !important;
  line-height: 1.4;
}

.nesty-panel li:hover,
.nesty-panel li[aria-selected="true"],
.nesty-panel li.is-selected {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
}

/* the visible fake select that Zendesk uses */
.nesty-input,
.request_ticket_form_id,
.form-field.select .nesty-input {
  width: 100% !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #eef6fb !important;
  box-shadow: none !important;
}

/* dropdown arrow area */
.nesty-input:after {
  color: #a7bcc8 !important;
}

/* focus states */
input:focus,
select:focus,
textarea:focus,
.nesty-input:focus,
.nesty-input.is-focused {
  border-color: rgba(60,178,255,0.65) !important;
  box-shadow: 0 0 0 3px rgba(20,146,255,0.12) !important;
}

/* helper text / descriptions */
.notification,
.form-field p,
.form-field .description,
.request-form .hint {
  color: #a7bcc8;
}

/* attachments block */
.upload-dropzone,
.request-form .upload-dropzone {
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  padding: 18px;
  color: #dbe8ef;
}

/* submit button */
input[type="submit"],
button[type="submit"],
.request-form footer input,
.request-form .form-footer input,
.new-request-form input[type="submit"] {
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #1492ff, #3cb2ff);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(20,146,255,0.26);
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
}

/* ticket form selector specifically */
.request_ticket_form_id + .nesty-panel,
#request_issue_type_select + .nesty-panel {
  margin-top: 8px;
}

/* mobile */
@media (max-width: 900px) {
  .new-request-page,
  .request-page,
  .submit-a-request-page {
    width: min(calc(100% - 20px), 1240px);
  }

  .new-request-page h1,
  .request-page h1,
  .submit-a-request-page h1 {
    font-size: 36px;
  }

  .request-form,
  .new-request-form,
  form#new_request,
  .request-container {
    padding: 18px;
  }
}/* =========================
   ZENDESK DROPDOWN / NESTY
   ========================= */

/* visible closed dropdown */
.nesty-input {
  width: 100% !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #eef6fb !important;
  box-shadow: none !important;
}

/* placeholder / selected value text */
.nesty-input,
.nesty-input:focus,
.nesty-input:hover {
  color: #eef6fb !important;
}

/* arrow */
.nesty-input:after {
  color: #a7bcc8 !important;
}

/* opened dropdown container */
.nesty-panel {
  background: #0b2330 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.28) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 320px !important;
  z-index: 9999 !important;
}

/* dropdown list */
.nesty-panel ul {
  margin: 0 !important;
  padding: 8px 0 !important;
  list-style: none !important;
  background: #0b2330 !important;
}

/* each option */
.nesty-panel li,
.nesty-panel li[role="option"] {
  display: block !important;
  padding: 12px 16px !important;
  color: #eef6fb !important;
  background: #0b2330 !important;
  border: 0 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* hover / selected option */
.nesty-panel li:hover,
.nesty-panel li[aria-selected="true"],
.nesty-panel li.is-selected,
.nesty-panel li.keyboard-focus {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

/* links inside dropdown, if Zendesk renders them */
.nesty-panel a {
  color: #eef6fb !important;
  text-decoration: none !important;
  display: block !important;
}

.nesty-panel a:hover {
  color: #ffffff !important;
}

/* make sure parent wrappers do not clip dropdown */
.form-field,
.request-container,
.request-form,
.new-request-form,
form#new_request {
  overflow: visible !important;
}