/* 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;
}

/* 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 Display name row when reached from the reviews page's
   "display name" link (/account#display_name): the row flashes amber and the
   field keeps an amber outline; account_auth.js puts the cursor in it. */
#display-name-form:has(#display_name:target) {
  border-radius: 0.375rem;
  animation: account-target-flash 3s ease-out;
}
#display_name:target {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
}
@keyframes account-target-flash {
  from { background-color: #fef3c7; }
  to { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  #display-name-form:has(#display_name:target) {
    animation: none;
    background-color: #fffbeb;
  }
}