[hidden] { display: none !important; }

.account-view {
  min-height: 75vh;
  padding: 65px 0 100px;
}
.account-head, .account-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.account-head h1 {
  font-size: clamp(38px,6vw,62px);
  letter-spacing: -3px;
  margin: 15px 0 5px;
}
.account-subtitle, .account-hint, .order-date {
  color: #9997aa;
  font-size: 12px;
}
.account-actions { display: flex; gap: 10px; }
.account-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 15px;
  margin: 35px 0;
}
.account-card, .account-panel {
  background: linear-gradient(145deg,#171522,#101019);
  border: 1px solid #242434;
  border-radius: 18px;
  padding: 25px;
}
.account-card-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #aaa2ba;
}
.account-number {
  font-size: 35px;
  font-weight: 800;
  margin: 12px 0 3px;
}
.account-date { font-size: 22px; }
.account-panel { margin-top: 22px; }
.account-panel-head { margin-bottom: 24px; }
.account-panel h2, .profile-panel h2 {
  font-size: 25px;
  margin: 9px 0 0;
}
.account-empty {
  color: #9997aa;
  font-size: 13px;
  padding: 20px 0;
}
.subscription-item {
  border: 1px solid #383047;
  background: #ffffff05;
  border-radius: 14px;
  padding: 22px;
  margin-top: 12px;
}
.subscription-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.subscription-name { font-size: 18px; font-weight: 800; }
.subscription-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 18px 0;
  color: #9997aa;
  font-size: 11px;
}
.status-pill {
  border-radius: 30px;
  padding: 6px 11px;
  font-size: 9px;
  font-weight: 800;
  background: #ffffff0c;
  color: #aaa;
}
.status-pill.active { background: #35d99618; color: #76e8b5; }
.status-pill.pending { color: #e9c477; background: #e9c47715; }
.status-pill.error { color: #ff9baa; background: #ff829a18; }
.subscription-link {
  background: #0b0a12;
  border: 1px solid #302a3c;
  border-radius: 10px;
  padding: 12px;
  color: #aaa2ba;
  font-size: 11px;
  overflow-wrap: anywhere;
  margin-bottom: 12px;
}
.orders-list { display: grid; }
.order-row, .profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid #242434;
  font-size: 12px;
}
.order-amount { font-size: 15px; font-weight: 800; }
.profile-row span { color: #9997aa; }
@media(max-width:650px) {
  .account-view { padding-top: 35px; }
  .account-head { align-items: flex-start; }
  .account-head h1 { font-size: 39px; }
  .account-actions { flex-direction: column; }
  .account-grid { grid-template-columns: 1fr; gap: 10px; margin: 25px 0; }
  .account-card, .account-panel { padding: 19px; }
  .account-number { font-size: 29px; }
  .account-panel-head { align-items: flex-start; flex-direction: column; }
  .subscription-top { align-items: flex-start; }
  .order-row { align-items: flex-start; }
}

/* Compact account layout */
.account-view {
  max-width: 1080px;
  min-height: 0;
  padding-top: 38px;
  padding-bottom: 65px;
}
.account-head h1 { font-size: 42px; }
.account-grid { gap: 12px; margin: 22px 0; }
.account-card { padding: 16px 19px; border-radius: 14px; }
.account-number { font-size: 27px; margin: 7px 0 2px; }
.account-hint { font-size: 10px; }
.account-panel { padding: 19px; margin-top: 14px; border-radius: 15px; }
.account-panel-head { margin-bottom: 15px; }
.account-panel h2, .profile-panel h2 { font-size: 21px; }
.subscription-item { padding: 16px; margin-top: 10px; }
.subscription-name { font-size: 15px; }
.subscription-meta { margin: 12px 0; font-size: 11px; }
.subscription-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-row, .profile-row { padding: 12px 0; }
@media(max-width:650px) {
  .account-view { padding-top: 28px; }
  .account-head h1 { font-size: 35px; }
  .account-card { padding: 15px; }
  .account-panel { padding: 16px; }
}


/* Compact four-card account statistics */
.account-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.account-card {
  min-width: 0;
  padding: 13px 15px;
  border-radius: 13px;
}

.account-card-label {
  font-size: 8px;
  letter-spacing: 1px;
  line-height: 1.5;
}

.account-number {
  font-size: 25px;
  margin: 6px 0 2px;
}

.account-hint {
  font-size: 10px;
}

.account-device-card .account-number {
  color: #76e8b5;
}

@media(max-width:900px) {
  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:650px) {
  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .account-card { padding: 12px; }
  .account-number { font-size: 23px; }
}

/* Final compact account layout */
.account-view {
  max-width: 1020px;
  min-height: 0;
  padding-top: 25px;
  padding-bottom: 45px;
}

.account-head h1 {
  font-size: 36px;
  margin: 8px 0 3px;
}

.account-grid {
  gap: 9px;
  margin: 15px 0;
}

.account-card {
  padding: 11px 14px;
  border-radius: 12px;
}

.account-card-label {
  font-size: 8px;
}

.account-number {
  font-size: 23px;
  margin: 5px 0 1px;
}

.account-hint {
  font-size: 9px;
}

.account-panel {
  padding: 15px;
  margin-top: 11px;
  border-radius: 14px;
}

.account-panel-head {
  margin-bottom: 12px;
}

.account-panel h2,
.profile-panel h2 {
  font-size: 19px;
}

.subscription-item {
  padding: 12px 14px;
  margin-top: 9px;
}

.subscription-name {
  font-size: 14px;
}

.subscription-meta {
  margin: 8px 0;
  font-size: 10px;
}

.subscription-link {
  padding: 9px;
  font-size: 10px;
}

.subscription-item .btn {
  padding: 9px 13px;
  font-size: 10px;
}

.order-row,
.profile-row {
  padding: 9px 0;
  font-size: 11px;
}

/* Collapsible order history */
.orders-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.orders-summary::-webkit-details-marker {
  display: none;
}

.orders-title {
  display: block;
  margin-top: 5px;
  font-size: 19px;
  font-weight: 800;
}

.orders-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #393047;
  border-radius: 9px;
  color: #b99aff;
  font-size: 21px;
  transition: transform .2s ease;
}

.orders-details[open] .orders-arrow {
  transform: rotate(180deg);
}

.orders-list {
  padding-top: 10px;
}

@media(max-width:650px) {
  .account-view {
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .account-head h1 {
    font-size: 31px;
  }

  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .account-card {
    padding: 10px;
  }

  .account-number {
    font-size: 21px;
  }

  .account-panel {
    padding: 13px;
  }
}

/* Device limits per subscription */
.account-device-card {
  align-self: stretch;
}

.device-limits-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.device-limit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  min-width: 0;
}

.device-limit-plan {
  color: #aaa2ba;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-limit-value {
  color: #76e8b5;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.account-device-card .account-hint {
  margin-top: 8px;
}


/* Выделенный срок действия подписки */
.account-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.subscription-expiry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
}

.subscription-expiry-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.subscription-expiry-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.subscription-expiry-hint {
  font-size: 12px;
  opacity: .8;
}

.subscription-expiry-date {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 800;
  white-space: nowrap;
}

.expiry-safe {
  color: #176b43;
  background: #edf8f1;
  border-color: #c4e7d0;
}

.expiry-warning {
  color: #895500;
  background: #fff6e6;
  border-color: #f1d9a9;
}

.expiry-critical,
.expiry-expired {
  color: #a62929;
  background: #fff0ee;
  border-color: #efc4bf;
}

.expiry-unknown {
  color: #555;
  background: #f2f3f5;
  border-color: #dedfe3;
}

/* Дата регистрации в разделе профиля */
.profile-created {
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid rgba(120, 120, 140, .22);
  border-radius: 12px;
}

.profile-created-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  opacity: .75;
}

