/*
 * Styles for the pages the original PHP theme never had: sign-in extras, checkout, account, invoice, reviews, support
 * chat and warranty. They are built from the theme's own classes (login-form, shop-checkout-*, user-card,
 * invoice-*, …) and its CSS variables; only what the theme has no equivalent for is defined here.
 * Linked after overrides.css in index.html, so style.css and overrides.css stay as they are.
 */

/* ---------- forms ---------- */

/* show / hide button inside a password box */
.password-field {
  position: relative;
}
.password-field .form-control.form-control {
  padding-right: 48px;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 4px;
  line-height: 1;
  color: var(--body-text-color);
}
.password-toggle:hover {
  color: var(--theme-color);
}

/* a small red / grey line under a field */
.field-note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--body-text-color);
}
.field-note.is-error {
  color: var(--color-red);
}

/* native <select> that looks like the theme's inputs */
.user-form .form-control.form-select,
.shop-checkout-form .form-control.form-select,
.login-form .form-control.form-select {
  height: auto;
  padding-right: 40px;
}

/* ---------- checkout ---------- */

/* a block of the checkout form (the theme's accordion-step look, always open) */
.checkout-card {
  border: 1px solid var(--border-info-color);
  border-radius: 8px;
  padding: 25px 25px 10px;
  margin-bottom: 25px;
  background: var(--color-white);
}
.checkout-card > h5 {
  margin-bottom: 20px;
  font-weight: 600;
}

/* a saved address the shopper can pick */
.address-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--border-info-color);
  border-radius: 10px;
  padding: 12px 15px;
  transition: var(--transition2);
}
.address-option strong {
  display: block;
  color: var(--color-dark);
}
.address-option span {
  display: block;
  font-size: 14px;
  color: var(--body-text-color);
}
.address-option:hover,
.address-option.is-selected {
  border-color: var(--theme-color);
}

/* the order summary beside the form (built on .shop-cart-summary) */
.checkout-summary {
  margin-left: 0;
}
.checkout-summary .checkout-items {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.checkout-summary .checkout-items li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.checkout-item-img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--border-info-color);
}
.checkout-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.checkout-item-info {
  flex: 1;
  min-width: 0;
}
.checkout-item-info a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-dark);
  font-weight: 500;
  line-height: 1.3;
}
.checkout-item-info small {
  color: var(--body-text-color);
}
.checkout-item-price {
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
}
.checkout-item-remove {
  background: none;
  border: 0;
  padding: 4px;
  color: var(--body-text-color);
}
.checkout-item-remove:hover {
  color: var(--color-red);
}
.checkout-summary .theme-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}
.checkout-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--body-text-color);
}
/* "Total paid" on the confirmation page */
.checkout-paid-box {
  max-width: 320px;
  margin: 0 auto 28px;
  padding: 18px;
  background: var(--color-white);
  border: 1px solid var(--border-info-color);
  border-radius: 12px;
}
.checkout-paid-box span,
.checkout-paid-box small {
  display: block;
  color: var(--body-text-color);
}
.checkout-paid-box strong {
  display: block;
  font-size: 30px;
  color: var(--color-dark);
}

/* ---------- invoice ---------- */

.invoice-wrapper {
  border: 1px solid var(--border-info-color);
}
.invoice-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: start;
  padding-bottom: 25px;
  border-bottom: 2px solid var(--color-dark);
}
.invoice-seller small {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--body-text-color);
}
.invoice-seller h5 {
  margin: 2px 0 4px;
}
.invoice-seller p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.invoice-chip {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border: 1px solid var(--border-info-color);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
  background: var(--theme-bg-light);
}
.invoice-meta {
  text-align: right;
  white-space: nowrap;
}
.invoice-meta h3 {
  margin: 0;
}
.invoice-paid {
  display: inline-block;
  margin: 4px 0 12px;
  padding: 2px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-green);
  background: rgba(17, 183, 107, 0.1);
}
.invoice-meta dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 14px;
  justify-content: end;
  margin: 0;
  font-size: 14px;
}
.invoice-meta dt {
  font-weight: 400;
  text-align: right;
  color: var(--body-text-color);
}
.invoice-meta dd {
  margin: 0;
  color: var(--color-dark);
}
.invoice-address-box {
  gap: 20px;
}
.invoice-address-box .invoice-address {
  flex: 1 1 0;
  min-width: 0;
}
.invoice-address-box .invoice-address {
  background: var(--theme-bg-light);
  border-radius: 10px;
  padding: 16px 20px;
}
.invoice-address-box .invoice-address p {
  margin: 0;
}
.invoice-table th {
  background: var(--theme-bg-light);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--body-text-color);
}
.invoice-totals {
  max-width: 340px;
  margin: 25px 0 0 auto;
  padding: 18px 22px;
  background: var(--theme-bg-light);
  border-radius: 10px;
}
.invoice-totals > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.invoice-totals .muted {
  color: var(--body-text-color);
}
.invoice-totals .grand {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color-dark);
  color: var(--color-white);
  font-weight: 600;
}
.invoice-bottom {
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--body-text-color);
}

