/* ==========================================================================
   GalaxyBooks custom styles — matched to the Molla Demo 4 theme.
   Design tokens mirror the theme sheets (style.css + skins/skin-style.css):
   square corners (radius 0, max .3rem), Poppins on a 1rem=10px scale,
   #3399ff primary, low-opacity shadows.
   ========================================================================== */

:root {
  --primary-color: #3399ff;
  --secondary-color: #1d84ea;
  --link-hover: #0080ff;
  --body-color: #666666;
  --heading-color: #333333;
  --border-color: #ebebeb;
  --bg-light: #fafafa;
  --bg-lighter: #f5f6f9;
  --success-color: #20cb55;
  --danger-color: #da2828;
  --info-color: #32b1d6;
  --warning-color: #ea8745;
  --rating-color: #fcb941;
  --radius: .3rem;
  --shadow-sm: 0 5px 10px rgba(0, 0, 0, .05);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, .05);
}

/* --------------------------------------------------------------------------
   Alerts — the theme (style.css §4.20) already defines the solid style for
   all five variants and the skin recolors .alert-primary to #3399ff.
   Only the pieces the theme leaves unstyled are added here.
   -------------------------------------------------------------------------- */

/* Entrance animation so a new alert draws the eye wherever it appears */
@keyframes alert-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert {
  animation: alert-slide-in .35s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .alert {
    animation: none;
  }
}

.alert .close {
  color: inherit;
  opacity: .8;
  text-shadow: none;
  right: 1.5rem;
}

.alert .close:hover {
  opacity: 1;
  color: inherit;
}

.alert [class*="icon-"],
.alert .fas,
.alert .far {
  margin-right: .8rem;
}

/* Room for the dismiss button on the theme's 1rem 1.5rem padding */
.alert.alert-dismissible {
  padding-right: 4rem;
}

/* Global messages render as a floating toast stack (top-right), not an
   in-flow banner that pushes the page around. Auto-dismissed by
   custom_alerts.js; the modal's #message-container stays inline. */
#global-messages {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 2000;
  width: min(380px, calc(100vw - 4rem));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  pointer-events: none;
}

#global-messages .alert {
  margin: 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .15);
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Payment countdown (bank transfer page) — digits in the Demo 4 primary blue
   Class names are a JS contract with jquery.countdown + custom_countdown.js.
   -------------------------------------------------------------------------- */

.payment-countdown {
  position: relative;
  z-index: 6;
  transition: all .4s ease;
  visibility: visible;
  opacity: 1;
  margin: 2rem auto;
  max-width: 400px;
}

.payment-countdown .countdown-section {
  font-size: 1rem;
  line-height: 1;
  padding: 1.4rem 0 1.2rem;
  margin-left: .5rem;
  margin-right: .5rem;
  background-color: var(--bg-light);
  border-radius: var(--radius);
  display: inline-block;
}

