/* ==============================================================================
 * Creative Yadley - Detail pages
 * ------------------------------------------------------------------------------
 * Shared components for the record pages: invoice, ticket, domain and account.
 *
 * Alignment rule for the whole theme: content and headings align to the page's
 * left content edge. The only deliberate exceptions are modal dialogs and the
 * standalone invoice sheet, which is a printable document and keeps a centred
 * page column with left-aligned content inside it.
 *
 * Tokens only: no raw brand values. Layer order is set in cy.css.
 * ============================================================================== */

/* -----------------------------------------------------------------------------
 * Attachment field (includes/upload-field.tpl)
 * -----------------------------------------------------------------------------
 * The same control the ticket form uses, packaged so any form can take files:
 * a pill tile that owns the input, extra rows beneath it, and a quiet add.
 * -------------------------------------------------------------------------- */
.cy-attach {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
}

.cy-attach__field {
  display: flex;
  align-items: center;
  gap: var(--cy-space-3);
  min-height: 48px;
  padding: 0 var(--cy-space-5);
  border: var(--cy-border-width) solid var(--cy-border-strong);
  border-radius: var(--cy-radius-pill);
  background-color: var(--cy-field);
  color: var(--cy-text-secondary);
  font-size: var(--cy-ca-label);
  font-weight: 600;
  cursor: pointer;
}

.cy-attach__field:hover {
  background-color: var(--cy-surface-2);
}

.cy-attach__field:focus-within {
  outline: var(--cy-focus-width) solid var(--cy-focus);
  outline-offset: var(--cy-focus-offset);
}

/* The input stays focusable; the label is the visible control. */
.cy-attach__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.cy-attach__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cy-attach__rows {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-2);
}

.cy-attach__row {
  display: flex;
  align-items: stretch;
  gap: var(--cy-space-2);
}

.cy-attach__row .cy-attach__field {
  flex: 1 1 auto;
}

.cy-attach__add {
  align-self: flex-start;
  min-height: 40px;
  padding: 0 var(--cy-space-4);
  font-size: var(--cy-ca-label);
}

.cy-attach__remove {
  min-height: 48px;
}

/* -----------------------------------------------------------------------------
 * Page hero
 * -----------------------------------------------------------------------------
 * Every client-area page opens with the same band: a compact photographic hero
 * (200px, 160px on phones), a scrim that keeps the type legible in both themes,
 * and eyebrow / title / lede on the left content edge.
 *
 * The image is chosen per page from `data-cy-page` on <body> (set in
 * header.tpl), so a page only has to own a `.cy-page-head` - all thirty of them
 * already did. `--cy-page-image` falls back to a neutral studio image, and the
 * scrim uses --cy-bg, so light mode gets a light wash rather than a dark one.
 *
 * Deliberately without a hero: the standalone invoice sheet (a printable
 * document) and the booking engine (its own surface).
 * -------------------------------------------------------------------------- */
.cy-page-head {
  --cy-page-image: url("../assets/img/studio-resolutions.jpg");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  margin: 0 0 var(--cy-space-5);
  padding: var(--cy-space-8) var(--cy-space-6);
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background-color: var(--cy-surface-1);
}

.cy-page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--cy-page-image);
  background-repeat: no-repeat;
  background-size: cover;
  /* Subjects sit right of centre; the type owns the left third. */
  background-position: right center;
}

.cy-page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      var(--cy-bg) 0%,
      color-mix(in srgb, var(--cy-bg) 92%, transparent) 38%,
      color-mix(in srgb, var(--cy-bg) 52%, transparent) 100%
    );
}

@media (max-width: 767.98px) {
  .cy-page-head {
    min-height: 160px;
    padding: var(--cy-space-5) var(--cy-space-4);
  }
}

.cy-page-head__eyebrow {
  margin: 0 0 var(--cy-space-1);
  font-size: var(--cy-text-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cy-text-muted);
}

/* Per-page hero images. Unmatched pages keep the neutral fallback. */
body[data-cy-page="clientareahome"] .cy-page-head,
body[data-cy-page="affiliates"] .cy-page-head { --cy-page-image: url("../assets/img/studio-team.jpg"); }

/* Account surfaces: the people behind the account (user management, contact). */
body[data-cy-page="account-user-management"] .cy-page-head,
body[data-cy-page="account-user-permissions"] .cy-page-head,
body[data-cy-page="contact"] .cy-page-head { --cy-page-image: url("../assets/img/studio-team.jpg"); }

/* Email History: a record of what we sent, kept with the account paperwork. */
body[data-cy-page="clientareaemails"] .cy-page-head { --cy-page-image: url("../assets/img/studio-clean-code.jpg"); }

/* Domain sub-pages and the upgrade flow step: same families as their parents. */
body[data-cy-page="bulkdomainmanagement"] .cy-page-head,
body[data-cy-page="clientareadomainaddons"] .cy-page-head,
body[data-cy-page="clientareadomaingetepp"] .cy-page-head,
body[data-cy-page="clientareadomainregisterns"] .cy-page-head,
body[data-cy-page="domain-pricing"] .cy-page-head { --cy-page-image: url("../assets/img/svc-audit.jpg"); }

body[data-cy-page="upgrade-configure"] .cy-page-head { --cy-page-image: url("../assets/img/svc-custom-app.jpg"); }

/* Support feedback and the affiliate invitation reuse their family's image; the
 * 3-D Secure interstitial belongs with the payment documents. */
body[data-cy-page="ticketfeedback"] .cy-page-head { --cy-page-image: url("../assets/img/studio-security.jpg"); }
body[data-cy-page="affiliatessignup"] .cy-page-head { --cy-page-image: url("../assets/img/studio-team.jpg"); }
body[data-cy-page="3dsecure"] .cy-page-head { --cy-page-image: url("../assets/img/studio-clean-code.jpg"); }

body[data-cy-page="clientareaproducts"] .cy-page-head,
body[data-cy-page="clientareaproductdetails"] .cy-page-head,
body[data-cy-page="clientareacancelrequest"] .cy-page-head,
body[data-cy-page="upgrade"] .cy-page-head,
body[data-cy-page="upgradesummary"] .cy-page-head { --cy-page-image: url("../assets/img/svc-custom-app.jpg"); }

body[data-cy-page="clientareadomains"] .cy-page-head,
body[data-cy-page="clientareadomaindetails"] .cy-page-head,
body[data-cy-page="clientareadomaindns"] .cy-page-head,
body[data-cy-page="clientareadomaincontactinfo"] .cy-page-head,
body[data-cy-page="clientareadomainemailforwarding"] .cy-page-head { --cy-page-image: url("../assets/img/svc-audit.jpg"); }

body[data-cy-page="clientareainvoices"] .cy-page-head,
body[data-cy-page="clientareabillingnotes"] .cy-page-head,
body[data-cy-page="clientareaquotes"] .cy-page-head,
body[data-cy-page="masspay"] .cy-page-head,
body[data-cy-page="invoice-payment"] .cy-page-head,
body[data-cy-page="clientareadetails"] .cy-page-head,
body[data-cy-page="account-paymentmethods"] .cy-page-head,
body[data-cy-page="account-paymentmethods-manage"] .cy-page-head,
body[data-cy-page="account-contacts"] .cy-page-head,
body[data-cy-page="account-contacts-new"] .cy-page-head,
body[data-cy-page="account-contacts-manage"] .cy-page-head,
body[data-cy-page="user-profile"] .cy-page-head,
body[data-cy-page="user-security"] .cy-page-head,
body[data-cy-page="user-password"] .cy-page-head { --cy-page-image: url("../assets/img/studio-clean-code.jpg"); }

body[data-cy-page="supportticketslist"] .cy-page-head,
body[data-cy-page="submitticket"] .cy-page-head,
body[data-cy-page="supportticketsubmit-stepone"] .cy-page-head,
body[data-cy-page="supportticketsubmit-steptwo"] .cy-page-head,
body[data-cy-page="viewticket"] .cy-page-head { --cy-page-image: url("../assets/img/hero-ticket.jpg"); }

body[data-cy-page="serverstatus"] .cy-page-head { --cy-page-image: url("../assets/img/hero-server-network.jpg"); }

body[data-cy-page="knowledgebase"] .cy-page-head,
body[data-cy-page="knowledgebasecat"] .cy-page-head,
body[data-cy-page="knowledgebasearticle"] .cy-page-head,
body[data-cy-page="announcements"] .cy-page-head,
body[data-cy-page="viewannouncement"] .cy-page-head,
body[data-cy-page="download"] .cy-page-head,
body[data-cy-page="downloadscat"] .cy-page-head { --cy-page-image: url("../assets/img/studio-resolutions.jpg"); }

body[data-cy-page="clientareasecurity"] .cy-page-head,
body[data-cy-page="clientareaaddfunds"] .cy-page-head { --cy-page-image: url("../assets/img/studio-clean-code.jpg"); }

body[data-cy-page="login"] .cy-page-head,
body[data-cy-page="clientregister"] .cy-page-head,
body[data-cy-page="password-reset-container"] .cy-page-head,
body[data-cy-page="password-reset-email-prompt"] .cy-page-head,
body[data-cy-page="password-reset-security-prompt"] .cy-page-head,
body[data-cy-page="password-reset-change-prompt"] .cy-page-head { --cy-page-image: url("../assets/img/svc-landing-page.jpg"); }

/* Raises its own selector to the scale block's weight so the page title keeps
 * the page-title size while a plain `#main-body h2` stays a section heading. */
body #main-body .cy-page-head__title {
  margin: 0 0 var(--cy-space-2);
  font-family: var(--cy-font-display);
  font-size: var(--cy-ca-page);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--cy-text);
}

.cy-page-head__lede {
  margin: 0;
  max-width: 56ch;
  font-size: var(--cy-text-compact);
  line-height: 1.55;
  color: var(--cy-text-secondary);
}

/* The same lede, reused inside a card body, needs to clear what follows it: the
 * hero variant sits directly above a block that has its own margin, a card body
 * does not. */
.cy-detail-card__body > .cy-page-head__lede {
  margin-bottom: var(--cy-space-5);
}

/* -----------------------------------------------------------------------------
 * Detail stack and cards
 * -------------------------------------------------------------------------- */
.cy-detail {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-4);
}

.cy-detail-card {
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
  overflow: hidden;
}

.cy-detail-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cy-space-3);
  padding: var(--cy-space-4) var(--cy-space-5);
  border-bottom: var(--cy-border-width) solid var(--cy-border);
}

/* When the page hero already carries the title, the card head becomes a strip
 * for metadata and actions only, aligned to the right edge. */
.cy-detail-card__head--strip {
  justify-content: flex-end;
  padding-top: var(--cy-space-3);
  padding-bottom: var(--cy-space-3);
}

.cy-detail-card__title {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: var(--cy-ca-card);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--cy-text);
}

.cy-detail-card__title i {
  font-size: 16px;
  color: var(--cy-text-muted);
}

.cy-detail-card__meta {
  font-size: var(--cy-text-caption);
  color: var(--cy-text-muted);
  font-variant-numeric: tabular-nums;
}

.cy-detail-card__body {
  padding: var(--cy-space-5);
}

.cy-detail-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cy-space-3);
  padding: var(--cy-space-4) var(--cy-space-5);
  border-top: var(--cy-border-width) solid var(--cy-border);
}

/* -----------------------------------------------------------------------------
 * Key/value pairs: invoice metadata, account summary, domain facts.
 * -------------------------------------------------------------------------- */
.cy-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--cy-space-5);
  margin: 0;
}

.cy-kv__item {
  min-width: 0;
}

.cy-kv__label {
  display: block;
  margin: 0 0 var(--cy-space-1);
  font-size: var(--cy-text-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cy-text-muted);
}

.cy-kv__value {
  margin: 0;
  font-size: var(--cy-text-compact);
  line-height: 1.55;
  color: var(--cy-text);
}

.cy-kv__value strong {
  font-weight: 600;
}