@media (max-width: 991px) {
  .invoice-container.not-print {
    padding: 0 12px;
  }
  .invoice-wrapper {
    padding: 25px 18px;
  }
  .invoice-header {
    grid-template-columns: 1fr;
  }
  .invoice-logo {
    order: -1;
  }
  .invoice-meta {
    text-align: left;
  }
  .invoice-meta dl {
    justify-content: start;
  }
  .invoice-meta dt {
    text-align: left;
  }
  .invoice-address-box {
    flex-direction: column;
  }
}

/* printing an invoice: just the sheet, on white, in the desktop layout */
@media print {
  .preloader,
  header.header,
  .footer-area,
  .site-breadcrumb,
  .invoice-print,
  #scroll-top {
    display: none !important;
  }
  body {
    background: #fff !important;
  }
  .invoice-area {
    padding: 0 !important;
  }
  .invoice-container.not-print {
    padding: 0 !important;
    max-width: none;
  }
  .invoice-wrapper {
    border: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .invoice-header {
    grid-template-columns: 1fr auto 1fr;
  }
  .invoice-logo {
    order: 0;
  }
  .invoice-meta {
    text-align: right;
  }
  .invoice-meta dl {
    justify-content: end;
  }
  .invoice-address-box {
    flex-direction: row;
  }
}

/* ---------- account ---------- */

/* the theme paints .user-card and .sidebar white, so the page behind them is the light panel colour */
.user-area {
  background: var(--theme-bg-light);
}
.sidebar-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--theme-color);
  color: var(--color-white);
  font-size: 30px;
  font-weight: 700;
}
.user-area .sidebar-email {
  margin: 0;
  font-size: 14px;
  word-break: break-all;
}
.user-area .badge-warning {
  background: #fef3c7;
  color: #d97706;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}
.user-form .form-actions .theme-btn {
  margin-top: 0;
}
/* a smaller theme button, for actions inside a card */
.theme-btn.btn-sm-theme {
  padding: 7px 16px;
  font-size: 14px;
}

.empty-state {
  padding: 40px 20px;
  text-align: center;
  background: var(--theme-bg-light);
  border-radius: 10px;
}
.empty-state > i {
  display: block;
  margin-bottom: 12px;
  font-size: 36px;
  color: var(--body-text-color);
}
.empty-state p {
  margin-bottom: 18px;
}

/* a yellow reminder at the top of a section */
.notice-box {
  padding: 18px 22px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
}
.notice-box h5 {
  margin-bottom: 6px;
  color: #92400e;
}
.notice-box p {
  margin-bottom: 12px;
}
.notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.notice-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color-white);
}
.notice-list small {
  display: block;
  color: var(--body-text-color);
}

/* the address book */
.saved-address {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
  padding: 15px 18px;
  border: 1px solid var(--border-info-color);
  border-radius: 10px;
  background: var(--color-white);
}
.saved-address.is-editing {
  display: block;
}
.saved-address small {
  display: block;
  color: var(--body-text-color);
}
.address-tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  border-radius: 50px;
  background: var(--theme-bg-light);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.saved-address-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}
.btn-link-sm {
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--color-dark);
}
.btn-link-sm:hover {
  background: var(--theme-bg-light);
}
.btn-link-sm.is-danger {
  color: var(--color-red);
}

/* orders */
.order-card {
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--border-info-color);
  border-radius: 10px;
  background: var(--color-white);
}
.order-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 22px;
  background: var(--theme-bg-light);
}
.order-card-head h5 {
  margin: 0;
}
.order-card-head small {
  color: var(--body-text-color);
}
.order-total {
  font-size: 20px;
  color: var(--color-dark);
}
.order-card-section {
  padding: 20px 22px;
  border-top: 1px solid var(--border-info-color);
}
.order-items {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-info-color);
}
.order-items li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border-info-color);
}
.order-items li:last-child {
  border-bottom: 0;
}
.order-item-img {
  display: grid;
  flex: 0 0 54px;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--theme-bg-light);
  color: var(--body-text-color);
}
.order-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-white);
}
.order-item-info {
  flex: 1;
  min-width: 0;
}
.order-item-info strong {
  display: block;
  color: var(--color-dark);
}
.order-item-info small {
  color: var(--body-text-color);
}
.order-item-total {
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
}
.order-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-info-color);
}

