/* Checkout page. Written for this page only; it shares nothing with
   order_2024.css so the two can be changed independently. */

#checkout {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* the page hides things with the hidden attribute; several of them also carry a
   class that sets display, and an author rule beats the browser's own
   [hidden] { display: none }, so it has to be restated here */
#checkout [hidden],
.plugin-picker[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- header */

/* the site-wide `header` rule dresses every header element with the repeating
   logo pattern, a shadow and a bottom border. That belongs to the masthead, not
   to a heading inside the page, so it is undone here */
.checkout-header {
  position: static;
  z-index: auto;
  background: none;
  box-shadow: none;
  border: 0;
  text-align: center;
  margin-bottom: 28px;
}

#content .checkout-header h1 {
  margin-bottom: 6px;
}

.checkout-sub {
  color: #666;
  font-variation-settings: "wght" 400, "ital" 1;
}

/* ------------------------------------------------------------------ lines */

.cart-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

#content .cart-empty-button {
  padding: 3px 10px;
  border: 1px solid #ddd;
  border-radius: 100px;
  background: none;
  color: #888;
  font-family: var(--text-font);
  font-size: 12px;
  font-variation-settings: "wght" 600, "ital" 0;
  cursor: pointer;
}

#content .cart-empty-button:hover {
  border-color: #c0392b;
  color: #c0392b;
}

#content .cart-lines,
.plugin-picker .cart-lines {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid #ddd;
}

#content .cart-line,
.plugin-picker .cart-line {
  display: grid;
  grid-template-columns: 56px 1fr 72px 90px 32px;
  align-items: center;
  column-gap: 12px;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid #eee;
}

.cart-line-logo {
  display: block;
  line-height: 0;
}

.cart-line-logo img {
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  #content .cart-line,
  .plugin-picker .cart-line {
    grid-template-columns: 44px 1fr 64px 80px 28px;
    column-gap: 8px;
  }
}

/* below this the logo would be taking the room the plugin's name needs, so the
   row goes without it */
@media (max-width: 460px) {
  #content .cart-line,
  .plugin-picker .cart-line {
    grid-template-columns: 1fr 64px 76px 28px;
  }

  .cart-line-logo {
    display: none;
  }
}

/* each row carries its plugin's --plugin-theme, set by the template on first
   paint and by checkout.js on every re-render; royalblue is what the rest of
   the page links use, for a plugin that has no colour of its own */
#content .cart-line-name a,
.plugin-picker .cart-line-name a {
  color: var(--plugin-theme, royalblue);
  font-variation-settings: "wght" 750, "opsz" 16;
  font-size: 1.15em;
  text-decoration: none;
}

#content .cart-line-name a:hover,
.plugin-picker .cart-line-name a:hover {
  text-decoration: underline;
}

.cart-line-unit {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #777;
}

/* not an item in the cart but a consequence of it: no quantity, no price and
   nothing to remove, so it reads as an explanation rather than a line */
/* the same grey as the "$129.00 each" line it sits in place of */
#content .cart-bonus .cart-line-unit {
  font-variation-settings: "wght" 450, "ital" 1;
}

#content .cart-bonus .cart-line-total {
  color: seagreen;
  font-size: 15px;
  font-variation-settings: "wght" 700, "ital" 1;
}

.cart-line-unit s {
  color: lightpink;
  margin-right: 4px;
}

.cart-line-qty select {
  width: 100%;
  font-family: var(--text-font);
  font-size: 16px;
  font-variation-settings: "wght" 700, "ital" 0;
  padding: 3px;
}

.cart-line-total {
  text-align: right;
  font-size: 19px;
  font-variation-settings: "wght" 750, "opsz" 16;
}

/* ------------------------------------------------------- why this price */

