/* Account console (account.megaspin.net). The checkout layout draws the brand
   strips with inline styles; the console's Content-Security-Policy allows no
   inline style, so they live here. The images are under img-src
   https://cdn.megaspin.net. */
.account-strip {
  height: 5px;
  background-repeat: repeat-x;
}
.account-strip-orange {
  background-color: #ff8c00;
  background-image: url('https://cdn.megaspin.net/images/orange_back.gif?v=2');
}
.account-strip-green {
  background-color: #a1d01e;
  background-image: url('https://cdn.megaspin.net/images/green_back.gif?v=2');
}

/* Product thumbnails (orders): the alt text of an image still loading is not
   drawn over the box; account_auth.js hides an image the CDN does not have. */
.account-thumb {
  color: transparent;
  overflow: hidden;
}
.account-thumb-missing {
  display: none;
}

/* The signed-in pages' menu below Tailwind's md breakpoint (48rem): closed
   until the hamburger opens it, but only when account_auth.js runs
   (html.account-js); without it the menu is shown and the button hidden. */
@media (max-width: 47.99rem) {
  html.account-js #account-nav:not(.account-nav-open) {
    display: none;
  }
}

/* Tailwind 4's preflight gives buttons the default cursor (Tailwind 3 gave
   them a pointer). Every button of the console (Sign out is a button_to,
   a POST form; Send code, Cancel order, Remove, Save, the menu toggle) is
   clickable, so it gets the hand like a link. Bernard, 2026-11-03. */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
input[type="submit"]:not(:disabled) {
  cursor: pointer;
}
button:disabled,
input[type="submit"]:disabled {
  cursor: not-allowed;
}

/* A blue button shows the click at once and shows it is working until the
   next page (Bernard, 2026-11-04: dark blue, spinner, words). account_auth.js
   puts account-busy on the button that was clicked. Here and not in the
   Tailwind classes: .btn-checkout is outside every CSS layer, so it beats
   disabled:bg-gray-400, which never applied. The checkout does not load this
   file. Darker than the hover colour, #01508F. */
.btn-checkout:active:not(:disabled) {
  background-color: #013F72;
  transform: translateY(1px);
}
.btn-checkout.account-busy {
  background-color: #013F72;
  color: white;
  cursor: progress;
}
.btn-checkout.account-busy::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: account-busy-spin 0.7s linear infinite;
}
/* The other blue button of a form on its way: it cannot be clicked again. */
.btn-checkout:disabled:not(.account-busy) {
  opacity: 0.5;
}
.account-busy-slow {
  font-size: 0.875rem;
  color: #6b7280;
}
@keyframes account-busy-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-checkout.account-busy::before {
    animation: none;
    border-top-color: currentColor;
    opacity: 0.75;
  }
}

/* The review form's star rating (account/reviews/new), MS1's Starbox look
   (store/add-product-review.asp; v16.css "Starbox"): five stars with 3px
   letter-spacing, empty #ccc, the chosen rating #1e90ff, the hover preview
   #ffcc1c, each coloured layer cut to its width. The ten radios are visually
   hidden but focusable (a radio group: Tab, the arrow keys, the required
   check); the ten labels over the stars are the half-star click areas, a
   tenth of the width each. The widths come from the checked radio and the
   hovered label (:has), so the stars need no script and no inline style. */
.review-stars-box {
  --review-stars-fill: 0%;
  --review-stars-hover: 0%;
  position: relative;
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  white-space: nowrap;
  border-radius: 0.25rem;
}
.review-stars-empty,
.review-stars-filled,
.review-stars-hover {
  letter-spacing: 3px;
}
.review-stars-empty {
  color: #ccc;
}
.review-stars-filled,
.review-stars-hover {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background: #fff;
}
.review-stars-filled {
  color: #1e90ff;
  width: var(--review-stars-fill);
}
.review-stars-hover {
  color: #ffcc1c;
  width: var(--review-stars-hover);
}
.review-stars-areas {
  position: absolute;
  inset: 0;
  display: flex;
}
.review-star-area {
  flex: 0 0 10%;
  height: 100%;
  cursor: pointer;
}
.review-star-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
/* While the pointer is over the stars, the preview replaces the choice
   (as MS1's Starbox does). */