.payment-countdown .countdown-section:not(:last-child):after {
  color: var(--heading-color);
  content: ':';
  display: inline-block;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  position: absolute;
  left: 100%;
  margin-left: 3px;
  margin-top: -1px;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.payment-countdown .countdown-period {
  display: block;
  font-weight: 400;
  color: var(--heading-color);
  text-transform: lowercase;
  width: 100%;
  padding-left: .2rem;
  padding-right: .2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-countdown .countdown-amount {
  display: inline-block;
  color: var(--primary-color);
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: -.03em;
  margin-bottom: .6rem;
}

.text-center .payment-countdown {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Expired state — themed like the theme's warning alert, not red bold text */
.payment-countdown.countdown-finished {
  font-size: 1.4rem;
  font-weight: 300;
  color: #fff;
  background-color: var(--warning-color);
  padding: 1rem 1.5rem;
  border-radius: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Order complete page
   -------------------------------------------------------------------------- */

.order-confirmation-section {
  background-color: var(--bg-lighter);
  padding: 5rem 0;
}

.order-card {
  background-color: #ffffff;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.success-icon {
  font-size: 4rem;
  color: var(--primary-color);
}

.order-card .order-title {
  color: var(--heading-color);
  font-weight: 600;
  text-align: center;
  width: 100%;
}

.order-id {
  background-color: var(--bg-light);
  border-radius: var(--radius);
  padding: 1rem 2rem;
  font-weight: 500;
  color: var(--secondary-color);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Branded banner overlay: the theme's .bg-overlay uses a 0.3 black tint;
   ours is navy so any replacement photo stays on-brand with readable white
   text (footer newsletter CTA, FAQ CTA, contact page header).
   -------------------------------------------------------------------------- */

.cta.bg-overlay::before,
.page-header.bg-overlay::before {
  background-color: #0f1529;
  opacity: .45;
}

/* The contact header's h1 sits outside a .container, so lift it above the
   overlay the same way the theme lifts .container children */
.page-header.bg-overlay h1 {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Form buttons that must render exactly like the theme's links/buttons.
   State-changing actions (logout, remove from cart, add to cart) are POST
   forms now, so their <button>s need the anchor styling back.
   -------------------------------------------------------------------------- */

.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* The theme pads dropdown entries via `.header-menu ul a` — mirror it for
   our POST-form logout button so it aligns with the other menu items */
.header-menu ul .link-button {
  padding: .3rem 1.5rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}

.header-menu ul .link-button:hover {
  color: var(--primary-color);
}

/* Review helpful/unhelpful vote buttons, spaced like the theme's links */
.review-action .link-button {
  margin-right: 2rem;
}

.review-action .link-button i {
  margin-right: .5rem;
}

.link-button:hover {
  color: var(--primary-color);
}

button.btn-product,
button.btn-product-icon,
button.btn-remove {
  background: none;
  border: 0;
  cursor: pointer;
}

/* Icon buttons (wishlist hearts, cart remove) hug their icon; but
   button.btn-product must keep the theme's own padding so it sizes exactly
   like the theme's anchor .btn-product in .product-action / .action-icon-top */
button.btn-product-icon,
button.btn-remove {
  padding: 0;
}

.wishlist-toggle-form {
  display: inline-block;
}

/* .product-action lays out its .btn-product children as equal flex halves
   (flex-grow: 1; flex-basis: 0) and draws a divider with the sibling selector
   .btn-product + .btn-product. Our add-to-cart POST form wraps the button, so
   the FORM is the flex child instead of the button; without these rules the
   form shrinks to content width and the divider selector never matches.
   Scoped to .product-action so the form is unaffected elsewhere. */
.product-action .add-to-cart-form {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
}

.product-action .add-to-cart-form .btn-product {
  width: 100%;
}

/* Recreate the theme divider across the form boundary; base theme uses
   .1rem dotted #e5e5e5 (style.css), and theme/style.css overrides it to
   solid #d1d1d3 on non-dark action bars. Cover both, in the same order. */
.product-action > .add-to-cart-form + .btn-product,
.product-action > .btn-product + .add-to-cart-form .btn-product,
.product-action > a + .add-to-cart-form .btn-product {
  border-left: .1rem dotted #e5e5e5;
}

.product-action:not(.product-action-dark) > .add-to-cart-form + .btn-product,
.product-action:not(.product-action-dark) > .btn-product + .add-to-cart-form .btn-product,
.product-action:not(.product-action-dark) > a + .add-to-cart-form .btn-product {
  border-left-style: solid;
  border-left-color: #d1d1d3;
}

/* Grid action stacks position their children; the form wrapper must be
   transparent to that layout */
.product-action-vertical .wishlist-toggle-form {
  display: block;
}

/* Service boxes are admin-managed and may carry links; a linked title must
   read like its unlinked siblings, not like body-copy links */
.icon-boxes-container .icon-box-title a {
  color: inherit;
}

/* Checkout payment methods are real radio inputs (one selectable at a time);
   each description sits muted under its own label */
.payment-method-list {
  margin: 2rem 0 2.5rem;
}

.payment-method-option {
  margin-bottom: 1.2rem;
}

.payment-method-option .payment-method-desc {
  margin: .4rem 0 0;
  font-size: 1.3rem;
  line-height: 1.5;
  color: #999999;
}

/* Checkout shipping summary line: the Change link reveals the option rows */
.change-shipping-link {
  margin-left: .8rem;
  font-size: 1.2rem;
  color: var(--primary-color);
}

/* Group headings inside the checkout summary (Select Shipping / Choose a
   Payment Method) */
.checkout-group-heading {
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--heading-color);
  letter-spacing: .01em;
}

/* The heading spans the row via colspan, making it the row's LAST cell too,
   so the theme's `.table.table-summary tbody td:last-child` right-alignment
   grabs it. The tbody element must stay in this selector to match that rule's
   specificity; the later file then wins. */
.table.table-summary tbody td.checkout-group-heading {
  text-align: left;
}

p.checkout-group-heading {
  margin-bottom: 1.2rem;
}

/* Heart state once a product is in the wishlist */
.btn-wishlist.in-wishlist,
.btn-wishlist.in-wishlist:hover {
  color: #e66262;
}

/* --------------------------------------------------------------------------
   Product page — variation selector shim (was an inline style).
   The template only renders .product-variations when variants exist, so this
   no longer opens a gap on variant-less products.
   -------------------------------------------------------------------------- */

.product-details .product-variations {
  min-height: 100px;
}

/* --------------------------------------------------------------------------
   Product page — out-of-stock notice
   -------------------------------------------------------------------------- */

/* Anchor the buy group (variations/qty/add-to-cart form + Category/Share
   footer) to the bottom of the details column, aligned with the bottom edge
   of the product image. Leftover column height sits after the description,
   where longer descriptions absorb it naturally.
   Scoped to the product page — the quickView popup shares these classes. */
.product-details-top .product-details {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-details-top .product-details > form {
  margin-top: auto;
}

.product-details-top .product-details-footer {
  margin-top: .5rem;
}

/* Availability line under the price (in-stock states only) */
.product-details .product-availability {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--heading-color);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 1.6rem;
}

.product-details .product-availability > .fas {
  color: var(--success-color);
  font-size: .8rem;
}

.product-details .product-availability.low-stock > .fas {
  color: var(--warning-color);
}

.product-details .product-out-of-stock {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--danger-color);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}

.product-details .product-out-of-stock > .fas {
  color: var(--danger-color);
  font-size: 2rem;
  line-height: 1.4;
}

.product-details .product-out-of-stock .oos-body {
  display: flex;
  flex-direction: column;
}

.product-details .product-out-of-stock .oos-title {
  color: var(--danger-color);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.product-details .product-out-of-stock .oos-text {
  color: var(--body-color);
  font-size: 1.3rem;
  font-weight: 300;
}

.product-price .price-save-badge {
  display: inline-block;
  margin-left: 1rem;
  padding: .3rem .9rem;
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  background-color: #ef837b;
  border-radius: .3rem;
  vertical-align: middle;
}

/* Anchored FAQ section headings must clear the sticky header when jumped to */
.page-content h2[id] {
  scroll-margin-top: 9rem;
}