/* reWASD Support Center styles */
/* Extracted from myaccount.css to keep account styles lean. */

.account-support{
  --support-card: #262626;
  --support-field: #343434;
  --support-line: rgba(255,255,255,0.14);
  --support-muted: rgba(255,255,255,0.66);
  --support-soft: rgba(255,255,255,0.06);
  --support-accent: var(--accent, #F8E6A9);
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--text-color);
}

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

.support-submit-lock{
  overflow: hidden;
}

.support-submit-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.support-submit-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.support-submit-overlay__box{
  width: min(420px, 100%);
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #fff;
  padding: 0;
  text-align: center;
  box-shadow: none;
}

.support-submit-overlay__spinner{
  width: 46px;
  height: 46px;
  margin: 0 auto;
  display: block;
  border: 4px solid rgba(255,255,255,.24);
  border-top-color: #f8e6a9;
  border-radius: 50%;
  animation: support-spin .8s linear infinite;
}

.support-submit-overlay:not(.is-error) .support-submit-overlay__box{
  width: auto;
}

.support-submit-overlay:not(.is-error) .support-submit-overlay__box strong,
.support-submit-overlay:not(.is-error) .support-submit-overlay__box p,
.support-submit-overlay:not(.is-error) .support-submit-overlay__retry{
  display: none !important;
}

.support-submit-overlay.is-error{
  background: rgba(0,0,0,.74);
}

.support-submit-overlay.is-error .support-submit-overlay__box{
  width: min(420px, 100%);
  border: 1px solid rgba(248,230,169,.2);
  background: #171717;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.support-submit-overlay__box strong{
  display: block;
  margin-bottom: 8px;
  color: #f8e6a9;
  font-size: 18px;
}

.support-submit-overlay__box p{
  margin: 0;
  color: rgba(255,255,255,.72);
}

.support-submit-overlay.is-error .support-submit-overlay__spinner{
  display: none;
}

.support-submit-overlay__retry{
  margin-top: 16px;
}

.support-submit-overlay__retry[hidden]{
  display: none !important;
}

@keyframes support-spin{
  to{transform: rotate(360deg);}
}

.account-support__hero,
.account-support__new-ticket,
.account-support__sidebar,
.account-support__content{
  border: 1px solid var(--support-line);
  border-radius: 15px;
  background: var(--support-card);
}

.account-support__hero{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
}

.account-support__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--support-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.account-support__title,
.account-support__sidebar-head h4,
.account-support__thread-head h4{
  margin: 0;
  color: var(--text-color);
  font-family: var(--secound-font-family);
  font-weight: 400;
  line-height: 1.2;
}

.account-support__title{
  font-size: 24px;
}

.account-support__subtitle{
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--support-muted);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 50px;
}

.account-support__create-toggle,
.account-support__submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}

.account-support__notice{
  padding: 13px 15px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.account-support__notice--success{
  border: 1px solid rgba(124,216,125,.28);
  background: rgba(124,216,125,.1);
  color: #9ce49a;
}

.account-support__notice--error{
  border: 1px solid rgba(244,67,54,.32);
  background: rgba(244,67,54,.1);
  color: #ff9ea1;
}

.account-support__new-ticket{
  display: none;
  padding: 20px;
}

.account-support__new-ticket.is-open{
  display: block;
}

.account-support__form,
.account-support__reply-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-support__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.account-support__field{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.account-support__field--full{
  grid-column: 1 / -1;
}

.account-support__field span{
  color: var(--text-color);
  font-size: 14px;
  font-weight: 600;
}

.account-support__field input,
.account-support__field select,
.account-support__field textarea{
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: var(--support-field);
  color: var(--text-color);
  font: inherit;
  line-height: 1.45;
  outline: none;
}

.account-support__field textarea{
  min-height: 118px;
  resize: vertical;
}

.account-support__field input[type="file"]{
  cursor: pointer;
}

.account-support__field small{
  color: var(--support-muted);
  font-size: 12px;
  line-height: 1.4;
}

.account-support__field input:focus,
.account-support__field select:focus,
.account-support__field textarea:focus{
  border-color: var(--support-accent);
}

.account-support__layout{
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px;
}

.account-support__sidebar,
.account-support__content{
  min-width: 0;
  padding: 18px;
}

.account-support__sidebar-head,
.account-support__thread-head,
.account-support__ticket-top,
.account-support__message-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-support__sidebar-head{
  margin-bottom: 14px;
}

.account-support__sidebar-head h4,
.account-support__thread-head h4{
  font-size: 18px;
}

.account-support__sidebar-head span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--support-soft);
  color: var(--support-muted);
  font-size: 12px;
  font-weight: 700;
}

