/* ============================================================================
   assets/shop.css — MONEY-PAGE RESIDUE ONLY, since Stage 5 of the
   presentation separation (2026-08-19).

   The shop presentation layer (ccq-shop__*, ccq-store__*, the :root token
   layer, the guarantee badge+page, the fragment helpers) MOVED to
   theme/edutheme/scss/shop/_shop.scss (imported last in the theme preset,
   so every page gets it from the compiled theme stylesheet). This file keeps
   ONLY what the pages that still load it need and the theme layer does not
   carry:

     - basket.php        -> the .ccq-basket__* block
     - assessments.php   -> the Bootstrap-carousel block + the legacy
                            assessmentdetail(S).mustache card classes
     - viewpackage.php   -> the bare page-chrome rules below (its ccq-struck /
                            token needs come from the theme layer)
     - blocks/eduhome    -> the bare page-chrome rules (it also keeps
                            js_AddToBasket.js; not part of the Stage 5 fence)

   The bare #page-header and .col-* rules exist HERE for those pages and as
   body-id-SCOPED copies in the theme layer for the pages that no longer load
   this file — a split by consumer, not a duplicate (see _shop.scss header).

   Do not add shop presentation rules here: the theme layer is the one source
   of truth for shop look-and-feel.
   ============================================================================ */

/* Carousel Section */
@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

/* Improved carousel transitions */
.carousel-inner {
    overflow: hidden;
}

.carousel-inner .carousel-item {
    transition: transform 0.4s ease-in-out;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* Story 6.6 (AC-8): a dead commented-out carousel transform block stood here
   since the multi-item sliding rework — deleted (zero-consumer by definition:
   commented code serves nothing). The LIVE carousel rules in this section
   STAY: assessments.mustache renders the Bootstrap carousel markup
   (carousel-inner, carousel-item, mycarousel-control-prev/next) and Bootstrap
   itself toggles the carousel-item-next/prev/start/end state classes. */

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0);
}

/* Prevent text overlap during transitions */
.carousel-inner .carousel-item {
  overflow: hidden;
  z-index: 1;
}

.carousel-inner .carousel-item.active {
  z-index: 2;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%4bc0b1' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
  height: 64px;
  width: 64px;
  background-size: 110%, 110%;
  border-radius: 50%;
  border: 1px solid black;
  filter: invert(50%);
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%4bc0b1' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
  height: 64px;
  width: 64px;
  background-size: 110%, 110%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
  filter: invert(50%);
}
.mycarousel-control-prev{
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  right: 0;
  padding-right:4px;
  color:darkgray;
}
.mycarousel-control-next{
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  left: 0;
  padding-left:4px;
  color:darkgray;
}

a.mycarousel-control-prev,
a.mycarousel-control-next{
  color: darkgray;
}

a.mycarousel-control-prev:hover,
a.mycarousel-control-next:hover{
  text-decoration: none !important;
  font-weight: bold;
  color: black;
}

.bestsellercar {
  position: absolute;
  background: #ec008c;
  color: #ffffff;
  font-size: x-small;
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 2px;
  border-radius: 0px;
  top: 5px;
  left: 25px;
}

.payofftext {
  font-weight: bold;
  padding-left:4px;
  padding-top:2px;
  color: #262262 !important;
  text-align: left;
  min-height: 3em;
  margin-top: 0.3em;
}

