/* Checkout layout. Builds on the account page's tokens and card styling. */

.fi-co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 860px) {
  .fi-co-grid { grid-template-columns: 1fr; }
  .fi-co-summary { order: -1; }   /* on a phone the total matters most */
}

.fi-account-page textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--fi-border-strong, rgba(255, 255, 255, .16));
  background: rgba(0, 0, 0, .28);
  color: var(--fi-text, #f8fafc);
  font: inherit;
  font-size: .95rem;
  resize: vertical;
}

.fi-account-page textarea:focus {
  outline: none;
  border-color: var(--fi-orange, #ff7a1a);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .16);
}

.fi-co-req { color: #ff8f8f; }

.fi-co-pay { width: 100%; font-size: 1rem; padding: 13px 20px; }

/* --------------------------------------------------------- terms box */

.fi-co-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--fi-border-strong, rgba(255, 255, 255, .16));
  background: rgba(255, 255, 255, .035);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--fi-text, #f8fafc);
  cursor: pointer;
}

.fi-co-terms input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--fi-orange, #ff7a1a);
  cursor: pointer;
}

.fi-co-terms a {
  color: var(--fi-orange, #ff7a1a);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fi-co-terms a:hover { filter: brightness(1.2); }

.fi-co-terms:has(input:focus-visible) {
  border-color: var(--fi-orange, #ff7a1a);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .16);
}

.fi-co-secure {
  margin: 12px 0 0;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--fi-muted, #94a3b8);
  text-align: center;
}

/* ------------------------------------------------------------ summary */

.fi-co-summary { position: sticky; top: 84px; }

.fi-co-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--fi-border, rgba(255, 255, 255, .08));
}

.fi-co-line__name { font-weight: 600; }

.fi-co-line__meta {
  font-size: .8rem;
  color: var(--fi-muted, #94a3b8);
  margin-top: 3px;
  line-height: 1.5;
}

.fi-co-line__price { font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------- coupon */

.fi-co-coupon { margin: 18px 0 6px; }

.fi-co-coupon__row { display: flex; gap: 8px; }
.fi-co-coupon__row input { flex: 1 1 auto; }
.fi-co-coupon__row button { flex: 0 0 auto; }

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

.fi-co-totals { margin-top: 14px; }

.fi-co-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}

.fi-co-total__k { color: var(--fi-muted, #94a3b8); font-size: .92rem; }

.fi-co-total--discount { color: #35d17e; }
.fi-co-total--discount .fi-co-total__k { color: inherit; }

.fi-co-total--grand {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--fi-border-strong, rgba(255, 255, 255, .14));
  font-size: 1.25rem;
  font-weight: 800;
}

.fi-co-total--grand .fi-co-total__k { color: var(--fi-text, #f8fafc); font-size: 1rem; }

.fi-co-period { font-size: .78rem; font-weight: 500; color: var(--fi-muted, #94a3b8); }

/* ------------------------------------------------------- domains at checkout */

/*
 * One block per web-hosting line. Plesk cannot create a subscription without a
 * domain, so this is asked once the customer has committed rather than on the
 * package card, where it would be a question in front of a decision.
 *
 * The text inputs inherit `.fi-account-page input`; only the surrounding layout
 * and the two states that rule does not cover are defined here.
 */
.fi-co-domains {
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid var(--fi-border-strong, rgba(255, 255, 255, .16));
  background: rgba(255, 255, 255, .035);
}

.fi-co-domains__title {
  margin: 0 0 6px;
  font-size: .98rem;
  font-weight: 700;
  color: var(--fi-text, #f8fafc);
}

.fi-co-domains__lead {
  margin: 0 0 14px;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--fi-muted, #94a3b8);
}

.fi-co-domain + .fi-co-domain {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/*
 * Scoped under .fi-co-domain on purpose, and it has to stay that way.
 *
 * account.css carries `.fi-account-page label { display:block; font-size:.84rem;
 * color:muted; margin:12px 0 6px }`, which is specificity 0,1,1 -- higher than a bare
 * `.fi-co-domain__label` at 0,1,0. Unscoped, every one of these declarations silently
 * lost: the checkbox row never became a flex container, so `gap` did nothing and the
 * box aligned to the text baseline instead of its centre.
 */
.fi-co-domain .fi-co-domain__label {
  display: block;
  margin: 0 0 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--fi-text, #f8fafc);
}

.fi-co-domain .fi-co-domain__input {
  text-align: left;
}

/* Scoped for the same reason: `.fi-account-page input:focus` is 0,2,1, so an
   unscoped `.fi-co-domain__input--invalid:focus` (0,2,0) loses and the field
   turns orange-valid the moment it is focused, while still holding a bad value. */
.fi-co-domain .fi-co-domain__input--invalid,
.fi-co-domain .fi-co-domain__input--invalid:focus {
  border-color: #f0616a;
  box-shadow: 0 0 0 3px rgba(240, 97, 106, .16);
}

.fi-co-domain .fi-co-domain__none {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 9px 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--fi-muted, #94a3b8);
  cursor: pointer;
}

.fi-co-domain .fi-co-domain__none input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--fi-orange, #ff7a1a);
  cursor: pointer;
}

/* The text sets the row height; the box centres against it rather than sitting on
   the baseline, which is where an inline-block checkbox lands by default. */
.fi-co-domain .fi-co-domain__none > span {
  display: block;
}

.fi-co-domain__hint,
.fi-co-domain__err {
  margin: 8px 0 0;
  font-size: .8rem;
  line-height: 1.6;
}

.fi-co-domain__hint { color: var(--fi-muted, #94a3b8); }
.fi-co-domain__err  { color: #f0616a; }

/* The theme sets `display` on <p> and on flex labels, which beats the UA's
   [hidden] rule -- without this the hint and the error never hide. */
.fi-co-domains [hidden] { display: none !important; }