/* the same info button the order page puts beside a price it has explained */
.cost-info-cell {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.cost-info {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  padding: 0;
  vertical-align: 1px;
  border: 1px solid hotpink;
  border-radius: 100%;
  background: none;
  color: hotpink;
  font-family: var(--text-font);
  font-size: 11px;
  line-height: 13px;
  font-variation-settings: "wght" 700, "ital" 1;
  text-align: center;
  cursor: pointer;
}

.cost-info:hover,
.cost-info[aria-expanded="true"] {
  border-color: deeppink;
  color: deeppink;
}

.cost-note-popup {
  display: none;
  position: absolute;
  z-index: 200;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: 240px;
  margin-top: 4px;
  padding: 8px 12px;
  background: hsl(46, 79%, 98%);
  border: 1px solid goldenrod;
  box-shadow: 0 0px 12px rgba(0, 0, 0, 0.38);
  white-space: normal;
  text-align: left;
  font-size: 15px;
  line-height: 130%;
  font-variation-settings: "wght" 400, "ital" 0;
  color: #333;
  border-radius: 2px;
}

.cost-note-popup.open {
  display: block;
}

.cost-note-popup > span {
  display: block;
}

.cost-note-popup > span + span {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eee;
}

/* the order page's sale flourish: pink, heavy and tilted, tucked under the
   price it applies to */
.cart-line-sale {
  display: block;
  margin-top: 1px;
  color: lightpink;
  font-variation-settings: "wght" 800, "ital" 0;
  font-size: 14px;
  transform: rotate(-3deg);
}

.cart-remove {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: none;
  color: #999;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.cart-remove:hover {
  border-color: #c33;
  color: #c33;
}

/* ------------------------------------------------------------- add more */

#content .bundle-nudge {
  margin: 0 0 8px;
  text-align: center;
  color: seagreen;
  font-variation-settings: "wght" 450, "ital" 1;
  /* opacity: 0.8; */
  /* color: #888; */
}

/* font-variation-settings above wins over the weight the browser gives <b>,
   so the bold has to be asked for the same way */
#content .bundle-nudge b {
  font-variation-settings: "wght" 800, "ital" 1;
  color: #256f46;
}

#content .cart-add-more {
  margin: 0 0 40px;
  text-align: center;
}

#content .add-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px 9px 14px;
  border: 1px solid seagreen;
  border-radius: 100px;
  background: seagreen;
  color: white;
  font-family: var(--text-font);
  font-size: 16px;
  font-variation-settings: "wght" 700, "ital" 0;
  cursor: pointer;
}

/* a shade under seagreen, for the same button pressed a little further */
#content .add-more:hover {
  background: #256f46;
  border-color: #256f46;
  color: white;
}

.add-more-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: white;
  color: seagreen;
  font-size: 18px;
  line-height: 1;
}

#content .add-more:hover .add-more-plus {
  background: white;
  color: #256f46;
}

/* --------------------------------------------------------------- picker */

.plugin-picker {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.plugin-picker[hidden] {
  display: none !important;
}

.picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 25, 0.28);
}

.picker-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

/* the site-wide header rule dresses every header element; not this one */
.plugin-picker .picker-header {
  position: static;
  z-index: auto;
  background: none;
  box-shadow: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.plugin-picker .picker-header h2 {
  margin: 0;
  font-size: 22px;
}

.plugin-picker .picker-done {
  padding: 7px 18px;
  border: 1px solid royalblue;
  background: royalblue;
  color: white;
  font-family: var(--text-font);
  font-size: 15px;
  font-variation-settings: "wght" 700, "ital" 0;
  cursor: pointer;
}

.plugin-picker .picker-done:hover {
  background: white;
  color: royalblue;
}

.plugin-picker .picker-lines {
  margin: 0;
  padding: 0 20px;
  overflow-y: auto;
  border-top: 0;
}

/* no quantity column here: one plus, and the row moves into the cart */
.plugin-picker .picker-lines .cart-line {
  grid-template-columns: 56px 1fr 90px 40px;
}

@media (max-width: 600px) {
  .plugin-picker .picker-lines .cart-line {
    grid-template-columns: 44px 1fr 80px 36px;
  }
}

@media (max-width: 460px) {
  .plugin-picker .picker-lines .cart-line {
    grid-template-columns: 1fr 76px 36px;
  }
}

.cart-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid seagreen;
  border-radius: 100%;
  background: seagreen;
  color: white;
  font-family: var(--text-font);
  font-size: 20px;
  font-variation-settings: "wght" 750, "ital" 0;
  line-height: 1;
  cursor: pointer;
}