/* A named sub-value inside one kv cell (SSL start date, issuer, expiry). */
.cy-kv__sublabel {
  display: block;
  margin: var(--cy-space-2) 0 2px;
  font-size: var(--cy-text-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cy-text-muted);
}

/* Radio/checkbox choice group: one left edge, token spacing. */
.cy-check-group {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-1);
  margin: 0 0 var(--cy-space-5);
}

/* -----------------------------------------------------------------------------
 * Form layout
 * -------------------------------------------------------------------------- */
.cy-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cy-space-4) var(--cy-space-6);
}

@media (max-width: 767.98px) {
  .cy-form-grid { grid-template-columns: minmax(0, 1fr); }
}

.cy-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cy-field--full {
  grid-column: 1 / -1;
}

body #main-body .cy-field > label,
body #main-body .cy-field__label {
  margin: 0;
  font-size: var(--cy-text-caption);
  font-weight: 400;
  color: var(--cy-text-secondary);
}

.cy-field__hint {
  margin: 0;
  font-size: var(--cy-text-micro);
  line-height: 1.45;
  color: var(--cy-text-muted);
}

.cy-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-3);
  padding-top: var(--cy-space-2);
}

/* Stripe Elements supplies its own markup: a Bootstrap horizontal-form row with
 * the label in col-4 and the field in col-7. That is the one place in the client
 * area where a label sits beside its field, and the gap between them is wide
 * enough to read as two unrelated columns. Restack each row on the same
 * label-over-field rhythm as .cy-field, and keep the expiry/CVC boxes compact. */
#stripeElements .cc-billing-address {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0 0 var(--cy-space-4);
}

#stripeElements .cc-billing-address > label,
#stripeElements .cc-billing-address > [class*="col-"] {
  width: 100%;
  max-width: none;
  flex: none;
  padding: 0;
}

#stripeElements .cc-billing-address > label {
  color: var(--cy-text);
  font-size: var(--cy-text-caption);
  font-weight: 600;
  text-align: left;
}

#stripeElements .cc-billing-address > .col-sm-6:empty {
  display: none;
}

#stripeElements #stripeExpiryDate,
#stripeElements #stripeCvc {
  max-width: 220px;
}

#stripeElements #stripeCvcWhere {
  margin-top: var(--cy-space-1);
  text-align: left;
}

#stripeElements #stripeCvcWhere .btn-link {
  font-size: var(--cy-text-caption);
}

/* -----------------------------------------------------------------------------
 * Line items and totals
 * -------------------------------------------------------------------------- */
.cy-lineitems {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cy-text-caption);
}

.cy-lineitems th,
.cy-lineitems td {
  padding: var(--cy-space-3) var(--cy-space-4);
  border-bottom: var(--cy-border-width) solid var(--cy-border);
  text-align: left;
  vertical-align: top;
}

.cy-lineitems thead th {
  padding-top: 0;
  font-size: var(--cy-text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cy-text-muted);
  white-space: nowrap;
}

/* `.cy-lineitems td { text-align: left }` above is class + element, so a bare
 * `.cy-lineitems__num` lost to it and every numeric column rendered left-aligned
 * (invoice, quote, payment methods). Raise these to the same shape so the
 * declared alignment actually applies. */
.cy-lineitems th.cy-lineitems__num,
.cy-lineitems td.cy-lineitems__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cy-lineitems tbody tr:last-child td {
  border-bottom: 0;
}

.cy-lineitems__totals th,
.cy-lineitems__totals td {
  border-bottom: 0;
  padding-top: var(--cy-space-2);
  padding-bottom: var(--cy-space-2);
}

.cy-lineitems__totals th {
  text-align: right;
  font-weight: 600;
  color: var(--cy-text-secondary);
}

.cy-lineitems__totals tr:last-child th,
.cy-lineitems__totals tr:last-child td {
  padding-top: var(--cy-space-3);
  color: var(--cy-text);
  font-size: var(--cy-text-compact);
  font-weight: 700;
}

.cy-lineitems__note {
  margin: var(--cy-space-3) 0 0;
  font-size: var(--cy-text-micro);
  color: var(--cy-text-muted);
}

/* Row-level actions in a table card: quiet pills, right-aligned.
 * Used by User Management (per-user and pending-invite rows).
 *
 * Deliberately not a flex row. A flex cell whose content cannot shrink reports a
 * tiny intrinsic width, and `justify-content: flex-end` then pushes the overflow
 * out of the LEFT of the cell, over the neighbouring columns. Inline-level pills
 * let the column break BETWEEN them (never inside a label, which is nowrap) and
 * keep its minimum width at one pill, so the table never has to scroll sideways
 * to reach an action. */
.cy-lineitems__actions {
  text-align: right;
}

/* Same specificity raise as .cy-lineitems__num above: `.cy-lineitems td` would
 * otherwise left-align the pill group. */
.cy-lineitems td.cy-lineitems__actions {
  text-align: right;
}

.cy-lineitems__actions > * {
  margin: 3px 0 3px var(--cy-space-2);
  vertical-align: middle;
}

.cy-lineitems__actions form {
  display: inline-block;
  margin: 0 0 0 var(--cy-space-2);
}

.cy-lineitems__actions .cy-button {
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * Affected-domain chips (bulk domain management)
 * -----------------------------------------------------------------------------
 * The parent listed the domains a bulk action touches in a stack of list-group
 * rows, so two domains looked like two cards. They are a set, not a list: pills
 * on one line, wrapping only when they run out of room.
 * -------------------------------------------------------------------------- */
.cy-affected {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-2);
  margin: 0 0 var(--cy-space-5);
}

.cy-affected__label {
  margin: 0;
  font-size: var(--cy-text-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cy-text-muted);
}

.cy-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-chip-list li {
  padding: 4px 12px;
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-pill);
  background: var(--cy-surface-2);
  font-size: var(--cy-text-caption);
  font-weight: 600;
  color: var(--cy-text);
}

/* -----------------------------------------------------------------------------
 * Tab strip (bulk contact information)
 * -----------------------------------------------------------------------------
 * Bootstrap's nav-tabs keep the working data-toggle="tab" behaviour; only the
 * chrome is ours: an underline on the active tab instead of a bordered box, so
 * the strip reads as section navigation inside the card.
 * -------------------------------------------------------------------------- */
.cy-tabs {
  margin: 0 0 var(--cy-space-5);
  border-bottom: var(--cy-border-width) solid var(--cy-border);
}

.cy-tabs .nav-item { margin: 0; }

.cy-tabs .nav-link {
  padding: var(--cy-space-2) var(--cy-space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: var(--cy-text-caption);
  font-weight: 600;
  color: var(--cy-text-muted);
}

.cy-tabs .nav-link:hover,
.cy-tabs .nav-link:focus-visible {
  color: var(--cy-text);
  border-bottom-color: var(--cy-border-strong);
  background: transparent;
}

.cy-tabs .nav-link.active {
  color: var(--cy-text);
  border-bottom-color: var(--cy-action);
  background: transparent;
}

.cy-tabs .nav-link.active:hover,
.cy-tabs .nav-link.active:focus-visible {
  border-bottom-color: var(--cy-action);
}

/* The tab panes sit inside the card body, so they only need a rhythm. */
.cy-tab-pane { padding: 0; }

/* Nameserver fields carry the domain as a suffix; Bootstrap's input-group-text
 * is parent-grey with a parent border. */
.cy-detail .input-group-text {
  font-size: var(--cy-text-caption);
  color: var(--cy-text-muted);
  background: var(--cy-surface-2);
  border-color: var(--cy-border-strong);
}

/* -----------------------------------------------------------------------------
 * Upgrade choices (upgrade-configure.tpl)
 * -----------------------------------------------------------------------------
 * The parent stacked product "cards" in Bootstrap columns with its own header /
 * body / footer chrome, which read as three unrelated panels. One grid, one
 * equal-height card per product, features as label/value rows, and the action
 * pinned to the bottom so the buttons line up across the grid.
 * -------------------------------------------------------------------------- */
.cy-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--cy-space-4);
}

.cy-plan {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-4);
  padding: var(--cy-space-5);
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-2);
}

.cy-plan__name {
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: var(--cy-ca-card);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cy-text);
}

.cy-plan__desc {
  margin: var(--cy-space-1) 0 0;
  font-size: var(--cy-text-caption);
  line-height: 1.5;
  color: var(--cy-text-secondary);
}

.cy-plan__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-2);
  margin-top: var(--cy-space-3);
}

.cy-plan__features {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-plan__features li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cy-space-3);
  padding: 6px 0;
  border-bottom: var(--cy-border-width) solid var(--cy-border);
  font-size: var(--cy-text-caption);
  color: var(--cy-text-secondary);
}

.cy-plan__features li:last-child { border-bottom: 0; }

.cy-plan__features li i { font-size: 16px; }
.cy-plan__features li .ph-check { color: var(--cy-success-text); }
.cy-plan__features li .ph-x { color: var(--cy-text-muted); }

.cy-plan__foot {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-2);
  margin-top: auto;
}

.cy-plan__qty {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
  font-size: var(--cy-text-caption);
  color: var(--cy-text-secondary);
}

.cy-plan__qty .form-control { width: 96px; }

/* One full-width action per plan card, so the buttons line up across the grid. */
.cy-plan__foot form {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-2);
  margin: 0;
}

.cy-plan__foot .cy-button { width: 100%; justify-content: center; }

/* The EPP code is a transfer credential: monospaced, boxed, selectable in one
 * gesture rather than sitting in a sentence. */
.cy-epp {
  margin: 0 0 var(--cy-space-4);
  padding: var(--cy-space-3) var(--cy-space-4);
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-md);
  background: var(--cy-surface-2);
  font-family: var(--cy-font-mono);
  font-size: var(--cy-text-compact);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cy-text);
  word-break: break-all;
  user-select: all;
}

/* Guest currency switch on the pricing page: one row, label beside the select,
 * on the content edge (the shell's own picker is in the top bar). */
.cy-currency-switch {
  display: flex;
  align-items: center;
  gap: var(--cy-space-3);
  margin: 0 0 var(--cy-space-5);
}

.cy-currency-switch .cy-field__label {
  margin: 0;
  white-space: nowrap;
}

.cy-currency-switch select {
  width: auto;
}

/* -----------------------------------------------------------------------------
 * Featured TLDs (domain-pricing.tpl)
 * -----------------------------------------------------------------------------
 * The parent renders a bitmap logo per TLD from assets/img/tld_logos/. Only the
 * common ones exist on this install, so an unlisted extension showed a broken
 * image. The extension is set in type instead.
 * -------------------------------------------------------------------------- */
.cy-tld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--cy-space-3);
  margin: 0 0 var(--cy-space-6);
}

.cy-tld {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-1);
  padding: var(--cy-space-4) var(--cy-space-5);
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-2);
}

.cy-tld__name {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
  font-family: var(--cy-font-display);
  font-size: var(--cy-ca-section);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cy-text);
}

/* Extension colour code, matching the homepage TLD pills: red .com, blue .org, amber .net,
 * lime .store, violet .club, muted for everything else. The halo only appears when a
 * colour is assigned, so an unmapped extension reads as a plain dot rather than a glow. */
.cy-tld__dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--cy-text-muted);
  vertical-align: middle;
}

/* In the pricing table the dot sits inside `.cy-table__title`, which is inline, so it
 * needs its own spacing - the featured cards get theirs from the flex parent's gap. */
.cy-table__title .cy-tld__dot {
  margin-right: var(--cy-space-2);
}

.cy-tld__dot--set {
  background-color: var(--cy-dot);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cy-dot) 70%, transparent);
}

.cy-tld__price {
  font-size: var(--cy-text-caption);
  color: var(--cy-text-secondary);
}

.cy-tld__price strong {
  font-weight: 600;
  color: var(--cy-text);
}

/* -----------------------------------------------------------------------------
 * Filter chips (domain pricing categories)
 * -----------------------------------------------------------------------------
 * Buttons, not badges: they filter the table, so they need a pressed state and a
 * focus ring. One row, wrapping, on the content edge.
 * -------------------------------------------------------------------------- */