.account-support__tickets-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 680px;
  overflow: auto;
  padding-right: 2px;
}

.account-support__ticket-card{
  display: block;
  padding: 13px;
  border: 1px solid var(--support-line);
  border-radius: 10px;
  background: var(--support-field);
  color: var(--text-color);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

.account-support__ticket-card:hover,
.account-support__ticket-card.is-active{
  border-color: rgba(248,230,169,.45);
  background: rgba(255,255,255,.08);
  color: var(--text-color);
  text-decoration: none;
}

.account-support__ticket-top strong{
  font-size: 13px;
}

.account-support__new-badge,
.account-support__status,
.account-support__priority{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.account-support__new-badge{
  background: rgba(244,67,54,.14);
  color: #ff9ea1;
}

.account-support__ticket-subject{
  margin-top: 8px;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.account-support__ticket-meta,
.account-support__thread-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.account-support__ticket-meta{
  margin-top: 10px;
}

.account-support__ticket-date{
  margin-top: 10px;
  color: var(--support-muted);
  font-size: 12px;
}

.account-support__status{
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.78);
}

.account-support__status--new,
.account-support__status--waiting_user{
  background: rgba(255,216,128,.13);
  color: #ffd98e;
}

.account-support__status--open,
.account-support__status--in_progress{
  background: rgba(144,202,249,.13);
  color: #90caf9;
}

.account-support__status--answered{
  background: rgba(124,216,125,.13);
  color: #9ce49a;
}

.account-support__status--resolved{
  background: rgba(128,224,232,.13);
  color: #9ee9f0;
}

.account-support__status--closed{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
}

.account-support__priority{
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.76);
  display: none;
}

.account-support__priority--urgent{
  background: rgba(244,67,54,.14);
  color: #ff9ea1;
}

.account-support__priority--high{
  background: rgba(255,152,0,.13);
  color: #ffc46b;
}

.account-support__priority--normal{
  background: rgba(144,202,249,.13);
  color: #90caf9;
}

.account-support__priority--low{
  background: rgba(124,216,125,.13);
  color: #9ce49a;
}

.account-support__empty,
.account-support__closed-note{
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 10px;
  background: var(--support-soft);
  color: var(--support-muted);
  font-size: 14px;
  line-height: 1.6;
}

.account-support__empty--content{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  text-align: center;
}

.account-support__thread-head{
  align-items: flex-start;
  margin: -2px -2px 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--support-line);
}

.account-support__thread-head p{
  margin: 6px 0 0;
  color: var(--support-muted);
  font-size: 13px;
  line-height: 1.5;
}

.account-support__messages{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 80px;
  margin-top: 50px;
}

.account-support__message{
  align-self: flex-start;
  max-width: min(720px, 92%);
  padding: 13px 14px;
  border: 1px solid var(--support-line);
  border-radius: 12px;
  background: var(--support-field);
}

.account-support__message.is-admin{
  align-self: flex-end;
  border-color: rgba(248,230,169,.24);
  background: rgba(248,230,169,.08);
}

.account-support__message-head{
  margin-bottom: 8px;
  color: var(--support-muted);
  font-size: 12px;
  font-weight: 700;
}