/* order progress: placed -> processing -> shipped -> delivered */
.order-tracker {
  display: flex;
  align-items: flex-start;
}
.order-tracker .step {
  position: relative;
  flex: 1;
  text-align: center;
}
.order-tracker .step::before {
  content: "";
  position: absolute;
  top: 19px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--color-gray);
}
.order-tracker .step:first-child::before {
  display: none;
}
.order-tracker .step.reached::before {
  background: var(--theme-color);
}
.step-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-gray);
  color: var(--body-text-color);
}
.order-tracker .step.reached .step-dot {
  background: var(--theme-color);
  color: var(--color-white);
}
.order-tracker .label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--body-text-color);
}
.order-tracker .step.reached .label {
  font-weight: 500;
  color: var(--color-dark);
}
/* the Orders tab follows the order's status live (OrdersTab polls), so the tracker eases from one state to the next,
   and the step the order is at right now is ringed */
.order-tracker .step::before,
.order-tracker .step-dot,
.order-tracker .label {
  transition: background-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease;
}
.order-tracker .step.current .step-dot {
  box-shadow: 0 0 0 5px var(--theme-color-light);
}
@media (prefers-reduced-motion: reduce) {
  .order-tracker .step::before,
  .order-tracker .step-dot,
  .order-tracker .label {
    transition: none;
  }
}

/* warranty registrations */
.device-card {
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border-info-color);
  border-radius: 10px;
}
.device-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.device-card-head h5 {
  margin: 0 0 4px;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--body-text-color);
}
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.device-grid dt {
  font-size: 14px;
  font-weight: 400;
  color: var(--body-text-color);
}
.device-grid dd {
  margin: 2px 0 0;
}

@media (max-width: 575px) {
  .order-tracker .label {
    font-size: 12px;
  }
  .order-card-head,
  .order-card-section,
  .order-card-foot,
  .order-items li {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- reviews ---------- */

.reviews-area {
  background: var(--theme-bg-light);
}
.star-picker {
  display: flex;
  align-items: center;
  gap: 4px;
}
.star-picker button {
  padding: 2px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--color-gray);
}
.star-picker button.is-on {
  color: var(--color-yellow);
}
.star-picker button:not(:disabled) {
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}
.star-picker button:not(:disabled):hover {
  color: var(--color-yellow);
  transform: scale(1.15);
}
.star-picker span {
  margin-left: 8px;
  font-size: 14px;
  color: var(--body-text-color);
}
.review-card {
  margin-bottom: 16px;
  padding: 20px 24px;
  border-radius: 10px;
  background: var(--color-white);
}
.review-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.review-card-head h5 {
  margin: 0;
}
.review-card p {
  margin: 10px 0 8px;
  white-space: pre-wrap;
}
.review-card small {
  color: var(--body-text-color);
}
.review-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.review-pager .theme-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- support chat ---------- */

.support-chat {
  margin-top: 60px;
}
.chat-signin {
  margin-top: 50px;
  padding: 40px 20px;
  text-align: center;
  border-radius: 12px;
  background: var(--theme-bg-light);
}
.chat-signin > i {
  font-size: 28px;
  color: var(--body-text-color);
}
.chat-box {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--border-info-color);
  border-radius: 12px;
  background: var(--theme-bg-light);
}
.chat-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-info-color);
}
.chat-list-top {
  padding: 14px;
}
.chat-list-top small {
  display: block;
  margin-top: 8px;
  text-align: center;
  color: var(--body-text-color);
}
.chat-list-items {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 14px;
}
.chat-list-items p {
  padding: 0 8px;
  font-size: 13px;
  color: var(--body-text-color);
}
.chat-list-items ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-item {
  width: 100%;
  margin-bottom: 4px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  font-size: 14px;
}
.chat-item:hover {
  background: rgba(0, 0, 0, 0.05);
}
.chat-item.is-active {
  background: var(--color-dark);
  color: var(--color-white);
}
.chat-item-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.chat-item-title em {
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  opacity: 0.7;
}
.chat-item small {
  display: block;
  font-size: 11px;
  opacity: 0.7;
}
.chat-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-empty {
  display: grid;
  flex: 1;
  place-items: center;
  padding: 30px;
  text-align: center;
  color: var(--body-text-color);
}
.chat-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 16px;
}
.chat-messages > p {
  font-size: 13px;
  color: var(--body-text-color);
}
.chat-message {
  max-width: 80%;
  align-self: flex-start;
}
.chat-message.is-user {
  align-self: flex-end;
}
.chat-bubble {
  padding: 9px 14px;
  border-radius: 16px;
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}
.chat-message.is-user .chat-bubble {
  background: var(--color-dark);
  color: var(--color-white);
}
.chat-bubble p {
  margin: 0;
  color: inherit;
  font-size: 14px;
  white-space: pre-wrap;
}
.chat-attachment {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 12px;
  text-decoration: underline;
}
.chat-message > small {
  display: block;
  margin-top: 4px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--body-text-color);
}
.chat-message.is-user > small {
  text-align: right;
}
.chat-closed {
  padding: 14px;
  border-top: 1px solid var(--border-info-color);
  text-align: center;
  font-size: 13px;
  color: var(--body-text-color);
}
.chat-composer {
  padding: 14px;
  border-top: 1px solid var(--border-info-color);
}
.chat-composer.is-dragging {
  background: rgba(0, 0, 0, 0.03);
}
.chat-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-composer textarea {
  flex: 1;
  resize: none;
  border-radius: 12px;
}
.chat-icon-btn {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--body-text-color);
  cursor: pointer;
}
.chat-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
.chat-icon-btn.is-send {
  background: var(--theme-color);
  color: var(--color-white);
}
.chat-icon-btn.is-send:disabled {
  opacity: 0.5;
}
@media (max-width: 767px) {
  .chat-box {
    grid-template-columns: 1fr;
  }
  .chat-list {
    border-right: 0;
    border-bottom: 1px solid var(--border-info-color);
  }
  .chat-message {
    max-width: 92%;
  }
}