.cart-add:hover {
  filter: brightness(1.15);
}

.cart-add:disabled {
  opacity: 0.5;
  cursor: default;
}

/* the whole row is the button: a press anywhere that is not a link adds it */
.plugin-picker .picker-lines .cart-line:not(.added) {
  cursor: pointer;
}

.plugin-picker .picker-lines .cart-line:not(.added):hover {
  background: rgba(46, 139, 87, 0.06);
}

.plugin-picker .picker-lines .cart-line a {
  cursor: pointer;
}

/* an added row holds its place, faded out under the word that it worked */
.plugin-picker .cart-line.added {
  position: relative;
}

.plugin-picker .cart-line.added > *:not(.cart-line-added) {
  opacity: 0.25;
  pointer-events: none;
}

.cart-line-added {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: seagreen;
  font-size: 17px;
  font-variation-settings: "wght" 500, "ital" 1;
}

.picker-empty {
  padding: 24px 20px 32px;
  text-align: center;
  color: #777;
}

/* the page behind the dialog, softened while it is open */
#outer.picker-open {
  filter: blur(2.5px);
}

/* nothing behind the dialog scrolls; checkout.js holds the body in place and
   this stops the document itself from scrolling underneath it */
html.picker-locked,
html.picker-locked body {
  overflow: hidden;
}

/* and scrolling to the end of the list does not carry on into the page */
.plugin-picker .picker-lines {
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------- columns */

.checkout-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 700px) {
  .checkout-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field label,
#content .field label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  text-transform: uppercase;
  font-variation-settings: "wght" 700, "ital" 0;
  color: #666;
}

.field input[type="text"],
.field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  font-family: var(--text-font);
  font-size: 16px;
  border: 1px solid #ccc;
}

.field.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  text-transform: none;
}

#content .field.checkbox a {
  color: royalblue;
}

/* the address the licenses land at: a statement of fact, set apart from the
   fields above it that the customer can actually change */
.account-email {
  padding: 12px 14px;
  background: whitesmoke;
}

#content .account-email .field-note {
  margin-top: 2px;
}

/* a transfer has no quantity column companions to line up with, and no
   remove button, so the row is one short */
.transfer-notes p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 145%;
}

#content .gift-note {
  margin: -8px 0 16px 0px;
  max-width: 30em;
}

/* the reseller's recipient field: typed in, and checked as it is typed */
.recipient-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recipient-line input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
}

.recipient-state {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}

.recipient-mark {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  font-variation-settings: "wght" 800, "ital" 0;
}

.recipient-state.valid .recipient-mark {
  background: seagreen;
  color: white;
}

.recipient-state.valid .recipient-mark::after {
  content: "✓";
}

.recipient-state.invalid .recipient-mark {
  background: #c0392b;
  color: white;
}

.recipient-state.invalid .recipient-mark::after {
  content: "✕";
}

/* checking: a ring that goes round while the server is asked */
.recipient-state.checking .recipient-mark {
  box-sizing: border-box;
  border: 2px solid #ddd;
  border-top-color: royalblue;
  animation: recipient-spin 0.7s linear infinite;
}

@keyframes recipient-spin {
  to { transform: rotate(360deg); }
}

/* readonly: it is the account's address, shown rather than asked for */
.field input[readonly] {
  padding-left: 0;
  border: 0;
  background: none;
  color: #333;
  font-variation-settings: "wght" 600, "ital" 0;
}

.field input[readonly]:focus {
  outline: none;
}

.field-note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #777;
}

/* ---------------------------------------------------------------- totals */

.cart-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  margin: 0 0 20px;
  padding: 16px;
  background: rgba(210, 245, 220, 0.35);
  border: 1px solid rgba(110, 155, 120, 0.25);
}