.cy-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-2);
  margin: 0 0 var(--cy-space-5);
}

.cy-filter-chip {
  padding: 6px 14px;
  border: var(--cy-border-width) solid var(--cy-border-strong);
  border-radius: var(--cy-radius-pill);
  background: var(--cy-surface-2);
  font-family: var(--cy-font-sans);
  font-size: var(--cy-text-caption);
  font-weight: 600;
  color: var(--cy-text-secondary);
  cursor: pointer;
}

.cy-filter-chip:hover {
  color: var(--cy-text);
  background: var(--cy-surface-hover);
}

.cy-filter-chip:focus-visible {
  outline: 2px solid var(--cy-action);
  outline-offset: 2px;
}

.cy-filter-chip.is-active {
  border-color: var(--cy-action);
  background: var(--cy-action);
  color: var(--cy-action-text);
}

.cy-filter-chip__count {
  margin-left: 6px;
  font-weight: 400;
  opacity: .75;
}

/* -----------------------------------------------------------------------------
 * Rating scale (ticket feedback, 1-10)
 * -----------------------------------------------------------------------------
 * The parent used an eleven-column table with the numerals as header cells and
 * the radios on a second row. This is one segmented control: the whole number is
 * the target, the checked value is the only thing on the lime fill, and the
 * worst/best labels sit at the ends.
 * -------------------------------------------------------------------------- */
.cy-rating {
  display: flex;
  align-items: center;
  gap: var(--cy-space-3);
  margin: 0 0 var(--cy-space-4);
}

.cy-rating__end {
  flex: 0 0 auto;
  font-size: var(--cy-text-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cy-text-muted);
}

.cy-rating__scale {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}.cy-rating__item {
  position: relative;
  display: flex;
  margin: 0;
}

.cy-rating__item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cy-rating__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  border: var(--cy-border-width) solid var(--cy-border-strong);
  border-radius: var(--cy-radius-sm);
  background: var(--cy-surface-2);
  font-size: var(--cy-text-caption);
  font-weight: 600;
  color: var(--cy-text-secondary);
}

.cy-rating__item:hover .cy-rating__num {
  color: var(--cy-text);
  background: var(--cy-surface-hover);
}

.cy-rating__item input:focus-visible + .cy-rating__num {
  outline: 2px solid var(--cy-action);
  outline-offset: 2px;
}

.cy-rating__item input:checked + .cy-rating__num {
  border-color: var(--cy-action);
  background: var(--cy-action);
  color: var(--cy-action-text);
}

/* Ten cells plus the worst/best labels do not fit a phone: the cells collapsed to
 * a few pixels and the numerals overlapped. Two rows of five, and the ends go -
 * a numbered 1-10 scale is self-explanatory, and the radiogroup keeps its
 * accessible name. */
@media (max-width: 575.98px) {
  .cy-rating__end { display: none; }

  .cy-rating__scale {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
}

/* -----------------------------------------------------------------------------
 * 3D Secure authentication frame (3dsecure.tpl)
 * -----------------------------------------------------------------------------
 * The card scheme's page is loaded inside the iframe and cannot be restyled, so
 * the frame is centred (a modal-like exception to the alignment rule) and given
 * enough height to hold the bank's form.
 * -------------------------------------------------------------------------- */
.cy-3ds {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cy-space-4);
}

.cy-3ds__frame {
  width: 100%;
  max-width: 560px;
  height: 500px;
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
}

/* One rated staff member in the feedback form. The rule between blocks is the
 * only separation needed; each block already carries its own heading line. */
.cy-feedback {
  margin: 0 0 var(--cy-space-5);
}

.cy-feedback + .cy-feedback {
  padding-top: var(--cy-space-5);
  border-top: var(--cy-border-width) solid var(--cy-border);
}

/* Anchors cannot be :disabled, and WHMCS marks unavailable row actions with the
 * `.disabled` class. Give that class the same treatment as the attribute. */
.cy-button.disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
 * Users with access (account-user-management.tpl)
 * -------------------------------------------------------------------------- */
.cy-user__email {
  font-weight: 600;
  color: var(--cy-text);
}

.cy-user__email + .cy-badge { margin-left: var(--cy-space-2); }

.cy-user__tfa {
  margin-left: var(--cy-space-2);
  color: var(--cy-text-muted);
}

.cy-user__lastlogin {
  white-space: nowrap;
  color: var(--cy-text-secondary);
}

/* The pending-invites table sits under the user table inside one card; the gap
 * comes from the heading, so the tables do not need margins of their own. */
.cy-user__section {
  margin: var(--cy-space-6) 0 var(--cy-space-2);
  font-size: var(--cy-text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cy-text-muted);
}

/* -----------------------------------------------------------------------------
 * Ticket thread
 * -------------------------------------------------------------------------- */
.cy-thread {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-4);
}

.cy-message {
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
  overflow: hidden;
}

.cy-message--staff {
  border-left: 3px solid var(--cy-action);
}

.cy-message__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cy-space-2);
  padding: var(--cy-space-3) var(--cy-space-5);
  border-bottom: var(--cy-border-width) solid var(--cy-border);
}

.cy-message__author {
  font-size: var(--cy-text-caption);
  font-weight: 600;
  color: var(--cy-text);
}

.cy-message__badge {
  padding: 1px 8px;
  border-radius: var(--cy-radius-pill);
  border: var(--cy-border-width) solid var(--cy-border);
  font-size: var(--cy-text-micro);
  font-weight: 600;
  color: var(--cy-text-secondary);
}

.cy-message__date {
  margin-left: auto;
  font-size: var(--cy-text-micro);
  color: var(--cy-text-muted);
  font-variant-numeric: tabular-nums;
}

.cy-message__body {
  padding: var(--cy-space-4) var(--cy-space-5);
  font-size: var(--cy-text-caption);
  line-height: 1.6;
  color: var(--cy-text);
}

.cy-message__body > :first-child { margin-top: 0; }
.cy-message__body > :last-child { margin-bottom: 0; }

.cy-message__foot {
  padding: var(--cy-space-3) var(--cy-space-5);
  border-top: var(--cy-border-width) solid var(--cy-border);
  font-size: var(--cy-text-micro);
  color: var(--cy-text-muted);
}

/* -----------------------------------------------------------------------------
 * Attachments
 * -------------------------------------------------------------------------- */
.cy-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-attachments a,
.cy-attachments span {
  display: inline-flex;
  align-items: center;
  gap: var(--cy-space-2);
  padding: 6px 12px;
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-pill);
  color: var(--cy-text-secondary);
  font-size: var(--cy-text-micro);
  text-decoration: none;
}

.cy-attachments a:hover {
  border-color: var(--cy-border-strong);
  color: var(--cy-text);
}

/* -----------------------------------------------------------------------------
 * Accepted payment marks (viewinvoice.tpl)
 * -----------------------------------------------------------------------------
 * A quiet strip of the networks the card gateway accepts, under "Payment
 * method". Non-interactive by design: these are trust marks, not links - the only
 * thing a client should click on an invoice is Pay / Print / Download. The
 * artwork is each network's own SVG (see assets/img/pay/README.md); it is never
 * redrawn or recoloured, and the marks keep their own colours in both themes.
 * -------------------------------------------------------------------------- */
.cy-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cy-space-2);
  margin: var(--cy-space-4) 0 0;
}

/* The networks design their artwork for white. A plate keeps every mark legible on
 * the dark sheet without recolouring (or redrawing) anyone's logo. */
.cy-trust__plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 8px;
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-sm);
  background: var(--cy-brand-white);
}

.cy-trust__mark {
  display: block;
  height: 16px;
  width: auto;
}

/* -----------------------------------------------------------------------------
 * Standalone invoice document
 * -----------------------------------------------------------------------------
 * viewinvoice.php renders its own document, outside the client-area shell, and
 * may be opened by a guest paying an invoice. The sheet keeps a centred page
 * column (a printable document, like a letter); everything inside it is
 * left-aligned.
 * -------------------------------------------------------------------------- */
.cy-invoice-page {
  margin: 0;
  padding: var(--cy-space-10) var(--cy-space-6);
  background: var(--cy-bg);
  color: var(--cy-text);
  font-family: var(--cy-font-sans);
}

.cy-invoice {
  width: min(100%, 940px);
  margin: 0 auto;
}

.cy-invoice__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cy-space-5);
  padding-bottom: var(--cy-space-5);
  border-bottom: var(--cy-border-width) solid var(--cy-border);
}

.cy-invoice__brand {
  display: flex;
  align-items: center;
  gap: var(--cy-space-3);
}

.cy-invoice__brand img {
  max-height: 40px;
  width: auto;
}

.cy-invoice__company {
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: var(--cy-ca-page);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cy-text);
}

.cy-invoice__title {
  margin: var(--cy-space-1) 0 0;
  font-size: var(--cy-text-caption);
  color: var(--cy-text-muted);
}

.cy-invoice__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cy-space-3);
}

/* Status, due date and the document actions share the header's right edge, so
 * the icons sit beside what they act on instead of on a row of their own. */
.cy-invoice__head-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cy-space-4);
  margin-left: auto;
}

.cy-invoice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-2);
  padding-top: var(--cy-space-2);
}

.cy-invoice__section {
  margin-top: var(--cy-space-6);
}

.cy-invoice__section-title {
  margin: 0 0 var(--cy-space-3);
  font-family: var(--cy-font-sans);
  font-size: var(--cy-text-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cy-text-muted);
}

.cy-invoice__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cy-space-3);
  margin-top: var(--cy-space-6);
  padding-top: var(--cy-space-4);
  border-top: var(--cy-border-width) solid var(--cy-border);
}

@media (max-width: 767.98px) {
  .cy-invoice-page { padding: var(--cy-space-6) var(--cy-space-4); }
}

/* -----------------------------------------------------------------------------
 * Standalone email popup (viewemail.tpl)
 * -----------------------------------------------------------------------------
 * viewemail.php opens this in its own 800x600 window. The parent paints
 * #popup-backdrop with a hard #2E363F and 15px padding, which is why the body
 * selector carries the id: it has to outrank an id rule with a token surface.
 * The message itself is authored email HTML inside the iframe's sandbox, so
 * nothing here restyles it - the frame just takes the space that is left.
 * -------------------------------------------------------------------------- */
body#popup-backdrop.cy-email-pop {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: var(--cy-space-4);
  background: var(--cy-bg);
  color: var(--cy-text);
  font: 400 var(--cy-ca-body)/1.55 var(--cy-font-sans);
}

.cy-email {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
  overflow: hidden;
}

.cy-email__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cy-space-3);
  padding: var(--cy-space-4) var(--cy-space-5);
  border-bottom: var(--cy-border-width) solid var(--cy-border);
}

.cy-email__subject {
  display: flex;
  align-items: flex-start;
  gap: var(--cy-space-3);
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: var(--cy-ca-card);
  font-weight: 600;
  line-height: 1.35;
  color: var(--cy-text);
}

.cy-email__subject i {
  font-size: 18px;
  line-height: 1.4;
  color: var(--cy-text-muted);
}

.cy-email__attachments {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-2) var(--cy-space-4);
  font-size: var(--cy-ca-caption);
  color: var(--cy-text-secondary);
}

.cy-email__attachments li {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
}

.cy-email__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--cy-space-4);
}

.cy-email__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--cy-radius-sm);
  background: var(--cy-surface-2);
}

.cy-email__foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--cy-space-3) var(--cy-space-5);
  border-top: var(--cy-border-width) solid var(--cy-border);
}

/* Email-preference rows: checkbox plus label on one line, left-aligned. */
.cy-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--cy-text-caption);
  line-height: 1.45;
  color: var(--cy-text-secondary);
  cursor: pointer;
}

.cy-check-row input[type="checkbox"],
.cy-check-row input[type="radio"] {
  margin: 3px 0 0;
  accent-color: var(--cy-action);
}