/* ---------- warranty ---------- */

.warranty-area {
  background: var(--theme-bg-light);
}

/* the four "how it works" steps */
.warranty-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.warranty-steps li strong,
.warranty-steps li small {
  display: block;
}
.warranty-steps li small {
  margin-top: 2px;
  color: var(--body-text-color);
}
.step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--theme-color);
  color: var(--color-white);
  font-weight: 600;
}
@media (max-width: 767px) {
  .warranty-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-section-title {
  margin: 10px 0 15px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body-text-color);
}

/* a dashed box for choosing or dropping a file */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 130px;
  padding: 10px;
  border: 2px dashed var(--border-info-color);
  border-radius: 12px;
  background: var(--color-white);
  color: var(--body-text-color);
  text-align: center;
  cursor: pointer;
  transition: var(--transition2);
}
.dropzone:hover,
.dropzone.is-dragging {
  border-color: var(--theme-color);
}
.dropzone i {
  font-size: 20px;
}

/* the activation-code box with its check mark */
.code-field {
  position: relative;
}
.code-field .form-control.form-control {
  padding-right: 44px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.code-status {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* a yes / no switch */
.segmented {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--border-info-color);
  border-radius: 50px;
  background: var(--color-white);
}
.segmented button {
  padding: 6px 22px;
  border: 0;
  border-radius: 50px;
  background: none;
  font-weight: 500;
  color: var(--color-dark);
}
.segmented button.is-on {
  background: var(--theme-color);
  color: var(--color-white);
}

/* extended-warranty plans */
.plan-card {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-info-color);
  border-radius: 12px;
  background: var(--color-white);
  text-align: left;
  transition: var(--transition2);
}
.plan-card:hover {
  border-color: var(--theme-color);
}
.plan-card.is-selected {
  border: 2px solid var(--theme-color);
  padding: 13px 15px;
}
.plan-card strong,
.plan-card .plan-price,
.plan-card small {
  display: block;
}
.plan-card .plan-price {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-dark);
}
.plan-card small {
  color: var(--body-text-color);
}

/* "Warranty ID: …" on a result screen */
.id-box {
  display: inline-block;
  min-width: 240px;
  margin: 0 8px 14px;
  padding: 14px 28px;
  border: 1px solid var(--border-info-color);
  border-radius: 12px;
  background: var(--color-white);
}
.id-box span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body-text-color);
}
.id-box strong {
  display: block;
  font-size: 20px;
  color: var(--color-dark);
  word-break: break-all;
}

/* product photos of a claim */
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.photo-thumb {
  position: relative;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 1px solid var(--border-info-color);
  border-radius: 12px;
  background: var(--color-white);
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-white);
  line-height: 1;
}
.photo-thumb button:hover {
  background: var(--color-dark);
}

/* tracking a claim */
.mono-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.claim-status {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.claim-status > i {
  font-size: 28px;
}
.claim-status small {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body-text-color);
}
.claim-status h4 {
  margin: 0;
}
.notes-box {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--theme-bg-light);
}
.device-grid .grid-wide {
  grid-column: 1 / -1;
}

/* paying for a plan */
.plan-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}
.plan-summary-price {
  margin: 6px 0 4px;
  font-size: 30px;
  font-weight: 600;
  color: var(--color-dark);
}
.plan-summary-price small {
  font-size: 14px;
  font-weight: 400;
  color: var(--body-text-color);
}