#content .cart-totals dt,
#content .cart-totals dd {
  margin: 0;
}

#content .cart-totals dd {
  text-align: right;
  font-variation-settings: "wght" 700, "ital" 0;
}

/* a full-width line under the total; the list is a two-column grid */
.cart-totals .totals-gift {
  grid-column: 1 / -1;
  padding-top: 6px;
  text-align: center;
  color: seagreen;
  font-variation-settings: "wght" 650, "ital" 1;
  padding: 6px 0 0 0;
  margin-top: 6px;
  border-top: 1px solid seagreen;
  text-align: right;
}

.cart-totals .minus {
  color: seagreen;
}

.cart-totals .grand {
  padding-top: 8px;
  border-top: 1px solid rgba(110, 155, 120, 0.35);
  font-size: 1.2em;
  font-variation-settings: "wght" 800, "ital" 0;
}

/* --------------------------------------------------------------- payment */

.checkout-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 0;
  margin-bottom: 10px;
  border: 1px solid white;
  background: royalblue;
  color: white;
  font-family: var(--text-font);
  font-size: 18px;
  font-variation-settings: "wght" 700, "ital" 0;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

#content a.checkout-button {
  color: white;
  text-decoration: none;
}

.checkout-button.secondary {
  background: none;
  border: 1px solid #ccc;
  color: royalblue;
  box-shadow: none;
}

#content a.checkout-button.secondary {
  color: royalblue;
}

.checkout-button:hover {
  filter: brightness(1.08);
}

.checkout-link {
  display: block;
  width: 100%;
  padding: 6px 0;
  border: none;
  background: none;
  color: cornflowerblue;
  font-family: var(--text-font);
  font-variation-settings: "wght" 500, "ital" 1;
  cursor: pointer;
}

.checkout-divider {
  text-align: center;
  padding: 10px 0;
  color: #777;
  font-variation-settings: "ital" 1;
}

.checkout-divider span {
  color: #ddd;
}

#checkout-express,
#checkout-paypal {
  margin-bottom: 10px;
}

#checkout-pay.busy {
  opacity: 0.45;
  pointer-events: none;
}

#checkout-payment-element {
  margin-bottom: 18px;
}

.checkout-message {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fff4f4;
  border: 1px solid #f0caca;
  color: #a33;
  font-size: 15px;
}

.checkout-login {
  margin-bottom: 12px;
  font-size: 15px;
}

/* Logged out, where a wallet is the only way to pay. The note sits under the
   Express Checkout button and says what happens after paying; the fallback
   takes its place when the browser has no wallet to offer. */

.checkout-guest-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #777;
  text-align: center;
}

#checkout-guest-fallback .checkout-login {
  text-align: center;
}

/* The stand-in for a wallet button, shown only when the site is configured to
   offer it. It borrows the page's own field and button shapes — square, 16px
   inputs, 13px uppercase labels — rather than inventing rounder, smaller ones,
   so that only its colour marks it out as scaffolding. */

.checkout-debug {
  margin-top: 18px;
  padding: 14px;
  border: 1px dashed #c9a227;
  background: #fffdf3;
}

.checkout-debug-tag {
  display: block;
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  font-variation-settings: "wght" 700, "ital" 0;
  color: #9a7b10;
}

.checkout-debug-email {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  text-transform: uppercase;
  font-variation-settings: "wght" 700, "ital" 0;
  color: #9a7b10;
}

#checkout .checkout-debug-email input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 8px;
  font-family: var(--text-font);
  font-size: 16px;
  text-transform: none;
  font-variation-settings: "wght" 400, "ital" 0;
  color: #000;
  border: 1px solid #ddd2a0;
  background: white;
}

#checkout-debug-express {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 0;
  border-color: #c9a227;
  background: #7a6210;
}

#checkout-debug-express:hover { background: #5d4a0c; }

#checkout-debug-express svg { flex: 0 0 auto; }

/* --------------------------------------------------------- empty, spinner */

.cart-empty {
  text-align: center;
  padding: 40px 0 60px;
}