/* Bootstrap 4 positions .form-check-input absolutely and pulls it left; inside a
 * flex row that overlays the label text. Put it back in flow. */
.cy-check-row .form-check-input {
  position: static;
  float: none;
  margin: 3px 0 0;
}

/* A check row whose label carries more than one line of copy - a permission
 * title with its explanation under it (user management, permissions). */
.cy-check-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cy-check-row__title {
  font-size: var(--cy-text-caption);
  font-weight: 600;
  color: var(--cy-text);
}

/* Billing-address choices in the payment-method editor: name over the address,
 * both beside the radio. The inner spans keep the classes the page's JS reads. */
.cy-billing-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cy-billing-contact .name {
  font-size: var(--cy-text-caption);
  font-weight: 600;
  color: var(--cy-text);
}

.cy-billing-contact__lines {
  color: var(--cy-text-muted);
}
/* Action group in a card header, aligned right of the title. */
.cy-detail-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-2);
  margin-left: auto;
}
/* Domain add-on rows: glyph, title, explanation, one quiet action. The glyph
 * column is fixed so every row's text starts on the same edge. */
.cy-addon-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--cy-space-4);
  padding: var(--cy-space-5) 0;
  border-bottom: var(--cy-border-width) solid var(--cy-border);
}

.cy-addon-row:first-of-type { padding-top: 0; }
.cy-addon-row:last-of-type { padding-bottom: 0; border-bottom: 0; }

.cy-addon-row__icon {
  padding-top: 2px;
  font-size: 24px;
  line-height: 1;
  color: var(--cy-text-muted);
}

.cy-addon-row__title {
  margin: 0 0 var(--cy-space-1);
}

.cy-addon-row__text {
  margin: 0 0 var(--cy-space-3);
  font-size: var(--cy-ca-label);
  line-height: 1.5;
  color: var(--cy-text-secondary);
}

.cy-addon-row form { margin: 0; }

/* A row of quiet links - the "what would you like to do today" actions. Pills
 * would put four equal buttons under one card; these are navigation, not a
 * decision area, so they read as links. */
.cy-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-2) var(--cy-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-link-row a {
  font-size: var(--cy-ca-label);
  font-weight: 600;
  color: var(--cy-link);
  text-decoration: none;
}

.cy-link-row a:hover,
.cy-link-row a:focus-visible {
  color: var(--cy-action);
  text-decoration: none;
}

/* Affiliates: the referrals card follows the detail stack, and the link-code
 * block is admin/theme supplied HTML that twenty-one centred. */
.cy-affiliates-referrals {
  margin-top: var(--cy-space-4);
}

/* An empty state inside a card must not draw a second frame around itself. */
.cy-detail-card__body .cy-empty {
  padding: var(--cy-space-8) 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.cy-affiliates-links {
  text-align: left;
  color: var(--cy-text-secondary);
}

.cy-affiliates-links > * { margin-left: 0; margin-right: 0; }
.cy-affiliates-links a { color: var(--cy-link); }
/* The invoice sheet is a document; print it as one. */
@media print {
  .cy-invoice-page { background: #fff !important; color: #000 !important; padding: 0; }
  .cy-invoice__actions,
  .cy-invoice__footer .cy-button,
  .cy-invoice__footer a.cy-button { display: none !important; }
  .cy-detail-card,
  .cy-lineitems th,
  .cy-lineitems td { border-color: #c9c9c9 !important; }
}
/* Icon-only document actions: three quiet 40px targets in the header, each with
 * a title + aria-label so the meaning survives without visible text. */
.cy-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-pill);
  background: transparent;
  color: var(--cy-text-secondary);
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
}

.cy-icon-btn:hover,
.cy-icon-btn:focus-visible {
  background: var(--cy-surface-2);
  border-color: var(--cy-border-strong);
  color: var(--cy-text);
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
 * Knowledgebase, Announcements & Department Cards
 * -------------------------------------------------------------------------- */
.cy-kb-search {
  max-width: 720px;
}

.cy-kb-search__bar {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
  padding: 6px 6px 6px var(--cy-space-4);
  border: var(--cy-border-width) solid var(--cy-border-strong);
  border-radius: var(--cy-radius-pill);
  background: var(--cy-field);
}

.cy-kb-search__bar:focus-within {
  border-color: var(--cy-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cy-focus) 30%, transparent);
}

.cy-kb-search__icon {
  font-size: 18px;
  color: var(--cy-text-muted);
  flex-shrink: 0;
}

body #main-body .cy-kb-search__input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  height: 40px;
  padding: 0 var(--cy-space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cy-text);
  font-size: var(--cy-ca-body);
}

body #main-body .cy-kb-search__input:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

.cy-kb-search__submit {
  min-height: 40px;
  padding: 0 var(--cy-space-5);
  flex-shrink: 0;
}

.cy-kb-section__head {
  margin-bottom: var(--cy-space-3);
}

.cy-kb-section__title {
  margin: 0;
}

.cy-kb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--cy-space-4);
}

@media (max-width: 767.98px) {
  .cy-kb-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cy-kb-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
  overflow: hidden;
  transition: border-color var(--cy-duration-fast) var(--cy-ease-out),
    background-color var(--cy-duration-fast) var(--cy-ease-out);
}

.cy-kb-card:hover {
  border-color: var(--cy-border-strong);
  background: var(--cy-surface-2);
}

.cy-kb-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
  flex: 1;
  height: 100%;
  padding: var(--cy-space-5);
  border-radius: inherit;
  color: var(--cy-text);
  text-decoration: none;
}

.cy-kb-card__link:hover,
.cy-kb-card__link:focus-visible {
  color: var(--cy-text);
  text-decoration: none;
}

.cy-kb-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cy-space-3);
}

.cy-kb-card__name {
  display: flex;
  align-items: flex-start;
  gap: var(--cy-space-2);
  min-width: 0;
  flex: 1;
  font-family: var(--cy-font-display);
  font-size: var(--cy-ca-card);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cy-text);
  overflow-wrap: break-word;
}

.cy-kb-card__name i {
  margin-top: 2px;
  font-size: 18px;
  color: var(--cy-text-muted);
  flex-shrink: 0;
}

.cy-kb-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--cy-space-2);
  flex-shrink: 0;
}

.cy-kb-card__desc {
  margin: 0;
  font-size: var(--cy-ca-label);
  line-height: 1.55;
  color: var(--cy-text-secondary);
}

.cy-kb-list {
  display: flex;
  flex-direction: column;
}

.cy-kb-item {
  display: flex;
  align-items: flex-start;
  gap: var(--cy-space-4);
  padding: var(--cy-space-4) var(--cy-space-5);
  border-bottom: var(--cy-border-width) solid var(--cy-border);
  color: var(--cy-text);
  text-decoration: none;
  transition: background-color var(--cy-duration-fast) var(--cy-ease-out);
}

.cy-kb-item:last-child {
  border-bottom: 0;
}

.cy-kb-item:hover,
.cy-kb-item:focus-visible {
  background: var(--cy-surface-2);
  color: var(--cy-text);
  text-decoration: none;
}

.cy-kb-item__icon {
  padding-top: 2px;
  font-size: 18px;
  color: var(--cy-text-muted);
  flex-shrink: 0;
}

.cy-kb-item__body {
  flex: 1;
  min-width: 0;
}

.cy-kb-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cy-space-2);
  margin-bottom: 4px;
}

.cy-kb-item__title {
  font-size: var(--cy-ca-body);
  font-weight: 600;
  color: var(--cy-text);
}

.cy-kb-item__excerpt {
  margin: 0;
  font-size: var(--cy-ca-label);
  line-height: 1.5;
  color: var(--cy-text-secondary);
}

.cy-kb-item__arrow {
  margin-left: auto;
  align-self: center;
  font-size: 16px;
  color: var(--cy-text-muted);
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
 * Authored content (.cy-prose)
 * -----------------------------------------------------------------------------
 * KB articles, announcements and module descriptions are written in WHMCS's
 * editor. Pasted content arrives carrying the light-theme inline styles of
 * whatever tool it came from: a #0f172a heading on this canvas, a #f8fafc panel
 * holding text that inherits light, a 13px monospace block. Content must not
 * depend on the colours an author happened to copy, so colour and background are
 * normalised to tokens here and structure is carried by size, weight, borders
 * and surfaces instead.
 *
 * `!important` is required and is the point: an inline style wins over a
 * stylesheet rule, so this is the only way to reach markup we do not author.
 * The selectors are text-level only - a form control inside authored content
 * keeps its own surface.
 * -------------------------------------------------------------------------- */
.cy-prose {
  font-size: var(--cy-ca-body);
  line-height: 1.65;
  color: var(--cy-text-secondary);
}

.cy-prose > :first-child { margin-top: 0; }
.cy-prose > :last-child { margin-bottom: 0; }

.cy-prose h1, .cy-prose h2, .cy-prose h3, .cy-prose h4,
.cy-prose h5, .cy-prose h6,
.cy-prose p, .cy-prose li, .cy-prose span, .cy-prose div,
.cy-prose strong, .cy-prose em, .cy-prose b, .cy-prose i,
.cy-prose small, .cy-prose mark, .cy-prose blockquote,
.cy-prose th, .cy-prose td {
  color: inherit !important;
  background-color: transparent !important;
}

/* Headings keep hierarchy through the display face, not through colour. */
.cy-prose h1, .cy-prose h2, .cy-prose h3,
.cy-prose h4, .cy-prose h5, .cy-prose h6 {
  margin: var(--cy-space-6) 0 var(--cy-space-3);
  font-family: var(--cy-font-display);
  font-size: var(--cy-ca-card) !important;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cy-text) !important;
}

.cy-prose h1, .cy-prose h2 { font-size: var(--cy-ca-section) !important; }

/* Size is structure, not styling. Pasted content arrives with its own inline
 * sizes - a network-issue update line at 17px, a 13px monospace panel - and each
 * one is an off-scale value inside #main-body. Text-level elements inherit from
 * .cy-prose (or from their heading); the blocks the theme sizes deliberately
 * above and below (headings, pre/code, the monospace panel) carry their own
 * !important and outrank this. */
.cy-prose p, .cy-prose li, .cy-prose span, .cy-prose div,
.cy-prose strong, .cy-prose em, .cy-prose b, .cy-prose i,
.cy-prose mark, .cy-prose blockquote, .cy-prose th, .cy-prose td {
  font-size: inherit !important;
}

.cy-prose strong, .cy-prose b {
  font-weight: 600;
  color: var(--cy-text) !important;
}

.cy-prose a,
.cy-prose a * {
  color: var(--cy-link) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cy-prose a:hover,
.cy-prose a:hover * { color: var(--cy-action) !important; }

/* Code, including pasted monospace panels, becomes a real block on our surface. */
.cy-prose pre,
.cy-prose code,
.cy-prose div[style*="monospace" i] {
  padding: var(--cy-space-4);
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-md);
  background-color: var(--cy-surface-2) !important;
  color: var(--cy-text) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: var(--cy-ca-label) !important;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cy-prose code:not(pre code) { padding: 2px 6px; }

/* Pasted callout panels keep their left rule, in our border colour. */
.cy-prose [style*="border-left"] {
  padding: var(--cy-space-4) !important;
  border-left-width: var(--cy-border-width-emphasis) !important;
  border-left-color: var(--cy-border-strong) !important;
  border-radius: var(--cy-radius-md);
  background-color: var(--cy-surface-2) !important;
}

.cy-prose ul, .cy-prose ol {
  margin: 0 0 var(--cy-space-4);
  padding-left: 1.25em;
}

.cy-prose li { margin: 0 0 var(--cy-space-2); }

.cy-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--cy-radius-md);
}

.cy-prose hr {
  margin: var(--cy-space-6) 0;
  border: 0;
  border-top: var(--cy-border-width) solid var(--cy-border);
}

.cy-prose table {
  width: 100%;
  margin: 0 0 var(--cy-space-4);
  border-collapse: collapse;
}