.profile-created-date {
  margin-top: 6px;
  font-size: 23px;
  font-weight: 800;
}

.profile-created-hint {
  margin-top: 3px;
  font-size: 12px;
  opacity: .7;
}

@media (max-width: 700px) {
  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subscription-expiry {
    padding: 12px;
  }

  .subscription-expiry-date {
    font-size: 18px;
  }
}


/* Компактный срок действия подписки */
.subscription-expiry {
  margin-top: 10px;
  padding: 8px 12px;
  gap: 10px;
  border-radius: 9px;
  min-height: 0;
}

.subscription-expiry-copy {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.subscription-expiry-label {
  font-size: 9px;
  line-height: 1.3;
}

.subscription-expiry-hint {
  font-size: 11px;
  line-height: 1.3;
}

.subscription-expiry-date {
  font-size: 16px;
  line-height: 1.2;
}

/* Дата регистрации — обычная строка внутри общего профиля */
.profile-created-row {
  margin-top: 0;
}

.profile-created-row span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-created-row span small {
  font-size: 11px;
  font-weight: 400;
  opacity: .65;
}

.profile-created-row strong {
  font-size: 15px;
  font-weight: 800;
}

@media (max-width: 700px) {
  .subscription-expiry {
    padding: 8px 10px;
  }

  .subscription-expiry-date {
    font-size: 15px;
  }
}


/* Срок действия без цветной заливки */
.subscription-expiry {
  background: transparent !important;
  border-color: transparent !important;
  padding-left: 0;
  padding-right: 0;
}


/* Счётчик зарегистрированных устройств */
.device-limit-value {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* Единая карточка профиля с шапкой и действиями */
.profile-panel {
  overflow: hidden;
}

.profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(130, 130, 150, .2);
}

.profile-header-main {
  min-width: 0;
}

.profile-header h1 {
  margin: 7px 0 5px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  font-weight: 800;
}

.profile-header .account-subtitle {
  margin: 0;
  font-size: 14px;
  opacity: .7;
  overflow-wrap: anywhere;
}

.profile-header .account-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  flex-shrink: 0;
}