/* long words (an e-mail address) wrap instead of pushing the sheet wider than a phone */
.invoice-address p,
.invoice-seller p {
  overflow-wrap: anywhere;
}
@media (max-width: 991px) {
  .invoice-meta {
    white-space: normal;
  }
}

/* the pay button: icon and text on one line */
.checkout-summary .theme-btn i {
  margin: 0 8px 0 0;
}

/* ---------- product page: rate-this-product row, stock note ---------- */

.quick-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-info-color);
}
.quick-rating .quick-rating-label {
  font-size: 14px;
  color: var(--body-text-color);
}
.stock-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--body-text-color);
}
.stock-note.is-out {
  color: var(--color-red);
}

/* ---------- clickable rating stars: product cards, quick view, product page (components/RateStars.tsx) ---------- */

.rate-stars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.rate-stars.d-inline-flex {
  display: inline-flex;
}
.rate-stars .rate-star {
  padding: 0 1px;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.rate-stars .rate-star i {
  pointer-events: none;
}
/* the stars you pass over light up in the theme colour, so it is clear a click will rate */
.rate-stars.is-previewing .rate-star.is-on i {
  color: var(--theme-color);
}
.rate-stars .rate-star:not(:disabled):hover {
  transform: scale(1.2);
}
.rate-stars .rate-star:disabled {
  cursor: progress;
  opacity: 0.6;
}
.rate-stars .rate-star:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 2px;
  border-radius: 3px;
}
.rate-stars .rate-count {
  margin-left: 8px;
  font-size: 13px;
  color: var(--body-text-color);
}

/* ---------- a picture that would not load (lib/imageRescue.ts): a quiet tile instead of a hole ---------- */

img.img-failed {
  background: #eef1f4;
  object-fit: contain;
}
.banner-wrap.img-failed {
  background-color: #eef1f4;
  min-height: 160px;
}

/* a finger needs bigger stars than a mouse: five of them side by side must not be mistaken for each other */
@media (pointer: coarse) {
  .rate-stars .rate-star {
    padding: 6px 3px;
    font-size: 18px;
  }
}

/* ---------- a NEQO admin's profile icon (components/layout/Header.tsx) opens this little menu; nobody else's does ---------- */

.dropdown-account {
  position: relative;
}
.dropdown-account-menu {
  position: absolute;
  /* hangs from the icon's RIGHT edge and grows leftwards (like the cart's): the icon sits next to the right edge of the
     page, so a menu growing rightwards would stick out of the window — even while it is hidden — on 992–1199px screens */
  right: 0;
  top: calc(100% + 12px);
  z-index: 30;
  min-width: 220px;
  padding: 10px;
  background: var(--color-white);
  border-radius: 15px;
  box-shadow: var(--box-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--transition);
}
/* the pointer can cross the gap between the icon and the card without the menu closing under it */
.dropdown-account-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.dropdown-account:not(.is-closed):hover .dropdown-account-menu,
.dropdown-account:not(.is-closed):focus-within .dropdown-account-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dropdown-account-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark);
  white-space: nowrap;
}
.dropdown-account-menu a i {
  width: 18px;
  text-align: center;
  color: var(--theme-color);
}
.dropdown-account-menu a:hover,
.dropdown-account-menu a:focus-visible {
  background: var(--theme-color-light);
  color: var(--theme-color);
}
.dropdown-account-menu a[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}
/* a touch screen cannot hover, and a tap on the icon already goes to the account page (which lists "Admin Portal" too) */
@media (hover: none) {
  .dropdown-account-menu {
    display: none;
  }
}

