/* 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. 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. */
#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;
  scroll-margin-top: 100px;
}
@media (prefers-reduced-motion: no-preference) {
  html:has(#display_name:target) {
    scroll-behavior: smooth;
  }
}
@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;
  }
}