.profile-header .account-actions .btn {
  min-height: 40px;
  padding: 9px 15px;
  cursor: pointer;
}

.profile-details h2 {
  margin: 6px 0 15px;
  font-size: 20px;
}

.profile-details .profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(130, 130, 150, .14);
}

.profile-details .profile-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.profile-details .profile-row strong {
  text-align: right;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .profile-header {
    flex-direction: column;
    gap: 16px;
  }

  .profile-header .account-actions {
    width: 100%;
  }

  .profile-header .account-actions .btn {
    flex: 1;
  }

  .profile-details .profile-row {
    align-items: flex-start;
  }
}

/* Ограничиваем ширину карточки профиля */
.profile-panel {
  max-width: 780px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 700px) {
  .profile-panel {
    max-width: 100%;
  }
}

/* Ограничиваем ширину карточки профиля */
.profile-panel {
  max-width: 780px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 700px) {
  .profile-panel {
    max-width: 100%;
  }
}

/* Уменьшаем только ширину профиля */
.profile-panel {
  max-width: 650px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Профиль по ширине как остальные блоки кабинета */
.profile-panel {
  max-width: none !important;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

/* Компактная высота карточки профиля */
.profile-panel {
  padding: 18px 24px !important;
}

.profile-header {
  padding-bottom: 12px;
  margin-bottom: 12px;
  gap: 14px;
}

.profile-header h1 {
  margin: 4px 0;
}

.profile-header .account-subtitle {
  font-size: 13px;
}

.profile-header .account-actions .btn {
  min-height: 34px;
  padding: 6px 13px;
}

.profile-details h2 {
  margin: 4px 0 8px;
  font-size: 18px;
}

.profile-details .profile-row {
  padding: 8px 0;
  min-height: 38px;
}

.profile-details .profile-row:last-child {
  padding-bottom: 0;
}

.profile-created-row span small {
  font-size: 10px;
}

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

@media (max-width: 600px) {
  .profile-panel {
    padding: 15px !important;
  }

  .profile-details .profile-row {
    padding: 9px 0;
  }
}

/* Ещё более компактный профиль */
.profile-panel {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.profile-header {
  padding-bottom: 8px;
  margin-bottom: 8px;
  gap: 10px;
}

.profile-header h1 {
  margin: 2px 0;
  font-size: 25px;
}

.profile-header .eyebrow {
  font-size: 10px;
}

.profile-header .account-subtitle {
  font-size: 12px;
  line-height: 1.2;
}

.profile-header .account-actions .btn {
  min-height: 30px;
  padding: 4px 11px;
  font-size: 12px;
}

.profile-details h2 {
  margin: 2px 0 4px;
  font-size: 16px;
}

.profile-details .profile-row {
  padding: 5px 0;
  min-height: 30px;
  font-size: 12px;
}

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

.profile-created-row span small {
  font-size: 9px;
}

@media (max-width: 600px) {
  .profile-header {
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  .profile-panel {
    padding: 12px !important;
  }
}


/* Mobile layout refinements */
@media (max-width: 700px) {
  .account-head {
    align-items: flex-start;
    gap: 14px;
  }

  .account-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .account-actions .btn {
    width: auto;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 14px;
  }

  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .account-grid > .account-card:last-child {
    grid-column: 1 / -1;
  }

  .account-card {
    min-width: 0;
    padding: 13px;
  }

  .account-card-label {
    font-size: 10px;
    letter-spacing: .07em;
  }

  .account-panel {
    min-width: 0;
    padding: 16px;
  }

  .account-panel-head {
    align-items: flex-start;
    gap: 14px;
  }

  #buyMoreButton {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
  }

  .subscription-list,
  .subscription-list > *,
  .subscription-expiry {
    min-width: 0;
    max-width: 100%;
  }

  .subscription-expiry {
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .subscription-expiry-date {
    font-size: 18px;
    white-space: normal;
  }

  .subscription-list a,
  .subscription-list input {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Исправление расположения кнопок профиля на телефонах */
@media (max-width: 700px) {
  .profile-header .account-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    align-self: flex-start !important;
    width: auto !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .profile-header .account-actions .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
  }
}

/* Кнопки профиля справа на мобильных устройствах */
@media (max-width: 700px) {
  .profile-header .account-actions {
    justify-content: flex-end !important;
    align-self: flex-end !important;
    margin-left: auto !important;
  }
}
.subscription-devices-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.devices-heading {
  font-weight: 700;
  margin-bottom: 12px;
}

.hwid-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.hwid-device-info {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hwid-device-info strong {
  display: block;
  margin-bottom: 6px;
}

.hwid-device-details {
  display: grid;
  gap: 4px;
  font-size: 12px;
  opacity: .7;
}

.device-remove {
  flex-shrink: 0;
  background: rgba(255,75,75,.12);
  color: #ff8585;
  border: 1px solid rgba(255,75,75,.25);
}

.devices-empty,
.devices-error {
  padding: 10px 0;
  font-size: 13px;
  opacity: .75;
}

.devices-toggle {
  margin-top: 12px;
}

@media (max-width: 520px) {
  .hwid-device {
    align-items: flex-start;
    flex-direction: column;
  }

  .device-remove {
    width: 100%;
  }
}
.subscription-item > .btn + .btn {
  margin-top: 24px !important;
}
.subscription-actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.subscription-actions > .btn {
  width: auto;
  align-self: flex-start;
  margin: 0 !important;
}


/* Покупка дополнительных устройств */
.device-slot-purchase {
  margin-top: 15px;
  padding: 13px 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  background: transparent;
}

.device-slot-purchase > strong {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}

.device-slot-hint {
  color: #9997aa;
  font-size: 11px;
  line-height: 1.5;
}

.device-slot-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.device-slot-select {
  min-width: 130px;
  padding: 10px 12px;
  color: inherit;
  background: #0b0a12;
  border: 1px solid #383047;
  border-radius: 9px;
}

.device-slot-price {
  font-size: 13px;
  font-weight: 700;
}

.device-slot-controls .btn {
  margin: 0 !important;
}

.device-slot-controls .btn:disabled {
  opacity: .6;
  cursor: wait;
}

@media(max-width: 520px) {
  .device-slot-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .device-slot-controls .btn {
    width: 100%;
  }
}


/* Device capacity summary in subscription cards */
.subscription-capacity {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #383047;
  border-radius: 12px;
  background: #ffffff05;
}

.subscription-capacity-title {
  margin-bottom: 11px;
  color: #9997aa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.subscription-capacity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.subscription-capacity-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.subscription-capacity-item span {
  color: #9997aa;
  font-size: 11px;
}

.subscription-capacity-item strong {
  color: #f0edf7;
  font-size: 21px;
  font-weight: 800;
}

@media (max-width: 650px) {
  .subscription-capacity {
    padding: 12px;
  }

  .subscription-capacity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }

  .subscription-capacity-item strong {
    font-size: 19px;
  }
}


/* Subscription QR modal */
.subscription-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.subscription-actions .btn {
  margin: 0;
}

.qr-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 5, 12, .84);
  backdrop-filter: blur(9px);
}

.qr-modal {
  width: min(100%, 420px);
  padding: 23px;
  border: 1px solid #383047;
  border-radius: 20px;
  background: linear-gradient(145deg, #191624, #101019);
  box-shadow: 0 25px 90px #0009;
}

.qr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.qr-modal-title {
  font-size: 19px;
  color: #fff;
}

.qr-modal-close {
  width: 36px;
  height: 36px;
  border: 1px solid #383047;
  border-radius: 10px;
  background: #ffffff08;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}

.qr-modal-description {
  margin: 12px 0 19px;
  color: #aaa2ba;
  font-size: 12px;
  line-height: 1.6;
}

.qr-modal-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-radius: 14px;
  background: #fff;
}

.qr-modal-image {
  display: block;
  width: min(100%, 320px);
  height: auto;
  image-rendering: pixelated;
}

.qr-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.qr-modal-actions .btn {
  flex: 1;
  justify-content: center;
  text-align: center;
}

@media(max-width: 480px) {
  .qr-modal {
    padding: 17px;
  }

  .qr-modal-actions {
    flex-direction: column;
  }
}


/* QR button inside subscription link */
.subscription-link {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subscription-link-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subscription-link .subscription-qr-button {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
}

@media(max-width: 480px) {
  .subscription-link {
    gap: 8px;
    padding: 9px;
  }

  .subscription-link .subscription-qr-button {
    padding: 8px 10px;
    font-size: 11px;
  }
}


/* Управление устройствами внутри блока дополнительных слотов */
.device-slot-purchase > .device-slot-manage {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
  margin: 14px 0 0 !important;
}

.device-slot-purchase > .subscription-devices-panel {
  margin-top: 10px;
  width: 100%;
}


/* Продление подписки */
.subscription-renewal {
  margin-top: 15px;
  padding: 13px 0 0;
  border-top: 1px solid rgba(255,255,255,.10);
}

.subscription-renewal > strong {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}

.renewal-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.renewal-controls .btn {
  margin: 0 !important;
}

.renewal-controls .btn:disabled {
  opacity: .6;
  cursor: wait;
}

@media(max-width: 520px) {
  .renewal-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .renewal-controls .btn {
    width: 100%;
  }
}