.account-support__message-text{
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.account-support__attachments{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.account-support__attachments a{
  padding: 6px 10px;
  border: 1px solid rgba(248,230,169,.24);
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  color: var(--support-accent);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.account-support__reply-form{
  padding-top: 16px;
  border-top: 1px solid var(--support-line);
}

.account-support__form-actions{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.support-page__section{
  margin: 80px 0;
}

.support-page .account-support{
  position: relative;
  z-index: 2;
}

.account-support__attachments img,
.rewasd-support-attachments img{
  display: block;
  width: 132px;
  height: 92px;
  max-width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.account-support__attachments video,
.rewasd-support-attachments video{
  display: block;
  width: 180px;
  max-width: 100%;
  max-height: 118px;
  border-radius: 8px;
  background: #111;
}

.support-auth{
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto;
  padding: 38px 32px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(248,230,169,.1), rgba(255,255,255,0) 48%),
    #262626;
  color: var(--text-color);
  text-align: center;
}

.support-auth__title{
  margin: 0;
  color: var(--text-color);
  font-family: var(--secound-font-family);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.support-auth__text{
  max-width: 520px;
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.6;
}

.support-auth__actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.support-hub{
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
}

.support-hub__header{
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
}

.support-page-kicker{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  text-align: center;
}

.support-tickets__top .support-page-kicker{
  margin-bottom: 14px;
}

.support-hub__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--accent, #F8E6A9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.support-hub__beta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(89, 214, 124, .58);
  border-radius: 4px;
  background: rgba(89, 214, 124, .12);
  color: #72e28e;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
}

.support-hub__title{
  margin: 0;
  color: var(--text-color);
  font-family: var(--secound-font-family);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
}

.support-hub__name{
  color: var(--support-accent);
  font-weight: 700;
  text-shadow: 0 0 18px rgba(248,230,169,.18);
}

.support-hub__cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.support-hub-card{
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: #262626;
}

.support-hub-card--accent{
  border-color: rgba(248,230,169,.26);
  background:
    linear-gradient(145deg, rgba(248,230,169,.1), rgba(255,255,255,0) 52%),
    #262626;
}

.support-hub-card__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: var(--accent, #F8E6A9);
}

.support-hub-card__content{
  flex: 1;
}

.support-hub-card__content h2{
  margin: 0 0 10px;
  color: var(--text-color);
  font-family: var(--secound-font-family);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}

.support-hub-card__content p{
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.55;
}

.support-hub-card__button{
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.support-page .account-support__create-page{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px;
}

.account-support--create .account-support__form{
  gap: 18px;
}

.account-support--create .account-support__grid{
  grid-template-columns: 1fr;
  gap: 18px;
}

.account-support--create .account-support__field{
  gap: 10px;
}

.account-support--create .account-support__field input,
.account-support--create .account-support__field select{
  min-height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.account-support--create .account-support__field select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.72) 50%),
    linear-gradient(135deg, rgba(255,255,255,.72) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  padding-right: 42px;
}

.account-support__create-head{
  margin-bottom: 24px;
}

.account-support__back-link{
  display: inline-flex;
  width: fit-content;
  margin-bottom: 16px;
  color: var(--support-accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 50px;
}

.account-support__back-link:hover{
  color: var(--support-accent);
  text-decoration: none;
}

.support-breadcrumbs{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  color: rgba(255,255,255,.64);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

.support-breadcrumbs a{
  color: #fff;
  text-decoration: none;
  transition: color .2s ease;
}

.support-breadcrumbs a:hover{
  color: var(--support-accent);
  text-decoration: none;
}

.support-breadcrumbs span:last-child{
  color: var(--support-accent);
}

.account-support__create-breadcrumbs{
  width: min(980px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.account-support__alert{
  padding: 14px 16px;
  border: 1px solid rgba(244,67,54,.38);
  border-radius: 10px;
  background: rgba(244,67,54,.12);
  color: #ffb3b6;
  font-size: 14px;
  line-height: 1.45;
}

.account-support__field em{
  color: #ff9ea1;
  font-style: normal;
}

.support-tickets{
  --support-soft: rgba(255,255,255,0.06);
  --support-muted: rgba(255,255,255,0.72);
  --support-accent: var(--accent, #F8E6A9);
  position: relative;
  z-index: 2;
  color: #fff;
}

.support-tickets__top{
  margin-bottom: 20px;
}

.support-tickets__title{
  margin: 0;
  color: var(--text-color);
  font-family: var(--secound-font-family);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.support-tickets__tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.support-tickets__tab{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(38,38,38,.74);
  color: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.support-tickets__tab span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 12px;
}

.support-tickets__tab:hover,
.support-tickets__tab.is-active{
  border-color: rgba(248,230,169,.42);
  background: rgba(248,230,169,.12);
  color: #fff;
}

.support-tickets__tab.is-active span{
  background: #f8e6a9;
  color: #1d1d1d;
}

.support-tickets__actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
}

.support-tickets__search{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  max-width: 620px;
  width: 100%;
  margin: 0;
}

.support-tickets__search input{
  min-height: 42px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(38,38,38,.92);
  color: #fff;
  font-size: 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.support-tickets__search input::placeholder{
  color: rgba(255,255,255,.48);
}

.support-tickets__search input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent 44%, #fff 45%, #fff 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #fff 45%, #fff 55%, transparent 56%);
  opacity: .78;
}

.support-tickets__search input::-webkit-search-cancel-button:hover{
  opacity: 1;
}

.support-tickets__search input:focus{
  border-color: var(--accent, #F8E6A9);
  background: #262626;
}

.support-tickets__search-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: #343434;
  color: #fff;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.support-tickets__search-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(248,230,169,.5);
  background: rgba(248,230,169,.12);
  color: var(--accent, #F8E6A9);
}

.support-tickets__create{
  min-height: 42px;
  flex: 0 0 auto;
  padding: 0 18px;
  white-space: nowrap;
}

.support-tickets__layout{
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.support-tickets__list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-tickets__list--full{
  width: 100%;
}

.support-tickets .account-support__back-link{
  color: #fff;
}

.support-tickets .account-support__back-link:hover{
  color: #fff;
  text-decoration: none;
}

.support-tickets .account-support__empty,
.support-tickets .account-support__closed-note{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
}

.support-ticket-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: #262626;
  color: #fff;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.support-ticket-row:hover,
.support-ticket-row.is-active{
  border-color: rgba(248,230,169,.42);
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration: none;
}

.support-ticket-row-group{
  margin: 16px 0 2px;
  color: rgba(248,230,169,.88);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.rewasd-support-assignee-badge{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.support-ticket-row__main{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.support-ticket-row__main strong,
.support-ticket-row__main span{
  overflow-wrap: anywhere;
}

.support-ticket-row__main strong{
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}

.support-ticket-row__main span{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.4;
}

.support-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.support-pagination .page-numbers{
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: #262626;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

.support-pagination .page-numbers.current,
.support-pagination .page-numbers:hover{
  border-color: rgba(248,230,169,.45);
  background: rgba(248,230,169,.12);
  color: var(--support-accent);
}

.support-ticket-view{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 18px;
  align-items: start;
}

.support-ticket-view__chat,
.support-ticket-meta-card{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: #262626;
}

.support-ticket-view__chat{
  min-width: 0;
  padding: 18px;
}

.support-ticket-view__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 16px;
}

.support-ticket-view__head span{
  color: rgba(255,255,255,.58);
  font-size: 12px;
  font-weight: 700;
}

.support-ticket-view__head h2{
  margin: 5px 0 0;
  color: var(--text-color);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.support-ticket-close-form{
  margin: 0;
}

.support-ticket-close-form button{
  cursor: pointer;
}

.support-close-modal[hidden]{
  display: none;
}

.support-close-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.support-close-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(6px);
}

.support-close-modal__dialog{
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  padding: 24px;
  border: 1px solid rgba(248,230,169,.24);
  border-radius: 16px;
  background: #262626;
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  color: #fff;
}

.support-close-modal__dialog h3{
  margin: 0 0 10px;
  color: var(--support-accent);
  font-size: 22px;
  font-weight: 800;
}

.support-close-modal__dialog p{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.55;
}

.support-close-modal__actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.support-close-modal__actions .bordered-button,
.support-close-modal__actions .gradient-button{
  min-height: 36px;
  padding: 0 16px;
  font-size: 13px;
}

.support-modal-open{
  overflow: hidden;
}

.support-ticket-view__messages{
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
}

.support-ticket-view__messages .account-support__message-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(760px, 94%);
}

.support-ticket-view__messages .account-support__message-row.is-admin{
  align-self: flex-start;
}

.support-ticket-view__messages .account-support__message-row.is-user{
  align-self: flex-end;
  flex-direction: row-reverse;
}

.support-ticket-view__messages .account-support__message-row.is-system{
  align-self: center;
  width: min(680px, 100%);
  max-width: 100%;
  justify-content: center;
}

.account-support__message-avatar{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: #1f1f1f;
  object-fit: cover;
}

.support-ticket-view__messages .account-support__message{
  max-width: none;
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: #303030;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.support-ticket-view__messages .account-support__message.is-admin{
  border-color: rgba(116,180,255,.28);
  background: rgba(69,105,145,.2);
}

.support-ticket-view__messages .account-support__message.is-system{
  width: 100%;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.74);
  text-align: center;
}

.support-ticket-view__messages .account-support__message.is-system .account-support__message-head{
  justify-content: center;
}

.support-ticket-view__messages .account-support__message.is-system .account-support__message-name{
  color: rgba(255,255,255,.62);
}

.support-ticket-view__messages .account-support__message-head{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.support-ticket-view__messages .account-support__message-head > span:not(.account-support__message-name){
  display: none;
}

.account-support__message-name{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--support-accent);
  font-weight: 800;
}

.account-support__staff-badge{
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 2px 6px;
  border: 1px solid rgba(248,230,169,.45);
  border-radius: 4px;
  background: rgba(248,230,169,.14);
  color: #f8e6a9;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}

.support-ticket-view__messages .account-support__message-head time{
  color: rgba(255,255,255,.56);
  font-size: 12px;
  font-weight: 600;
}

.account-support__message-order{
  float: right;
  margin: 0 0 8px 12px;
  padding: 5px 9px;
  border: 1px solid rgba(248,230,169,.24);
  border-radius: 999px;
  color: var(--support-accent);
  font-size: 12px;
  font-weight: 800;
}

.support-ticket-meta-card{
  padding: 18px;
}

.support-ticket-meta-card__status{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.support-ticket-meta-card__status > span:first-child{
  color: rgba(255,255,255,.62);
  font-size: 13px;
  font-weight: 700;
}

.support-ticket-meta-card dl{
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
}

.support-ticket-meta-card dt{
  color: rgba(255,255,255,.48);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.support-ticket-meta-card dd{
  margin: -7px 0 0;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.support-order-number{
  cursor: help;
  color: var(--support-accent) !important;
  font-weight: 800;
}

.support-ticket-reply{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: #2d2d2d;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.support-ticket-reply.is-open,
.support-ticket-reply:focus-within{
  border-color: rgba(248,230,169,.46);
  background: #313131;
  box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}

.support-ticket-reply textarea{
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text-color);
  resize: vertical;
  outline: none;
  line-height: 1.55;
  transition: min-height .2s ease, background .2s ease, border-color .2s ease;
}

.support-ticket-reply:focus-within textarea{
  min-height: 190px;
  border-bottom-color: rgba(248,230,169,.22);
  background: rgba(248,230,169,.045);
}

.support-ticket-reply.is-open textarea{
  min-height: 190px;
  border-bottom-color: rgba(248,230,169,.22);
  background: rgba(248,230,169,.045);
}

.support-ticket-reply__panel{
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px 14px;
}

.support-ticket-reply.is-open .support-ticket-reply__panel,
.support-ticket-reply:focus-within .support-ticket-reply__panel{
  display: flex;
}

.support-ticket-reply__file{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  color: var(--text-color);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.support-ticket-reply__file input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.support-ticket-reply__actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.support-ticket-reply__actions .bordered-button,
.support-ticket-reply__actions .gradient-button{
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
}

@media (max-width: 980px){
  .account-support__hero{
    align-items: flex-start;
    flex-direction: column;
  }

  .account-support__layout,
  .account-support__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .account-support{
    gap: 14px;
  }

  .account-support__hero,
  .account-support__new-ticket,
  .account-support__sidebar,
  .account-support__content{
    padding: 14px;
  }

  .account-support__title{
    font-size: 20px;
  }

  .account-support__create-toggle,
  .account-support__submit{
    width: 100%;
  }

  .account-support__thread-head,
  .account-support__message-head{
    align-items: flex-start;
    flex-direction: column;
  }

  .account-support__message,
  .account-support__message.is-admin{
    align-self: stretch;
    max-width: 100%;
  }

  .support-page__section{
    margin: 50px 0;
  }

  .support-auth{
    min-height: 280px;
    padding: 30px 20px;
  }

  .support-auth__title{
    font-size: 24px;
  }

  .support-hub__title{
    font-size: 24px;
  }

  .support-hub__cards{
    grid-template-columns: 1fr;
  }

  .support-hub-card{
    min-height: 0;
    padding: 18px;
  }

  .support-hub-card__button{
    width: 100%;
  }

  .support-tickets__layout,
  .support-ticket-view{
    grid-template-columns: 1fr;
  }

  .support-tickets__search{
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .support-tickets__actions{
    align-items: stretch;
    flex-direction: column;
  }

  .support-tickets__create{
    width: 100%;
  }

  .support-ticket-row{
    align-items: flex-start;
    flex-direction: column;
  }

  .support-ticket-view__head{
    flex-direction: column;
  }

  .support-ticket-view__close,
  .support-ticket-reply__actions .bordered-button,
  .support-ticket-reply__actions .gradient-button{
    width: 100%;
  }

  .support-ticket-reply__panel{
    align-items: stretch;
    flex-direction: column;
  }

  .support-ticket-reply__file{
    justify-content: center;
    width: 100%;
  }

  .support-ticket-reply__actions{
    width: 100%;
    margin-left: 0;
  }

  .support-close-modal__actions{
    flex-direction: column;
  }

  .support-close-modal__actions .bordered-button,
  .support-close-modal__actions .gradient-button,
  .support-close-modal__actions .support-ticket-close-form{
    width: 100%;
  }
}