.cart-empty p {
  margin-bottom: 16px;
}

.cart-empty .checkout-button {
  display: inline-block;
  width: auto;
  padding: 10px 24px;
}

#content .cart-free-note {
  margin: 14px 0 0;
  color: #777;
  font-size: 15px;
  font-variation-settings: "wght" 400, "ital" 1;
}

#content .cart-free-note a {
  color: seagreen;
  font-variation-settings: "wght" 650, "ital" 1;
}

#content .cart-empty .cart-add-more {
  margin-bottom: 0;
}

/* ---------------------------------------------------- curated collections */

/* the collections themselves are styled in collections.css, which
   /collections shares */

/* what a plugin in the add-more dialog would bring with it, free */
.cart-line-includes {
  display: block;
  margin-top: 2px;
  color: #888;
  font-size: 13px;
  font-variation-settings: "wght" 500, "ital" 1;
}

.checkout-spinner {
  height: 3px;
  margin-top: 12px;
  background: linear-gradient(to right, transparent, royalblue, transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: checkout-sweep 1s linear infinite;
}

@keyframes checkout-sweep {
  from { background-position: -50% 0; }
  to { background-position: 150% 0; }
}

/* -------------------------------------------------------------- receipt */

.checkout-receipt {
  text-align: center;
  padding: 40px 0;
}

.checkout-receipt .checkout-button {
  display: inline-block;
  width: auto;
  padding: 10px 24px;
  margin-top: 12px;
}


/* ------------------------------------------- best sellers, empty cart

   The three cards above the curated collections in the empty state, same as
   the front page's. */

/* the same framing .collections carries, because the question above it now
   heads both sections rather than only the one below */
.cart-popular {
    margin: 56px auto 10px;
    padding-top: 32px;
    max-width: 1200px;
    text-align: center;
}

/* Three abreast, never two with an orphan under them — what index_2024.css
   does with the same three cards. Through the section so it outweighs
   `#content .plugin-cards` in plugin_directory.css. */
#content .cart-popular .plugin-cards {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 860px) {
    #content .cart-popular .plugin-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.cart-popular .collections-more {
    margin-top: 18px;
}

/* ---------------------------------------- the card as a widget

   Pared back to sit beside the collection cards: no logo, no price, and the
   green cart circle they carry in the row with the name. The whole card adds
   (checkout.js), so nothing inside it should look like a separate target. */

/* the section centres its heading; the cards read left, as the collection
   cards beside them do */
#content .cart-popular .plugin-card-item {
    text-align: left;
}

#content .cart-popular .plugin-card {
    cursor: pointer;
}

/* The link holds only the stage here, and on the full card it is `flex: 1` so
   that the buy buttons line up along the bottom however tall the card is. That
   stretch would push this card's name down by whatever its neighbours' text
   does not need, which is what left the three of them staggered; the stages
   are all one height, so not stretching is what lines the names up. Any slack
   from the row's shared height falls below the tagline instead. */
#content .cart-popular .plugin-card-link {
    flex: 0 0 auto;
}

/* Two columns, not the three (52px logo | text | price) the full card is laid
   out as: here it is the text and the button that sits where the price was. */
#content .cart-popular .plugin-card-info {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px 16px;
    /* the stage's edge already divides it from the text */
    border-top: 0;
}

/* the name is the one thing inside that still leads to the plugin */
#content .cart-popular .plugin-card-name a {
    color: inherit;
    text-decoration: none;
}

#content .cart-popular .plugin-card-name a:hover {
    text-decoration: underline;
}

#content .cart-popular .plugin-card-add {
    /* .collection-add draws the circle; this only places it. The nudge sits it
       on the name's line rather than its box, as the collection cards do. */
    flex: 0 0 auto;
    align-self: start;
    margin-top: -2px;
}

.empty-cart-viz {
  border: 1px dashed #ccc;
  border-radius: 20px;
  padding: 26px 26px 34px 26px;
  margin: auto auto 20px auto;
  max-width: 600px;
}