.addtobasketmonthly {
  cursor: pointer; 
  font-weight: bold; 
  color: #455a64; 
  padding-right: 8px; 
  background-color: #fff; 
  white-space: nowrap; 
  text-align: right; 
  font-size: small;
}
.priceinfo {
  cursor: pointer; 
  font-weight: bold; 
  color: #455a64; 
  padding-right: 8px; 
  background-color: #fff; 
  white-space: nowrap; 
  text-align: right;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

.cardborder {
  border: 1px solid rgba(0,0,0);
  border-radius: 1em;
}
.cardimg {
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}

/* Legacy 5px Bootstrap-column gutter — bare copy for the money pages +
   eduhome (scoped copies for the shop pages live in the theme layer). */
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col,.col-auto,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm,.col-sm-auto,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md,.col-md-auto,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg,.col-lg-auto,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl,.col-xl-auto {
  padding-right: 5px;
  padding-left: 5px
}

.gotoassessment {
  cursor: pointer;
  font-weight: bold;
  color: #262262;
  background-color: #8dc63f;
  white-space: nowrap;
  text-align: center;
  min-height: 35px;
  padding-top: 5px;

}

/* Hide the Moodle page header on every page that loads this file (bare
   copy for the money pages + eduhome; scoped copies in the theme layer). */
#page-header {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Story 5.5 (Epic 5, d2c-launch) — basket chrome reconciliation. The basket
   page now loads the campaign system (shop.css + landing.css) and wraps in the
   720px .ccq-landing column. Item rows use the tier-card idiom; the summary /
   voucher / repcode / trust panels + the tier nudge use the ladder idiom; the
   proceed action is the landing sticky-cta. Everything below is composed from
   DESIGN.md tokens — no new colours/fonts/radii/breakpoints. This retires the
   basket.mustache inline <style> block (.basketcontainer + col overrides), the
   World-B lime/nudge hexes and the inline color:green/red message styles.
   ══════════════════════════════════════════════════════════════════════════ */

/* Review fix (2026-07-21): the scoped basket #page-header rule that stood here
   was redundant and rested on a false premise — it claimed the bare `#page-header
   { display: none; }` rule above (:262, pre-dating this story since 2024-07-29)
   only covered index/landing/detail/guarantee. In fact that bare rule applies on
   EVERY page that loads shop.css, and basket now loads shop.css (Task 0.1), so
   the header was already hidden on basket without any new rule. No replacement
   needed; verified live post-fix (basket still renders header-hidden). See the
   story's Review Findings for the corrected Disclosure #2. */

/* ── Item row (tier-card idiom) ─────────────────────────────────────────── */
.ccq-basket__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 0.6rem;
  background: #fff;
}
.ccq-basket__thumb-link {
  flex: 0 0 96px;
  display: block;
}
.ccq-basket__thumb {
  width: 96px;
  height: 54px;                 /* 16:9 within the card */
  object-fit: cover;
  border-radius: 8px;
}
.ccq-basket__thumb--empty {     /* F7: quiet placeholder, never a broken img */
  display: block;
  background: #f0f0f2;
}
.ccq-basket__body {
  flex: 1 1 auto;
  min-width: 0;
}
.ccq-basket__name-link {
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 700;
}
.ccq-basket__name-link:hover,
.ccq-basket__name-link:focus {
  color: #1a1a1a;
  text-decoration: underline;
}
.ccq-basket__name {
  font-size: 1.1rem;
}
.ccq-basket__payoff {
  color: #444;                  /* text-subhead */
  font-size: 0.95rem;
  margin: 0.15rem 0;
}
.ccq-basket__applied {
  color: #2e7d32;               /* trust-green reassurance — voucher applied */
  font-size: 0.9rem;
  margin: 0.15rem 0;
}
.ccq-basket__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.ccq-basket__sale {
  font-size: 1.25rem;           /* card-sale-price */
  font-weight: 700;
  color: #1a1a1a;
}
.ccq-basket__struck {
  font-size: 0.9rem;            /* market-price in card context; colour via .ccq-struck */
}
.ccq-basket__note {
  color: #555;                  /* text-muted */
  font-size: 0.95rem;
}
.ccq-basket__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;              /* a11y floor ≥44px */
  min-height: 44px;
  color: #555;
  text-decoration: none;
}
.ccq-basket__remove:hover,
.ccq-basket__remove:focus {
  color: #1a1a1a;
}

/* ── Side panels (summary / voucher / repcode / trust) — ladder idiom ────── */
.ccq-basket__panel {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.6rem;
}
.ccq-basket__panel-title {
  font-size: 1.25rem;           /* section-title */
  margin: 0 0 0.5rem;
  color: #1a1a1a;
}
.ccq-basket__summary-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.2rem 0;
}
.ccq-basket__total {
  font-weight: 700;
  color: #1a1a1a;
}
.ccq-basket__note-line {
  color: #555;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}
.ccq-basket__field {
  width: 100%;
  margin-bottom: 0.5rem;
}
.ccq-basket__msg {
  font-size: 0.95rem;
  margin-top: 0.4rem;
}
.ccq-basket__msg--ok {
  color: #2e7d32;               /* trust-green reassurance — code applied */
}

/* Tier nudge (ladder idiom, quiet reassurance) — replaces the World-B lime box. */
.ccq-basket__nudge {
  border: 1px solid #e0e0e0;
  border-radius: 6px;           /* quiet-card */
  background: #f7f7f7;          /* surface-alt */
  padding: 0.9rem 1rem;
  margin-top: 0.5rem;
}
.ccq-basket__nudge-discount {
  color: #1a1a1a;
  font-weight: 700;
}
.ccq-basket__nudge-note {
  color: #555;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* Trust panel bullets (secure payment / no card stored). */
.ccq-basket__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #555;
  font-size: 0.95rem;
}
.ccq-basket__trust li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.3rem;
}
.ccq-basket__trust li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2e7d32;               /* trust-green reassurance */
  font-weight: 700;
}