.cy-prose th,
.cy-prose td {
  padding: var(--cy-space-2) var(--cy-space-3);
  border-bottom: var(--cy-border-width) solid var(--cy-border);
  text-align: left;
}


/* -----------------------------------------------------------------------------
 * Policy articles (Gemini-authored)
 * -----------------------------------------------------------------------------
 * The pasted HTML carries a full inline design system: dark-only surfaces,
 * Plus Jakarta metrics, JetBrains labels, square panels. The generic .cy-prose
 * normaliser strips all of it to make arbitrary pasted content legible, which
 * leaves these policies structurally correct but visually flat. Restore the
 * authored layout on tokens instead: card surfaces and radii, label sizing,
 * three-up metric cards, flex step rows, and a scrollable data table.
 * -------------------------------------------------------------------------- */
.cy-prose .cy-kb-article {
  background: transparent !important;
  color: var(--cy-text-secondary) !important;
  font-family: var(--cy-font-sans) !important;
  font-size: var(--cy-text-compact) !important;
  line-height: 1.7 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.cy-kb-article p,
.cy-kb-article li {
  color: var(--cy-text-secondary) !important;
  font-size: var(--cy-text-compact) !important;
  line-height: 1.7 !important;
  margin: 0 0 16px !important;
}
.cy-kb-article p:last-child,
.cy-kb-article li:last-child { margin-bottom: 0 !important; }
.cy-kb-article h2,
.cy-kb-article h3,
.cy-kb-article h4 {
  margin: 32px 0 12px !important;
  color: var(--cy-text) !important;
  font-family: var(--cy-font-display) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}
.cy-kb-article h2 { font-size: var(--cy-ca-section) !important; }
.cy-kb-article h3 { font-size: var(--cy-ca-card) !important; }
.cy-kb-article h4 { font-size: var(--cy-text-caption) !important; }
.cy-kb-article h2:first-child,
.cy-kb-article h3:first-child,
.cy-kb-article h4:first-child { margin-top: 0 !important; }
.cy-kb-article h2 > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin-right: 10px !important;
  border: var(--cy-border-width) solid var(--cy-border) !important;
  border-radius: var(--cy-radius-sm) !important;
  background: var(--cy-surface-2) !important;
  color: var(--cy-focus) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: var(--cy-text-micro) !important;
  vertical-align: middle !important;
}
.cy-kb-article strong { color: var(--cy-text) !important; font-weight: 600 !important; }
.cy-kb-article a { color: var(--cy-link) !important; }
.cy-kb-article a:not([style*="background"]) { color: var(--cy-link) !important; }
.cy-kb-article a[style*="background"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px;
  margin-top: 4px;
  border-radius: var(--cy-radius-pill) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
.cy-kb-article a[style*="background:transparent"] {
  color: var(--cy-text) !important;
  border-color: var(--cy-border-strong) !important;
}
.cy-kb-article ul,
.cy-kb-article ol { margin: 0 0 16px !important; padding-left: 22px !important; }
.cy-kb-article li { margin: 6px 0 !important; }
.cy-kb-article hr { border-color: var(--cy-border) !important; }

.cy-kb-article div[style*="background"] {
  background: var(--cy-surface-1) !important;
  border-color: var(--cy-border) !important;
}
.cy-kb-article div[style*="background"]:not([style*="width:32px"]):not([style*="height:32px"]) {
  border: var(--cy-border-width) solid var(--cy-border) !important;
  border-radius: var(--cy-radius-lg) !important;
  margin: 10px 0 !important;
}
.cy-kb-article div[style*="background"] p {
  margin-bottom: 0 !important;
  font-size: var(--cy-text-caption) !important;
  line-height: 1.55 !important;
}
.cy-kb-article div[style*="background"] h3,
.cy-kb-article div[style*="background"] h4 {
  margin: 0 0 6px !important;
}
.cy-kb-article div[style*="background"] h4 { font-size: var(--cy-text-compact) !important; }
.cy-kb-article div[style*="display:grid"] > div[style*="background"],
.cy-kb-article div[style*="display:flex"] > div[style*="background"] { margin: 0 !important; }
.cy-kb-article div[style*="border-left:3px solid #C43D4D"] {
  background: var(--cy-danger-bg) !important;
  border: var(--cy-border-width) solid var(--cy-border) !important;
  border-left: 3px solid var(--cy-danger) !important;
}
.cy-kb-article div[style*="border-left:3px solid #C43D4D"] h4 { color: var(--cy-danger-text) !important; }
.cy-kb-article div[style*="border-left:3px solid #AFE139"] {
  background: var(--cy-surface-1) !important;
  border: var(--cy-border-width) solid var(--cy-border) !important;
  border-left: 3px solid var(--cy-action) !important;
}
.cy-kb-article div[style*="border:1px solid rgba(175,225,57"] { border-color: var(--cy-border-lime) !important; }
.cy-kb-article div[style*="width:32px"][style*="height:32px"] {
  background: var(--cy-surface-2) !important;
  border: var(--cy-border-width) solid var(--cy-border) !important;
  border-radius: 50% !important;
  color: var(--cy-focus) !important;
}
.cy-kb-article [style*="color:#afe139"] { color: var(--cy-focus) !important; }
.cy-kb-article div[style*="text-transform:uppercase"] { color: var(--cy-text-muted) !important; }
.cy-kb-article div[style*="font-size:32px"] { color: var(--cy-text) !important; }

.cy-kb-article div[style*="background"]:has(table) {
  overflow-x: auto !important;
  padding: 0 !important;
}
.cy-kb-article table {
  width: 100% !important;
  min-width: 620px;
  border-collapse: collapse !important;
  font-family: var(--cy-font-sans) !important;
  font-size: var(--cy-text-caption) !important;
}
.cy-kb-article th {
  padding: 12px 14px !important;
  border-bottom: var(--cy-border-width) solid var(--cy-border) !important;
  background: var(--cy-surface-2) !important;
  color: var(--cy-text-muted) !important;
  font-family: var(--cy-font-sans) !important;
  font-size: var(--cy-text-micro) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-align: left !important;
  text-transform: uppercase !important;
}
.cy-kb-article td {
  padding: 14px !important;
  border-bottom: var(--cy-border-width) solid var(--cy-border) !important;
  color: var(--cy-text-secondary) !important;
  font-family: var(--cy-font-sans) !important;
  font-size: var(--cy-text-caption) !important;
}
.cy-kb-article td:first-child { color: var(--cy-text) !important; font-weight: 600 !important; }
.cy-kb-article tr:last-child td { border-bottom: 0 !important; }

/* The prose normaliser treats every monospace div as a code panel. In these
 * policy articles the same face is used for tiny labels, step numbers and metric
 * keys, so reset the code-panel chrome before re-applying label sizing. */
.cy-kb-article div[style*="monospace"] {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cy-text-muted) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: var(--cy-text-micro) !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

/* Its blanket background reset also flattens the chips; put the token tints
 * back on the spans that were authored as pills. */
.cy-kb-article span[style*="background"] {
  background: var(--cy-surface-2) !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text-secondary) !important;
}
.cy-kb-article span[style*="background:rgba(175,225,57"] {
  background: color-mix(in srgb, var(--cy-action) 12%, transparent) !important;
  border-color: var(--cy-border-lime) !important;
  color: var(--cy-focus) !important;
}

.cy-kb-article div[style*="background"] div { font-size: var(--cy-text-caption) !important; }
.cy-kb-article div[style*="background"] div[style*="monospace"] { font-size: var(--cy-text-micro) !important; }
.cy-kb-article div[style*="font-size:32px"] {
  color: var(--cy-text) !important;
  font-size: var(--cy-ca-page) !important;
  line-height: 1.15 !important;
}
.cy-kb-article div[style*="text-transform:uppercase"] {
  color: var(--cy-text-muted) !important;
  font-size: var(--cy-text-micro) !important;
}
.cy-kb-article div[style*="width:32px"][style*="height:32px"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 32px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--cy-surface-2) !important;
  border: var(--cy-border-width) solid var(--cy-border) !important;
  color: var(--cy-focus) !important;
  font-size: var(--cy-text-caption) !important;
  line-height: 1 !important;
}
.cy-kb-article h2 > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin-right: 10px !important;
  border: var(--cy-border-width) solid var(--cy-border) !important;
  border-radius: var(--cy-radius-sm) !important;
  background: var(--cy-surface-2) !important;
  color: var(--cy-focus) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: var(--cy-text-micro) !important;
  vertical-align: middle !important;
}
.cy-kb-article span[style*="font-size:13px"],
.cy-kb-article span[style*="font-size:12px"] { font-size: var(--cy-text-micro) !important; }
.cy-kb-article span[style*="font-size:15px"],
.cy-kb-article span[style*="font-size:16px"] { font-size: var(--cy-text-caption) !important; }
.cy-kb-article strong[style*="font-size:15px"],
.cy-kb-article strong[style*="font-size:16px"] { font-size: var(--cy-text-caption) !important; }
.cy-kb-article a[style*="background:#AFE139"],
.cy-kb-article a[style*="background: #AFE139"] { color: var(--cy-action-text) !important; }

/* Three-up metric strip at the top of the policy articles. The pasted HTML
 * lost the wrapper's grid, leaving three full-width cards. */
.cy-kb-article div[style*="margin-bottom:36px"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cy-space-3);
}
.cy-kb-article div[style*="margin-bottom:36px"] > div { margin: 0 !important; }

/* Numbered warranty steps: make each number a flex sibling of its sentence. */
.cy-kb-article div:has(> div[style*="width:32px"]):not([style*="width:32px"]) {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--cy-space-3) !important;
  margin-bottom: 12px !important;
}
.cy-kb-article strong::after { content: " "; }
.cy-kb-article div[style*="background"] span[style*="font-size:15px"],
.cy-kb-article div[style*="background"] div[style*="font-size:15px"] {
  font-size: var(--cy-text-caption) !important;
}
.cy-kb-article div[style*="monospace"] { font-size: var(--cy-text-micro) !important; }

@media (max-width: 767.98px) {
  .cy-kb-article div[style*="margin-bottom:36px"] { grid-template-columns: minmax(0, 1fr); }
}

.cy-kb-tags {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
  margin-top: var(--cy-space-4);
  padding-top: var(--cy-space-3);
  border-top: var(--cy-border-width) solid var(--cy-border);
  font-size: var(--cy-ca-caption);
  color: var(--cy-text-muted);
}

.cy-kb-vote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cy-space-2);
  margin: 0;
}

/* -----------------------------------------------------------------------------
 * Ticket attachment uploader & Authentication cards
 * -------------------------------------------------------------------------- */
.cy-attachments-upload {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-1);
}

.cy-attachments-upload .attachment-group.has-file .custom-file-label {
  color: var(--cy-text);
}

.cy-auth {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-4);
}

.cy-auth__fields {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-4);
}

.cy-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cy-space-2);
}

.cy-field__head label {
  margin: 0;
}

.cy-field__link {
  font-size: var(--cy-ca-caption);
  font-weight: 600;
  color: var(--cy-link);
  text-decoration: none;
}

.cy-captcha-wrap {
  margin: var(--cy-space-2) 0;
  text-align: left;
}

.cy-captcha-wrap .text-center {
  text-align: left !important;
}

/* -----------------------------------------------------------------------------
 * Studio Booking Engine (/clientarea/book-now & creative_yadley_booking addon)
 * Exact visual and functional match to the React AirbnbBookingEngine component.
 * -------------------------------------------------------------------------- */
.cy-be-engine {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-6);
}

/* Top Utility Bar */
.cy-be-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cy-space-3);
}

.cy-be-topbar__status {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
  font-size: 13px;
}

.cy-be-topbar__brand {
  font-family: var(--cy-font-mono);
  color: var(--cy-text-muted);
}

.cy-be-topbar__sep {
  color: var(--cy-border-strong);
}

.cy-be-topbar__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cy-success-text);
}

.cy-be-topbar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cy-success-text);
  box-shadow: 0 0 8px var(--cy-success-text);
}