/* ── wallet (Account → Wallet, and the "use my credits" box at checkout) ───────────────────────────────────────────── */
.wallet-balance {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 0;
}
.wallet-balance-number {
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -0.02em;
}
.wallet-balance-unit {
  font-size: 18px;
  color: var(--body-text-color);
}
.wallet-rule {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-info-color);
}
.wallet-rule small {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--body-text-color);
}
/* Account -> Wallet: what expires when */
.wallet-expiry {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-info-color);
}
.wallet-expiry small {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--body-text-color);
}
.wallet-expiry ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wallet-expiry li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}
.wallet-expiry li strong {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wallet-expiry-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 10px;
  border-radius: 999px;
  background: #fff1cf;
  color: #8a5a00;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.wallet-validity {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--body-text-color);
}
.wallet-redeem-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.wallet-redeem-row .form-control {
  flex: 1;
  min-width: 0;
}
.wallet-redeem-row .theme-btn {
  flex: 0 0 auto;
  margin: 0;
}
.wallet-code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wallet-history {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wallet-history li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-info-color);
}
.wallet-history li:last-child {
  border-bottom: 0;
}
.wallet-tx-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-bg-light);
  color: var(--color-dark);
}
.wallet-tx-main {
  flex: 1;
  min-width: 0;
}
.wallet-tx-main strong,
.wallet-tx-amount strong {
  display: block;
  color: var(--color-dark);
}
.wallet-tx-main small,
.wallet-tx-amount small {
  display: block;
  color: var(--body-text-color);
}
.wallet-tx-amount {
  text-align: right;
  white-space: nowrap;
}
.wallet-tx-amount strong {
  font-size: 17px;
}
.wallet-tx-amount strong.is-credit {
  color: #15803d;
}
@media (max-width: 575px) {
  .wallet-balance-number {
    font-size: 42px;
  }
  .wallet-redeem-row {
    flex-direction: column;
  }
  .wallet-redeem-row .theme-btn {
    width: 100%;
    justify-content: center;
  }
}
/* the "Use my wallet credits" box in the checkout summary */
.checkout-wallet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--color-white);
  border: 1px solid var(--border-info-color);
  border-radius: 10px;
  cursor: pointer;
}
.checkout-wallet.is-disabled {
  cursor: default;
  opacity: 0.85;
}
.checkout-wallet input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--theme-color);
}
.checkout-wallet strong {
  display: block;
  color: var(--color-dark);
}
.checkout-wallet small {
  display: block;
  margin-top: 2px;
  color: var(--body-text-color);
}
.checkout-summary .checkout-wallet-line {
  color: #15803d;
}
/* shown when the server refused the order because the credits are no longer available (CheckoutPage.tsx): stays until the next try */
.checkout-wallet-notice {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #fff7e6;
  border: 1px solid #f2c56b;
  border-radius: 10px;
  color: #6b4700;
  font-size: 14px;
  line-height: 1.5;
}
/* "Wallet credits used" on an invoice */
.invoice-totals .wallet-row {
  color: var(--color-dark);
}

/* ── wallet coin counter in the header (components/layout/WalletChip.tsx) ─────────────────────────────────────────── */
@keyframes wallet-coin-flip {
  from { transform: perspective(160px) rotateY(0deg); }
  to { transform: perspective(160px) rotateY(360deg); }
}
@keyframes wallet-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes wallet-bubble {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.9); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -4px) scale(1); }
}
@keyframes wallet-shimmer {
  0% { opacity: 0.55; }
  50% { opacity: 1; }
  100% { opacity: 0.55; }
}

/*
 * White top row (992px and up): a list item like "Hello Asha" and "My Cart", built from the same classes so the theme's
 * own sizes and spacing apply. (The row used to line its items up on their text baseline, and the circle's baseline comes from
 * the line of text inside it — hence the zero-width character in the coin circle, with the coin itself positioned over it. The row
 * is a centred flex row now, see "The white top row" below; the character is harmless and stays so the circle's box is unchanged.)
 */