/* Empty-basket quiet card + primary CTA back to the index hero. */
.ccq-basket__empty {
  background: #f7f7f7;          /* surface-alt */
  border: 1px solid #e0e0e0;
  border-radius: 6px;           /* quiet-card */
  text-align: center;
  padding: 1.5rem 1rem;
}
.ccq-basket__empty-msg {
  color: #555;
  margin-bottom: 1rem;
}

/* Quiet "continue shopping" link (was a full-width secondary button). */
.ccq-basket__continue {
  text-align: center;
  margin: 0.5rem 0 1rem;
}
.ccq-basket__continue a {
  color: #1a1a1a;
  font-weight: 600;
}

/* ── Checkout contact step (shop/evalbasket.php → shop/checkout.mustache), 2026-08-28 ──
   The page reuses the basket's 720px column + .ccq-basket__panel idiom; these rules
   only restyle the moodleform INSIDE the contact panel: stacked labels (no 3/9 grid),
   full-width fields, a full-width primary CTA and the cancel demoted to a quiet link. */
.ccq-checkout__intro {
  color: #555;
  font-size: 0.95rem;
  margin: 0 0 1rem;
}
.ccq-checkout .mform fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
.ccq-checkout .mform .fitem {
  margin-bottom: 1rem;
}
.ccq-checkout .mform .fitem > .col-md-3,
.ccq-checkout .mform .fitem > .col-md-9 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.ccq-checkout .mform .col-form-label {
  justify-content: flex-start;
  text-align: left;
  font-weight: 600;
  color: #1a1a1a;
  padding-top: 0;
  padding-bottom: 0.25rem;
}
.ccq-checkout .mform .felement .form-control {
  width: 100%;
  max-width: 100%;
}
.ccq-checkout .mform [data-fieldtype="group"] .custom-select {
  flex: 0 0 auto;
  width: auto;
  margin-right: 0.5rem;
}
.ccq-checkout .mform [data-fieldtype="group"] .form-control {
  flex: 1 1 12rem;
  width: auto;
}
.ccq-checkout .mform span[data-fieldtype="submit"],
.ccq-checkout .mform span[data-fieldtype="cancel"] {
  display: block;
  width: 100%;
}
/* The button group renders each control in its own .fitem flex child; make the
   submit and cancel children take the full row so the CTA can be full-width. */
.ccq-checkout .mform .fitem:has(> span[data-fieldtype="submit"]),
.ccq-checkout .mform .fitem:has(> span[data-fieldtype="cancel"]) {
  flex: 0 0 100%;
  max-width: 100%;
}
.ccq-checkout .mform .btn-primary {
  width: 100%;
  font-size: 1.05rem;
  padding: 0.7rem 1rem;
  margin-top: 0.5rem;
}
.ccq-checkout .mform .btn-secondary {
  width: 100%;
  background: none;
  border: 0;
  color: #1a1a1a;
  font-weight: 600;
  text-decoration: underline;
  margin-top: 0.5rem;
}
.ccq-checkout .mform .btn-secondary:hover,
.ccq-checkout .mform .btn-secondary:focus {
  background: none;
  color: #1a1a1a;
  box-shadow: none;
}
.ccq-checkout__amount {
  white-space: nowrap;
}
.ccq-checkout__total-line {
  border-top: 1px solid #e0e0e0;
  padding-top: 0.4rem;
  margin-top: 0.4rem;
}

/* 1.16.0 (one checkout): a logged-in buyer's account email renders locked in the contact panel. */
.ccq-checkout .mform .form-control-static,
.ccq-checkout .mform .form-control-plaintext {
  padding-left: 0;
}
.ccq-checkout__locked-email {
  font-weight: 600;
}
.ccq-checkout__locked-note {
  color: #555;
  font-size: 0.9rem;
}