.cy-be-topbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cy-be-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--cy-radius-pill);
  border: var(--cy-border-width) solid var(--cy-border-strong);
  background: var(--cy-surface-1);
  color: var(--cy-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--cy-duration-fast) var(--cy-ease-out),
    background-color var(--cy-duration-fast) var(--cy-ease-out);
}

.cy-be-pill-btn:hover,
.cy-be-pill-btn:focus-visible {
  border-color: var(--cy-action);
  background: var(--cy-surface-2);
  color: var(--cy-text);
  text-decoration: none;
}

.cy-be-pill-btn i {
  font-size: 15px;
  color: var(--cy-action);
}

.cy-be-mono {
  font-family: var(--cy-font-mono);
}

/* Warm Personal Welcome Hero Card */
.cy-be-hero {
  padding: var(--cy-space-8) var(--cy-space-10);
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
  box-shadow: var(--cy-shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-6);
}

@media (max-width: 767.98px) {
  .cy-be-hero {
    padding: var(--cy-space-6);
  }
}

.cy-be-hero__content {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.cy-be-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 15px;
  border-radius: var(--cy-radius-pill);
  border: var(--cy-border-width) solid var(--cy-border-strong);
  background: var(--cy-surface-2);
  color: var(--cy-text);
  font-size: 14px;
  font-weight: 500;
}

.cy-be-eyebrow-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cy-text);
  box-shadow: 0 0 8px var(--cy-text);
}

body #main-body .cy-be-hero__title {
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cy-text);
}

.cy-be-hero__lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--cy-text-secondary);
}

/* Category Filter Pills Bar */
.cy-be-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: var(--cy-space-4);
  border-top: var(--cy-border-width) solid var(--cy-border);
}

.cy-be-cat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--cy-radius-pill);
  border: var(--cy-border-width) solid var(--cy-border);
  background: var(--cy-surface-2);
  color: var(--cy-text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--cy-duration-fast) var(--cy-ease-out);
}

.cy-be-cat-btn:hover {
  border-color: var(--cy-border-strong);
  color: var(--cy-text);
}

.cy-be-cat-btn.is-active {
  background: var(--cy-text);
  color: var(--cy-bg);
  border-color: var(--cy-text);
  font-weight: 600;
}

/* 3-Column Bookable Service Cards Grid */
.cy-be-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

@media (max-width: 1199.98px) {
  .cy-be-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .cy-be-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cy-be-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
  box-shadow: var(--cy-shadow-1);
  overflow: hidden;
  cursor: pointer;
  transition: transform 200ms var(--cy-ease-out),
    border-color 200ms var(--cy-ease-out),
    box-shadow 200ms var(--cy-ease-out);
}

.cy-be-card:hover {
  border-color: var(--cy-border-strong);
  transform: translateY(-2px);
}

.cy-be-card__media {
  position: relative;
  height: 224px;
  width: 100%;
  overflow: hidden;
  background: var(--cy-bg-deep);
}

.cy-be-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--cy-ease-out);
}

.cy-be-card:hover .cy-be-card__img {
  transform: scale(1.05);
}

.cy-be-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 100%);
}

.cy-be-card__top-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cy-be-card__cat-pill {
  padding: 4px 14px;
  border-radius: var(--cy-radius-pill);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.cy-be-card__top-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cy-be-card__turnaround-pill {
  padding: 4px 14px;
  border-radius: var(--cy-radius-pill);
  background: rgba(255, 255, 255, 0.95);
  color: #0B0D0E;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.cy-be-card__share-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 150ms ease;
}

.cy-be-card__share-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: var(--cy-action);
  color: var(--cy-action);
}

.cy-be-card__partner {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cy-be-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 1px solid rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

.cy-be-card__partner-name {
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cy-be-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body #main-body .cy-be-card__title {
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cy-text);
}

.cy-be-card__headline {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cy-text-secondary);
}

.cy-be-card__foot {
  padding: 16px 24px 20px;
  border-top: var(--cy-border-width) solid var(--cy-border);
  background: color-mix(in srgb, var(--cy-surface-2) 45%, transparent);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cy-be-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.cy-be-card__price-tier {
  font-family: var(--cy-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cy-text-muted);
  margin-bottom: 2px;
}

.cy-be-card__price-val {
  font-family: var(--cy-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--cy-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.cy-be-card__terms {
  text-align: right;
  flex-shrink: 0;
}

.cy-be-card__deposit-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cy-text);
  line-height: 1.3;
}

.cy-be-card__hold-label {
  font-size: 11px;
  color: var(--cy-text-muted);
  margin-top: 2px;
}

.cy-be-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border-radius: var(--cy-radius-pill);
  background: var(--cy-action);
  color: var(--cy-action-text);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: 0 0 16px var(--cy-action-glow);
  cursor: pointer;
  transition: all 180ms var(--cy-ease-out);
}

.cy-be-card:hover .cy-be-card__cta {
  background: var(--cy-action-hover);
  box-shadow: 0 0 24px var(--cy-action-glow);
}

/* =============================================================================
 * VIEW MODE 2: AIRBNB LISTING VIEW (7-Col Center Console + 5-Col Sticky Sidebar)
 * ========================================================================== */
.cy-be-listing-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cy-be-listing-nav__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cy-be-listing-nav__switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cy-be-switch-pill {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--cy-radius-pill);
  border: var(--cy-border-width) solid var(--cy-border);
  background: var(--cy-surface-1);
  color: var(--cy-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease;
}

.cy-be-switch-pill:hover {
  border-color: var(--cy-action);
  color: var(--cy-text);
}

.cy-be-switch-pill.is-active {
  background: var(--cy-text);
  color: var(--cy-bg);
  border-color: var(--cy-text);
  font-weight: 600;
}

.cy-be-listing-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 1023.98px) {
  .cy-be-listing-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cy-be-console {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cy-be-hero-card {
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
  overflow: hidden;
  box-shadow: var(--cy-shadow-1);
}

.cy-be-hero-card__banner {
  position: relative;
  height: 280px;
  width: 100%;
  background: var(--cy-bg-deep);
}

.cy-be-hero-card__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cy-be-hero-card__overlay {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

body #main-body .cy-be-hero-card__title {
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
}

.cy-be-hero-card__content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cy-be-hero-card__desc {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--cy-text-secondary);
}

.cy-be-host-box {
  padding: 16px;
  border-radius: 14px;
  background: var(--cy-surface-2);
  border: var(--cy-border-width) solid var(--cy-border);
  display: flex;
  align-items: center;
  gap: 16px;
}

.cy-be-host-box__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.cy-be-host-box__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--cy-text);
}

.cy-be-host-box__role {
  font-weight: 400;
  color: var(--cy-text-muted);
}

.cy-be-host-box__bio {
  font-size: 13px;
  color: var(--cy-text-muted);
  margin-top: 2px;
}

/* Apple-Style Accordions Card */
.cy-be-accordions {
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
  overflow: hidden;
  box-shadow: var(--cy-shadow-1);
}

.cy-be-acc-item {
  border-bottom: var(--cy-border-width) solid var(--cy-border);
}

.cy-be-acc-item:last-child {
  border-bottom: 0;
}

.cy-be-acc-trigger {
  width: 100%;
  padding: 24px;
  background: transparent;
  border: 0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  color: var(--cy-text);
  transition: background-color 150ms ease;
}

.cy-be-acc-trigger:hover {
  background: color-mix(in srgb, var(--cy-surface-2) 50%, transparent);
}

.cy-be-acc-trigger__title {
  font-family: var(--cy-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--cy-text);
}

.cy-be-acc-trigger__sub {
  font-size: 14px;
  color: var(--cy-text-muted);
  margin-top: 2px;
}

.cy-be-acc-trigger__icon {
  font-size: 18px;
  color: var(--cy-text-muted);
  transition: transform 200ms ease;
}

.cy-be-acc-item.is-open .cy-be-acc-trigger__icon {
  transform: rotate(180deg);
}

.cy-be-acc-body {
  display: none;
  padding: 0 24px 24px;
}

.cy-be-acc-item.is-open .cy-be-acc-body {
  display: block;
}

.cy-be-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 639.98px) {
  .cy-be-amenities-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cy-be-amenity-chip {
  padding: 14px;
  border-radius: 12px;
  background: var(--cy-surface-2);
  border: var(--cy-border-width) solid var(--cy-border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cy-text);
}

.cy-be-amenity-chip i {
  font-size: 16px;
  color: var(--cy-action);
  flex-shrink: 0;
}

.cy-be-extras-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cy-be-extra-btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: var(--cy-border-width) solid var(--cy-border);
  background: var(--cy-surface-2);
  color: var(--cy-text-secondary);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 150ms ease;
}

.cy-be-extra-btn:hover {
  border-color: var(--cy-action);
  color: var(--cy-text);
}

.cy-be-extra-btn.is-selected {
  background: var(--cy-text);
  color: var(--cy-bg);
  border-color: var(--cy-text);
  font-weight: 600;
}

.cy-be-extra-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-grow: 1;
}

.cy-be-extra-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
  transition: filter 0.18s ease;
}

.cy-be-extra-icon-img.is-monochrome {
  filter: brightness(0) invert(1);
}

.cy-be-extra-btn.is-selected .cy-be-extra-icon-img.is-monochrome {
  filter: brightness(0);
}

.cy-be-extra-icon-ph {
  font-size: 19px;
  color: #FFFFFF;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  transition: color 0.18s ease;
}

.cy-be-extra-btn.is-selected .cy-be-extra-icon-ph {
  color: var(--cy-bg);
}

.cy-be-policy-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cy-be-policy-box {
  padding: 16px;
  border-radius: 12px;
  background: var(--cy-surface-2);
  border: var(--cy-border-width) solid var(--cy-border);
  font-size: 14px;
  line-height: 1.55;
  color: var(--cy-text-secondary);
}

.cy-be-policy-box strong {
  color: var(--cy-text);
}

/* ==========================================================================
   Creative Yadley Studio Process & Timeline Flow (Vertical Stacked Cards)
   ========================================================================== */
.cy-timeline-flow {
  position: relative;
  width: 100%;
  padding: 8px 0 4px;
}

.cy-vstep-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 36px;
}

/* Continuous vertical connector line running from top to bottom */
.cy-vstep-stack::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: 32px;
  width: 3px;
  background: linear-gradient(180deg, #FF6B00 0%, #F97316 40%, #FB923C 75%, #F59E0B 100%);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.55);
  z-index: 1;
}

.cy-vstep-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--cy-surface-1, #121519);
  border: 1px solid var(--cy-border, rgba(255, 255, 255, 0.08));
  border-left: 3px solid #F97316;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease;
}

/* Connector bridge linking the vertical line into each card */
.cy-vstep-card::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 38px;
  width: 22px;
  height: 2px;
  background: #F97316;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
  z-index: 1;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Milestone circular node anchored directly on the vertical connector line */
.cy-vstep-card::after {
  content: '';
  position: absolute;
  left: -28px;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cy-bg, #0B0D0E);
  border: 2.5px solid #F97316;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.8);
  z-index: 3;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cy-vstep-card:hover {
  transform: translateX(4px);
  border-color: rgba(249, 115, 22, 0.4);
  border-left-color: #FB923C;
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(249, 115, 22, 0.2);
}

.cy-vstep-card:hover::before {
  background: #FB923C;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.7);
}

.cy-vstep-card:hover::after {
  transform: scale(1.25);
  background: #F97316;
  box-shadow: 0 0 14px rgba(249, 115, 22, 1);
}

.cy-vstep-card__leading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cy-vstep-card__icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(175, 225, 57, 0.09);
  border: 1px solid rgba(175, 225, 57, 0.24);
  color: #AFE139;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.cy-vstep-card:hover .cy-vstep-card__icon-box {
  transform: scale(1.06);
  background: rgba(175, 225, 57, 0.16);
  border-color: rgba(175, 225, 57, 0.45);
}