.header-middle-list .header-wallet {
  position: relative;
}
.header-middle-list .wallet-item .list-item-icon.wallet-coin {
  background: rgba(248, 162, 0, 0.14);
  box-shadow: inset 0 0 0 1px rgba(248, 162, 0, 0.3);
}
.wallet-coin-svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 1px rgba(154, 90, 0, 0.35));
}
.header-middle-list .wallet-coin .wallet-coin-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -15px;
}
.header-middle-list .wallet-item:hover .list-item-icon.wallet-coin,
.header-middle-list .wallet-item:focus-visible .list-item-icon.wallet-coin {
  background: rgba(248, 162, 0, 0.24);
  animation: wallet-coin-flip 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.header-middle-list .wallet-info h5 {
  font-weight: 600;
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.header-middle-list .wallet-item:hover .wallet-info h5 {
  color: var(--theme-color);
}
/* Keyboard focus: the theme switches outlines off, so the chip draws its own (dark brown on white, about 9:1). */
.header-middle-list .wallet-item:focus-visible,
.wallet-pill:focus-visible {
  outline: 2px solid #6b4700;
  outline-offset: 3px;
}
@media all and (min-width: 1200px) {
  /* the link itself has square corners here; the outline follows them */
  .header-middle-list .wallet-item:focus-visible {
    border-radius: 28px;
  }
}

/*
 * Below 1200px the theme hides the small texts beside the circles. The coin count is the point of this item, so it stays —
 * as one compact pill with its coin, the same look as the phone one below.
 */
@media all and (max-width: 1199px) {
  .header-middle-list .list-item-info.wallet-info {
    display: block;
  }
  .header-middle-list .wallet-info h6 {
    display: none;
  }
  .header-middle-list .wallet-info h5 {
    margin: 0;
    font-size: 15px;
    color: #6b4700;
  }
  .header-middle-list .wallet-item {
    gap: 4px;
    height: 45px;
    padding: 0 16px 0 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fffaf0, #fff2d2);
    box-shadow: inset 0 0 0 1px rgba(229, 178, 60, 0.7);
  }
  .header-middle-list .wallet-item:hover {
    background: linear-gradient(180deg, #fff6e0, #ffe8b0);
  }
  .header-middle-list .wallet-item .list-item-icon.wallet-coin {
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: transparent;
    box-shadow: none;
  }
  .header-middle-list .wallet-item:hover .wallet-info h5 {
    color: #6b4700;
  }
}

/*
 * The white top row (992px and up): logo | search | account, wallet, cart — items that never wrap.
 * The theme gave the right column a fixed share of the row (3/12 on a laptop, 4/12 on a desktop) and set its items as inline
 * blocks, so the moment they needed more than that share (a signed-in shopper's name, a four-digit wallet balance, the pill
 * on a laptop) the LAST ONE dropped onto a second line — with the search bar's empty space right beside it. Now the right
 * column is exactly as wide as its items and the search bar takes whatever is left (never less than 300px; the logo gives
 * way before that). From 1200px each item also reads on ONE line ("Hello Asha", "Wallet 1,250", "My Cart") instead of the
 * theme's label-over-value stack, whose h6 carries 15px of padding above and below: the two lines sat 30px further apart than
 * the icon is tall.
 */
@media all and (min-width: 992px) {
  .header-middle .header-middle-row {
    flex-wrap: nowrap;
  }
  .header-middle .header-middle-row > .header-middle-logo-col {
    flex: 0 1 25%;
    min-width: 130px;
  }
  .header-middle .header-middle-row > .header-middle-search-col {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 300px;
  }
  /* as wide as its items, but never narrower than the share the theme gave it (3/12 here, 4/12 from 1200px): while the
     items fit, the row is exactly the theme's; only a wider set of items makes this column grow and the search give way */
  .header-middle .header-middle-row > .header-middle-right-col {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 25%;
  }
  .header-middle-right {
    float: none;
    display: flex;
    justify-content: flex-end;
  }
  .header-middle-list {
    display: flex;
    align-items: center;
    /* the inline blocks used to be 4px apart (the space between the tags) */
    gap: 4px;
    white-space: nowrap;
  }
}
@media all and (min-width: 1200px) {
  .header-middle .header-middle-row > .header-middle-right-col {
    min-width: 33.33333333%;
  }
  .header-middle-list .list-item-info {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
  }
  .header-middle-list .list-item-info h6 {
    padding: 0;
  }
  .header-middle-list .list-item-info h5 {
    margin-top: 0;
    /* a long first name is cut with an ellipsis (the link's tooltip has all of it) so it cannot squeeze the search bar */
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* ...but the wallet number is never cut, and its count-up pop must not be clipped */
  .header-middle-list .wallet-info h5 {
    max-width: none;
    overflow: visible;
  }
  /* the loading bar is as wide as the real number of a 3-digit balance (500, the usual coupon: 27.2px at 14px). The row is one
     line per item here, so a wider bar would push the account link beside it by the difference when the number arrives */
  .header-middle-list .wallet-skeleton-bar {
    width: 27px;
  }
}

/* orange bar (phones and tablets): a compact pill before the search and cart icons */
.wallet-pill-wrap {
  position: relative;
  display: inline-flex;
}
.wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffaf0, #fff2d2);
  box-shadow: inset 0 0 0 1px rgba(229, 178, 60, 0.7);
  color: #6b4700;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wallet-pill:hover {
  color: #6b4700;
  background: linear-gradient(180deg, #fff6e0, #ffe8b0);
}
.wallet-pill .wallet-coin-svg {
  width: 26px;
  height: 26px;
}
.wallet-pop {
  display: inline-block;
  animation: wallet-pop 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* "+500" / "−300" under the counter for a moment after the balance changes */
.wallet-bubble {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 5;
  margin-top: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  animation: wallet-bubble 2400ms ease-out both;
}
.wallet-bubble.is-plus {
  background: #15803d;
}
.wallet-bubble.is-minus {
  background: #1d1d1f;
}

/*
 * While the first answer is on its way: the white row's placeholder is built from the SAME boxes as the real item (a coin
 * circle, the label, a number) with only the coin and the number left blank, so nothing around it moves when the real one
 * arrives. The phone pill's placeholder is a plain bar as wide as the pill of a 3-digit balance (500, the usual coupon).
 */
.header-middle-list .wallet-item.is-loading {
  pointer-events: none;
}
.header-middle-list .wallet-item.is-loading .list-item-icon.wallet-coin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: rgba(248, 162, 0, 0.3);
  animation: wallet-shimmer 1.2s ease-in-out infinite;
}
.wallet-skeleton-bar {
  display: inline-block;
  /* as wide as the real number of a 3-digit balance (500, the usual coupon) in the amber pill below 1200px, where the number is
     15px (about 29px wide); from 1200px the number is 14px and the bar is narrower, see the white top row block above */
  width: 30px;
  height: 14px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.1);
  vertical-align: middle;
  animation: wallet-shimmer 1.2s ease-in-out infinite;
}
.wallet-skeleton {
  display: inline-block;
  width: 72px;
  height: 34px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.06);
  animation: wallet-shimmer 1.2s ease-in-out infinite;
}

/*
 * "Login to see your Neqo wallet": the prompt a visitor gets from the header coin (components/layout/WalletLoginModal.tsx).
 * A Bootstrap modal like the quick view: a big coin on a soft glow, the line, a "Login" button.
 */
@keyframes wallet-coin-flip-big {
  from { transform: perspective(700px) rotateY(0deg); }
  to { transform: perspective(700px) rotateY(360deg); }
}
.wallet-login-modal .modal-dialog {
  max-width: 420px;
}
.wallet-login-modal .modal-content {
  border: 0;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}
.wallet-login-modal .modal-body {
  padding: 36px 30px 32px;
  text-align: center;
}
.wallet-login-modal .btn-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 30px;
  text-align: center;
  border-radius: 50px;
  background: var(--theme-color);
  color: var(--color-white);
  font-size: 19px;
  opacity: 1;
  transition: var(--transition);
}
.wallet-login-modal .btn-close:hover {
  background: var(--color-red);
  color: var(--color-white);
}
.wallet-login-modal .btn-close:focus-visible {
  outline: 2px solid #6b4700;
  outline-offset: 2px;
  box-shadow: none;
}
.wallet-login-coin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  margin: 0 auto;
}
.wallet-login-coin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 198, 26, 0.42) 0%, rgba(255, 198, 26, 0.16) 46%, rgba(255, 198, 26, 0) 72%);
}
.wallet-login-coin-svg {
  position: relative;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 8px 12px rgba(154, 90, 0, 0.35));
  animation: wallet-coin-flip-big 900ms cubic-bezier(0.4, 0, 0.2, 1) 120ms both;
}
.wallet-login-modal h4 {
  margin: 20px 0 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-dark);
  text-wrap: balance; /* "Login to see / your Neqo wallet", never a lone "wallet" on the second line */
}
.wallet-login-modal p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #6b7280;
  text-wrap: pretty;
}
.wallet-login-modal .wallet-login-btn {
  display: block;
  width: 100%;
  margin-top: 26px;
  padding: 12px 20px;
  font-size: 17px;
}
.wallet-login-new {
  margin-top: 18px;
  font-size: 14px;
  color: #6b7280;
}
.wallet-login-new a {
  color: var(--color-dark);
  font-weight: 500;
  text-decoration: underline;
}
.wallet-login-new a:hover {
  color: var(--theme-color);
}
/* a phone on its side: a smaller coin and tighter spacing, so the Login button is on screen without scrolling the dialog */
@media (max-height: 520px) {
  .wallet-login-modal .modal-dialog {
    --bs-modal-margin: 8px;
  }
  .wallet-login-modal .modal-body {
    padding: 22px 26px 20px;
  }
  .wallet-login-coin {
    width: 96px;
    height: 96px;
  }
  .wallet-login-coin-svg {
    width: 68px;
    height: 68px;
  }
  .wallet-login-modal h4 {
    margin-top: 8px;
  }
  .wallet-login-modal .wallet-login-btn {
    margin-top: 18px;
  }
  .wallet-login-new {
    margin-top: 12px;
  }
}
@media (max-width: 575px) {
  /* a 16px strip of the page on each side (Bootstrap leaves 8px), as on the shop */
  .wallet-login-modal .modal-dialog {
    --bs-modal-margin: 16px;
  }
  .wallet-login-modal h4 {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-middle-list .wallet-item:hover .list-item-icon.wallet-coin,
  .header-middle-list .wallet-item:focus-visible .list-item-icon.wallet-coin,
  .wallet-login-coin-svg,
  .wallet-pop,
  .wallet-skeleton,
  .wallet-skeleton-bar,
  .header-middle-list .wallet-item.is-loading .list-item-icon.wallet-coin::after {
    animation: none;
  }
  .wallet-bubble {
    animation: none;
    transform: translate(-50%, 0);
  }
}