.review-stars-box:has(.review-star-area:hover) .review-stars-filled {
  visibility: hidden;
}
.review-stars-box:has(.review-star-input:focus-visible) {
  outline: 2px solid #1e90ff;
  outline-offset: 2px;
}
.review-stars-box:has(.review-star-input[value="0.5"]:checked) { --review-stars-fill: 10%; }
.review-stars-box:has(.review-star-input[value="1"]:checked) { --review-stars-fill: 20%; }
.review-stars-box:has(.review-star-input[value="1.5"]:checked) { --review-stars-fill: 30%; }
.review-stars-box:has(.review-star-input[value="2"]:checked) { --review-stars-fill: 40%; }
.review-stars-box:has(.review-star-input[value="2.5"]:checked) { --review-stars-fill: 50%; }
.review-stars-box:has(.review-star-input[value="3"]:checked) { --review-stars-fill: 60%; }
.review-stars-box:has(.review-star-input[value="3.5"]:checked) { --review-stars-fill: 70%; }
.review-stars-box:has(.review-star-input[value="4"]:checked) { --review-stars-fill: 80%; }
.review-stars-box:has(.review-star-input[value="4.5"]:checked) { --review-stars-fill: 90%; }
.review-stars-box:has(.review-star-input[value="5"]:checked) { --review-stars-fill: 100%; }
.review-stars-box:has(.review-star-area[for="rating-0-5"]:hover) { --review-stars-hover: 10%; }
.review-stars-box:has(.review-star-area[for="rating-1"]:hover) { --review-stars-hover: 20%; }
.review-stars-box:has(.review-star-area[for="rating-1-5"]:hover) { --review-stars-hover: 30%; }
.review-stars-box:has(.review-star-area[for="rating-2"]:hover) { --review-stars-hover: 40%; }
.review-stars-box:has(.review-star-area[for="rating-2-5"]:hover) { --review-stars-hover: 50%; }
.review-stars-box:has(.review-star-area[for="rating-3"]:hover) { --review-stars-hover: 60%; }
.review-stars-box:has(.review-star-area[for="rating-3-5"]:hover) { --review-stars-hover: 70%; }
.review-stars-box:has(.review-star-area[for="rating-4"]:hover) { --review-stars-hover: 80%; }
.review-stars-box:has(.review-star-area[for="rating-4-5"]:hover) { --review-stars-hover: 90%; }
.review-stars-box:has(.review-star-area[for="rating-5"]:hover) { --review-stars-hover: 100%; }

/* The Account page's Full name and Display name rows (account/settings/
   _name_row): the value with Edit; while the row is editing
   (account-name-editing: the server for ?edit=… and for the row a refused
   name came from, account_auth.js on Edit and Cancel) the field with Save
   and Cancel in its place. */
.account-name-row:not(.account-name-editing) .account-name-form,
.account-name-row.account-name-editing .account-name-view {
  display: none;
}

/* A name row reached at its field (/account?edit=display_name#display_name
   from the reviews page's "display name" link; the Edit link without the
   script): the row flashes amber and the field keeps an amber outline;
   account_auth.js puts the cursor in it. The browser scrolls to the field
   gently and stops with the field 100px below the top of the window, so
   the customer sees what is around it. */
.account-name-row:has(input:target) {
  border-radius: 0.375rem;
  animation: account-target-flash 3s ease-out;
}
.account-name-row input:target {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
  scroll-margin-top: 100px;
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.account-name-row input:target) {
    scroll-behavior: smooth;
  }
}
@keyframes account-target-flash {
  from { background-color: #fef3c7; }
  to { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .account-name-row:has(input:target) {
    animation: none;
    background-color: #fffbeb;
  }
}