.cy-vstep-card__num {
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--cy-text-muted);
  letter-spacing: 0.06em;
  transition: color 0.2s ease;
}

.cy-vstep-card:hover .cy-vstep-card__num {
  color: #AFE139;
}

.cy-vstep-card__body {
  flex-grow: 1;
  min-width: 0;
}

.cy-vstep-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cy-vstep-card__titles {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cy-vstep-card__pill {
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #AFE139;
  background: rgba(175, 225, 57, 0.09);
  border: 1px solid rgba(175, 225, 57, 0.22);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}

.cy-vstep-card__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--cy-text, #FFFFFF);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.01em;
}

.cy-vstep-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--cy-text-secondary, #CBD5E1);
  background: var(--cy-surface-2, rgba(255, 255, 255, 0.035));
  border: 1px solid var(--cy-border, rgba(255, 255, 255, 0.08));
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
}

.cy-vstep-card__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #AFE139;
  box-shadow: 0 0 6px rgba(175, 225, 57, 0.85);
  flex-shrink: 0;
}

.cy-vstep-card__desc {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13.5px;
  color: var(--cy-text-muted);
  line-height: 1.6;
  margin: 0;
}

[data-cy-theme="light"] .cy-vstep-card {
  background: var(--cy-surface-1, #FFFFFF);
  border-color: var(--cy-border, #D2D6D0);
  box-shadow: 0 3px 16px rgba(17, 18, 20, 0.06);
}

[data-cy-theme="light"] .cy-vstep-card::after {
  background: var(--cy-bg, #F4F5F2);
}

[data-cy-theme="light"] .cy-vstep-card__title {
  color: var(--cy-text, #111214);
}

[data-cy-theme="light"] .cy-vstep-card__tag {
  color: var(--cy-text-secondary, #434745);
  background: var(--cy-surface-2, #ECEEE9);
  border-color: var(--cy-border, #D2D6D0);
}

[data-cy-theme="light"] .cy-vstep-card__desc {
  color: var(--cy-text-muted, #5E6463);
}

[data-cy-theme="light"] .cy-airbnb-box {
  background: var(--cy-surface-1, #FFFFFF);
  border-color: var(--cy-border, #D2D6D0);
}

[data-cy-theme="light"] .cy-airbnb-box__dates {
  border-bottom-color: var(--cy-border, #D2D6D0);
}

[data-cy-theme="light"] .cy-airbnb-box__dates:hover {
  background: var(--cy-surface-2, #ECEEE9);
}

[data-cy-theme="light"] .cy-airbnb-box__col--start {
  border-right-color: var(--cy-border, #D2D6D0);
}

[data-cy-theme="light"] .cy-airbnb-box__val {
  color: var(--cy-text, #111214);
}

[data-cy-theme="light"] .cy-airbnb-box__select {
  color: var(--cy-text, #111214);
}

[data-cy-theme="light"] .cy-airbnb-box__select option {
  background: var(--cy-surface-1, #FFFFFF);
  color: var(--cy-text, #111214);
}

[data-cy-theme="light"] .cy-be-extra-icon-img.is-monochrome {
  filter: brightness(0);
}

[data-cy-theme="light"] .cy-be-extra-btn.is-selected .cy-be-extra-icon-img.is-monochrome {
  filter: brightness(0) invert(1);
}

@media (max-width: 640px) {
  .cy-vstep-stack {
    padding-left: 26px;
    gap: 16px;
  }
  .cy-vstep-stack::before {
    left: 8px;
  }
  .cy-vstep-card {
    flex-direction: column;
    gap: 14px;
    padding: 16px 16px;
  }
  .cy-vstep-card::before {
    left: -18px;
    top: 28px;
    width: 18px;
  }
  .cy-vstep-card::after {
    left: -24px;
    top: 23px;
  }
  .cy-vstep-card__leading {
    flex-direction: row;
    gap: 10px;
    align-items: center;
  }
  .cy-vstep-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Sticky Right Booking Sidebar & Interactive Calendar */
.cy-be-sidebar {
  position: sticky;
  top: 24px;
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
  padding: 22px;
  box-shadow: var(--cy-shadow-1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cy-be-sidebar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: var(--cy-border-width) solid var(--cy-border);
}

.cy-be-sidebar__price {
  font-family: var(--cy-font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--cy-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cy-be-sidebar__currency {
  font-family: var(--cy-font-mono);
  font-size: 13px;
  color: var(--cy-text-muted);
  margin-left: 8px;
}

.cy-be-sidebar__subprice {
  font-size: 13px;
  font-weight: 500;
  color: var(--cy-text-muted);
  margin-top: 6px;
}

/* Interactive Calendar Widget */
.cy-be-cal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cy-be-cal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cy-be-cal__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cy-text);
}

.cy-be-cal__label i {
  color: var(--cy-action);
  font-size: 16px;
}

.cy-be-cal__picked {
  font-family: var(--cy-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--cy-success-text);
}

.cy-be-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--cy-surface-2);
  border: var(--cy-border-width) solid var(--cy-border);
}

.cy-be-cal__nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--cy-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cy-be-cal__nav-btn:hover:not(:disabled) {
  background: var(--cy-surface-3);
  color: var(--cy-text);
}

.cy-be-cal__nav-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.cy-be-cal__month {
  font-family: var(--cy-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--cy-text);
}

.cy-be-cal__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--cy-font-mono);
  font-size: 11px;
  color: var(--cy-text-muted);
  padding: 0 4px;
}

.cy-be-cal__legend-items {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cy-be-cal__legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.cy-be-cal__legend-dot--avail {
  background: var(--cy-action);
}

.cy-be-cal__legend-dot--unavail {
  background: var(--cy-text-muted);
  opacity: 0.45;
}

.cy-be-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
  font-family: var(--cy-font-mono);
  font-size: 10px;
  color: var(--cy-text-muted);
  padding-bottom: 4px;
  border-bottom: var(--cy-border-width) solid var(--cy-border);
}

.cy-be-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cy-be-cal__pad {
  height: 40px;
}

.cy-be-cal__day {
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(175, 225, 57, 0.35);
  background: rgba(175, 225, 57, 0.13);
  color: var(--cy-text);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 140ms ease;
}

.cy-be-cal__day:hover:not(:disabled) {
  background: rgba(175, 225, 57, 0.28);
  border-color: var(--cy-action);
}

.cy-be-cal__day.is-today {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 800;
}

.cy-be-cal__day.is-selected {
  background: var(--cy-action) !important;
  border-color: var(--cy-action) !important;
  color: var(--cy-action-text) !important;
  font-weight: 700;
  box-shadow: 0 0 16px var(--cy-action-glow);
  cursor: pointer;
}

.cy-be-cal__day:disabled {
  background: color-mix(in srgb, var(--cy-surface-2) 40%, transparent);
  border-color: var(--cy-border);
  color: var(--cy-text-muted);
  opacity: 0.38;
  cursor: not-allowed;
}

.cy-be-dates-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--cy-surface-2);
  border: var(--cy-border-width) solid var(--cy-border);
}

.cy-be-dates-summary__col--right {
  border-left: var(--cy-border-width) solid var(--cy-border);
  padding-left: 12px;
}

.cy-be-dates-summary__label {
  font-family: var(--cy-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cy-text-muted);
}

.cy-be-dates-summary__val {
  font-family: var(--cy-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--cy-text);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
 * Airbnb-Style Segmented Date & Slot Selector Box
 * -------------------------------------------------------------------------- */
.cy-airbnb-box {
  border: 1px solid var(--cy-border, rgba(255, 255, 255, 0.16));
  border-radius: 14px;
  overflow: hidden;
  background: var(--cy-field, #10131A);
  margin-bottom: 2px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cy-airbnb-box:focus-within,
.cy-airbnb-box:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.cy-airbnb-box__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  cursor: pointer;
  border-bottom: 1px solid var(--cy-border, rgba(255, 255, 255, 0.1));
  transition: background 0.18s ease;
  position: relative;
}

.cy-airbnb-box__dates:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cy-airbnb-box__col {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58px;
}

.cy-airbnb-box__col--start {
  border-right: 1px solid var(--cy-border, rgba(255, 255, 255, 0.1));
}

.cy-airbnb-box__label {
  display: block;
  font-family: var(--cy-font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cy-text-muted);
  margin-bottom: 4px;
  line-height: 1;
}

.cy-airbnb-box__val {
  font-size: 13px;
  font-weight: 700;
  color: var(--cy-text, #FFFFFF);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cy-airbnb-box__change-pill {
  position: absolute;
  top: 9px;
  right: 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--cy-action);
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0.85;
}

.cy-airbnb-box__slot {
  padding: 8px 14px 10px;
  background: transparent;
}

.cy-airbnb-box__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 3px;
}

.cy-airbnb-box__select {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--cy-text, #FFFFFF);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 24px 2px 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}

.cy-airbnb-box__select option {
  background: var(--cy-surface-2, #141822);
  color: var(--cy-text, #FFFFFF);
}

.cy-airbnb-box__caret {
  position: absolute;
  right: 0;
  pointer-events: none;
  color: var(--cy-text-muted);
  font-size: 14px;
}

/* -----------------------------------------------------------------------------
 * Modal Dialog for Calendar Date Picker
 * -------------------------------------------------------------------------- */
.cy-cal-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cy-cal-modal.is-open {
  display: flex;
}

.cy-cal-modal__backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.cy-cal-modal__dialog {
  background: #11141B;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  max-width: 460px;
  width: 100%;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  position: relative;
  z-index: 2;
  animation: cyCalModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cyCalModalPop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.cy-cal-modal__header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #141822;
  gap: 12px;
  flex-shrink: 0;
}

.cy-cal-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
}

.cy-cal-modal__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--cy-text-muted);
}

.cy-cal-modal__close {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cy-text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
}

.cy-cal-modal__close:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.cy-cal-modal__body {
  padding: 18px 20px;
  overflow-y: auto;
}

.cy-cal-modal__footer {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #141822;
  flex-shrink: 0;
}

.cy-be-breakdown {
  padding: 16px;
  border-radius: 14px;
  background: var(--cy-surface-2);
  border: var(--cy-border-width) solid var(--cy-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.cy-be-breakdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--cy-text-secondary);
}

.cy-be-breakdown__total {
  padding-top: 10px;
  border-top: var(--cy-border-width) solid var(--cy-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cy-be-breakdown__due {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: var(--cy-text);
}

.cy-be-breakdown__later {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--cy-text-muted);
}

.cy-be-reserve-btn {
  width: 100%;
  height: 48px;
  border-radius: var(--cy-radius-pill);
  background: var(--cy-action);
  color: var(--cy-action-text);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 0 18px var(--cy-action-glow);
  transition: all 180ms ease;
}

.cy-be-reserve-btn:hover {
  background: var(--cy-action-hover);
  box-shadow: 0 0 26px var(--cy-action-glow);
}

.cy-be-reserve-note {
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--cy-text-muted);
}

/* =============================================================================
 * VIEW MODE 2B: STEP 2 CHECKOUT & INTAKE
 * ========================================================================== */
.cy-be-checkout-wrap {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cy-be-checkout-summary {
  padding: 20px 24px;
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-2);
  border: var(--cy-border-width) solid var(--cy-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* =============================================================================
 * HELPFUL GUIDES & STUDIO POLICIES (3-Card Persistent Section)
 * ========================================================================== */
.cy-be-guides {
  padding-top: 32px;
  border-top: var(--cy-border-width) solid var(--cy-border);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cy-be-guides__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

body #main-body .cy-be-guides__title {
  margin: 6px 0 4px;
  font-family: var(--cy-font-display);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 600;
  color: var(--cy-text);
}

.cy-be-guides__sub {
  margin: 0;
  font-size: 15px;
  color: var(--cy-text-muted);
  max-width: 640px;
}

/* Keep Legacy List Classes for Scheduled Bookings Display */
.cy-booking-list {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-4);
}

.cy-booking-item {
  padding: var(--cy-space-5);
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-2);
}

.cy-booking-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cy-space-3);
  margin-bottom: var(--cy-space-4);
  padding-bottom: var(--cy-space-3);
  border-bottom: var(--cy-border-width) solid var(--cy-border);
}

.cy-booking-item__code {
  display: inline-block;
  margin-bottom: 4px;
  font-size: var(--cy-text-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cy-text-muted);
}

.cy-booking-item__title {
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: var(--cy-ca-card);
  font-weight: 600;
  color: var(--cy-text);
}

.cy-booking-item__kv {
  margin-bottom: var(--cy-space-4);
}

.cy-booking-item__brief {
  margin: 0 0 var(--cy-space-3);
  font-size: var(--cy-ca-label);
  color: var(--cy-text-secondary);
}

.cy-booking-item__assets {
  margin-bottom: var(--cy-space-4);
}

.cy-booking-item__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--cy-space-3);
  padding-top: var(--cy-space-3);
  border-top: var(--cy-border-width) solid var(--cy-border);
}

/* -----------------------------------------------------------------------------
 * Interactive Form Accordion Steps & Brand Aesthetics (Colors & Typography)
 * -------------------------------------------------------------------------- */
.cy-form-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cy-form-step {
  background: var(--cy-surface-1, #111317);
  border: 1px solid var(--cy-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cy-form-step.is-open {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.cy-form-step__header {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: background 0.15s ease;
}

.cy-form-step__header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.cy-form-step__title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cy-form-step__num {
  font-family: var(--cy-font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--cy-action, #AFE139);
  background: rgba(175, 225, 57, 0.12);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cy-form-step__title {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 2px;
}

.cy-form-step__sub {
  font-size: 12.5px;
  color: var(--cy-text-muted, #9CA3AF);
  margin: 0;
}

.cy-form-step__caret {
  font-size: 16px;
  color: var(--cy-text-muted, #9CA3AF);
  transition: transform 0.2s ease;
}

.cy-form-step.is-open .cy-form-step__caret {
  transform: rotate(180deg);
}

.cy-form-step__body {
  display: none;
  padding: 0 22px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 18px;
}

.cy-form-step.is-open .cy-form-step__body {
  display: block;
}

/* Brand Aesthetics: Color Palette */
.cy-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.cy-palette-item {
  background: var(--cy-surface-2, #16191F);
  border: 1px solid var(--cy-border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cy-palette-item__label {
  font-size: 11px;
  font-family: var(--cy-font-mono, monospace);
  color: var(--cy-text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cy-color-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cy-color-picker {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.cy-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.cy-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 7px;
}

.cy-hex-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0 8px;
  font-family: var(--cy-font-mono, monospace);
  font-size: 12.5px;
  color: #FFFFFF;
  text-transform: uppercase;
}

.cy-hex-input:focus {
  outline: none;
  border-color: var(--cy-action, #AFE139);
}

/* Typography Options */
.cy-typo-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 640px) {
  .cy-typo-options {
    grid-template-columns: 1fr;
  }
}

.cy-typo-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--cy-surface-2, #16191F);
  border: 1px solid var(--cy-border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cy-typo-option:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

.cy-typo-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--cy-action, #AFE139);
}

.cy-typo-option.is-selected {
  border-color: var(--cy-action, #AFE139);
  background: rgba(175, 225, 57, 0.06);
}

.cy-typo-option__content strong {
  display: block;
  font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.cy-typo-option__content span {
  display: block;
  font-size: 12.5px;
  color: var(--cy-text-muted, #9CA3AF);
  line-height: 1.4;
}

.cy-recommended-pill {
  font-size: 10px;
  background: rgba(175, 225, 57, 0.18);
  color: var(--cy-action, #AFE139);
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 700;
  margin-left: 6px;
  text-transform: uppercase;
}

/* Guidelines Banner */
.cy-guidelines-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 18px;
}

.cy-guidelines-banner__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 260px;
}

.cy-guidelines-pdf-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.cy-guidelines-banner__title {
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.cy-guidelines-banner__sub {
  font-size: 12.5px;
  color: var(--cy-text-muted, #9CA3AF);
  line-height: 1.4;
}

.cy-guidelines-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cy-guidelines-modal.is-open {
  display: flex;
}

.cy-guidelines-modal__dialog {
  background: #111317;
  border: 1px solid var(--cy-border, rgba(255, 255, 255, 0.18));
  border-radius: 20px;
  max-width: 980px;
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.cy-guidelines-modal__backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.cy-guidelines-modal__header {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #141820;
  gap: 16px;
  flex-shrink: 0;
}

.cy-guidelines-modal__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cy-guidelines-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
}

.cy-guidelines-modal__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #9CA3AF;
}

.cy-guidelines-modal__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cy-guidelines-modal__close {
  background: none;
  border: none;
  color: #9CA3AF;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin-left: 6px;
  transition: color 0.15s ease;
}
.cy-guidelines-modal__close:hover {
  color: #FFFFFF;
}

.cy-guidelines-modal__body {
  padding: 0;
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #0B0D0E;
}

.cy-guidelines-modal__frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #0B0D0E;
}

/* ==============================================================================
 * Streamlined Studio Bookings Ledger Table & Interactive Slide-Over Drawer
 * ============================================================================== */
.cy-bk-ledger-card {
  margin-bottom: var(--cy-space-6);
  border: 1px solid var(--cy-border);
  background: var(--cy-surface-2);
  border-radius: var(--cy-radius-xl);
  overflow: hidden;
  transition: border-color var(--cy-dur-fast) ease, box-shadow var(--cy-dur-fast) ease;
}

.cy-bk-ledger-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cy-space-3);
  padding: 16px 22px;
  background: var(--cy-surface-2);
  border-bottom: 1px solid var(--cy-border);
}

.cy-bk-ledger-head__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cy-bk-ledger-head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cy-bk-scroll-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--cy-radius-pill);
}

.cy-bk-collapse-btn {
  background: transparent;
  border: 1px solid var(--cy-border);
  color: var(--cy-text-muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--cy-dur-fast) ease;
}

.cy-bk-collapse-btn:hover {
  background: var(--cy-surface-3);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.cy-bk-ledger-body {
  padding: 0;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.cy-bk-ledger-card.is-collapsed .cy-bk-ledger-body {
  display: none;
}

.cy-bk-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cy-bk-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.cy-bk-table thead tr {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--cy-border);
}

.cy-bk-table th {
  padding: 12px 18px;
  font-family: var(--cy-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cy-text-muted);
  white-space: nowrap;
}

.cy-bk-row {
  border-bottom: 1px solid var(--cy-border);
  cursor: pointer;
  transition: background-color var(--cy-dur-fast) ease;
  position: relative;
}

.cy-bk-row:last-child {
  border-bottom: none;
}

.cy-bk-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cy-bk-row:focus-visible {
  outline: 2px solid var(--cy-action);
  background: rgba(255, 255, 255, 0.04);
}

.cy-bk-table td {
  padding: 14px 18px;
  vertical-align: middle;
}

.cy-bk-svc-title {
  font-family: var(--cy-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--cy-text);
  margin-bottom: 3px;
}

.cy-bk-svc-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cy-text-muted);
}

.cy-bk-code-pill {
  font-family: var(--cy-font-mono);
  font-size: 11px;
  color: var(--cy-text-muted);
  letter-spacing: 0.04em;
}

.cy-bk-meta-sep {
  color: var(--cy-text-subtle);
}

.cy-bk-meta-link {
  color: var(--cy-action);
  text-decoration: none;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cy-bk-meta-link:hover {
  text-decoration: underline;
  color: #fff;
}

.cy-bk-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--cy-text);
  white-space: nowrap;
}

.cy-bk-date-range i {
  color: var(--cy-text-muted);
  font-size: 14px;
}

.cy-bk-duration-tag {
  font-size: 11px;
  font-family: var(--cy-font-mono);
  color: var(--cy-text-muted);
  margin-top: 2px;
}

.cy-bk-price-main {
  font-weight: 600;
  color: var(--cy-text);
}

.cy-bk-free-text {
  color: var(--cy-action);
  font-weight: 600;
}

.cy-bk-deposit-note {
  font-size: 12px;
  color: var(--cy-text-muted);
  margin-top: 2px;
  white-space: nowrap;
}

.cy-bk-actions-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cy-bk-row-btn {
  background: var(--cy-surface-3);
  border: 1px solid var(--cy-border);
  color: var(--cy-text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--cy-radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--cy-dur-fast) ease;
  white-space: nowrap;
}

.cy-bk-row-btn:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* ==============================================================================
 * Side Slide-Over Drawer Styles
 * ============================================================================== */
.cy-drawer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  visibility: hidden;
  transition: visibility 0.25s ease;
}

.cy-drawer.is-open {
  visibility: visible;
}

.cy-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cy-drawer.is-open .cy-drawer__backdrop {
  opacity: 1;
}

.cy-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 540px;
  max-width: 92vw;
  background: #11141B;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: -16px 0 50px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.cy-drawer.is-open .cy-drawer__panel {
  transform: translateX(0);
}

.cy-drawer__header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.cy-drawer__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cy-text-muted);
  margin-bottom: 6px;
}

.cy-drawer__code-pill {
  font-family: var(--cy-font-mono);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--cy-action);
  font-weight: 600;
}

.cy-drawer__copy-btn {
  background: none;
  border: none;
  color: var(--cy-text-muted);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 13px;
  border-radius: 4px;
  transition: color var(--cy-dur-fast) ease;
}

.cy-drawer__copy-btn:hover {
  color: #fff;
}

.cy-drawer__title {
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.cy-drawer__close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--cy-text-muted);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--cy-dur-fast) ease;
}

.cy-drawer__close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.cy-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cy-drawer__status-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}

.cy-drawer__status-strip i {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.cy-drawer__status-strip strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.cy-drawer__status-strip p {
  margin: 0;
  font-size: 12px;
  color: var(--cy-text-muted);
  line-height: 1.4;
}

.cy-drawer__status-strip--success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.cy-drawer__status-strip--warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

.cy-drawer__status-strip--danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

.cy-drawer__status-strip--info {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

.cy-drawer__section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
}

.cy-drawer__section-title {
  font-size: 12px;
  font-family: var(--cy-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cy-text-muted);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cy-drawer__section-title i {
  color: var(--cy-action);
  font-size: 14px;
}

.cy-drawer__kv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 480px) {
  .cy-drawer__kv-grid {
    grid-template-columns: 1fr;
  }
}

.cy-drawer__kv-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cy-drawer__kv-label {
  font-size: 11px;
  color: var(--cy-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cy-drawer__kv-val {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.cy-drawer__link {
  color: var(--cy-action);
  text-decoration: none;
}

.cy-drawer__link:hover {
  text-decoration: underline;
  color: #fff;
}

.cy-drawer__project-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  text-decoration: none;
  transition: all var(--cy-dur-fast) ease;
}

.cy-drawer__project-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--cy-action);
}

.cy-drawer__project-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cy-action);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.cy-drawer__project-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cy-drawer__project-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.cy-drawer__project-sub {
  font-size: 11px;
  color: var(--cy-text-muted);
}

.cy-drawer__brief-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cy-drawer__brief-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
}

.cy-drawer__brief-key {
  font-size: 11px;
  font-family: var(--cy-font-mono);
  color: var(--cy-action);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cy-drawer__brief-val {
  font-size: 13px;
  color: var(--cy-text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.cy-drawer__assets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cy-drawer__asset-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  text-decoration: none;
  transition: all var(--cy-dur-fast) ease;
}

.cy-drawer__asset-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.cy-drawer__asset-card i {
  color: var(--cy-action);
  font-size: 18px;
  flex-shrink: 0;
}

.cy-drawer__asset-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cy-drawer__asset-name {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cy-drawer__asset-meta {
  font-size: 11px;
  color: var(--cy-text-muted);
}

.cy-drawer__asset-arrow {
  color: var(--cy-text-muted);
  font-size: 14px;
}

.cy-drawer__footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
}