.advanced-columns {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.advanced-col {
  flex: 1 1 0;
  min-width: 280px;
  max-width: 600px;
}


/* ===== Calculator Engine: Site Crawler (admin tools tab) ===== */
.ce-site-crawler .ce-sc-form-row {
  display: grid;
  grid-template-columns: minmax(520px, 3fr) minmax(180px, 0.8fr) minmax(320px, 1.6fr) auto;
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.ce-site-crawler .ce-sc-field label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

.ce-site-crawler .ce-sc-field-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ce-site-crawler .ce-sc-field-action {
  align-self: start;
}

.ce-site-crawler .ce-sc-field-action label {
  margin-bottom: 6px;
}

.ce-site-crawler .ce-sc-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}

.ce-site-crawler .ce-sc-options label {
  font-weight: 400;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ce-site-crawler .ce-sc-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 6px 14px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f6f7f7;
}

.ce-site-crawler .ce-sc-table td,
.ce-site-crawler .ce-sc-table th {
  vertical-align: top;
}

.ce-site-crawler .ce-sc-details summary {
  margin-top: 6px;
  cursor: pointer;
}

@media (max-width: 1200px) {
  .ce-site-crawler .ce-sc-summary {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 900px) {
  .ce-site-crawler .ce-sc-form-row {
    grid-template-columns: 1fr;
  }

  .ce-site-crawler .ce-sc-field-action {
    justify-content: flex-start;
  }
}

/* ===== Calculator Engine: Page/Post Counter (admin tools tab) ===== */
.ce-page-post-counter .ce-sc-form-row {
  display: grid;
  grid-template-columns: minmax(620px, 720px) max-content max-content;
  gap: 12px;
  align-items: start;
  margin-top: 12px;
  max-width: 1100px;
}

.ce-page-post-counter .ce-sc-field label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

.ce-page-post-counter .ce-sc-field-action {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: start;
}

.ce-page-post-counter .ce-sc-field-action label {
  margin-bottom: 6px;
}

.ce-page-post-counter .ce-sc-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}

.ce-page-post-counter .ce-sc-options label {
  font-weight: 400;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ce-page-post-counter input.regular-text {
  max-width: none;
  width: 100%;
}

@media (max-width: 900px) {
  .ce-page-post-counter .ce-sc-form-row {
    grid-template-columns: 1fr;
  }

  .ce-page-post-counter .ce-sc-field-action {
    justify-content: flex-start;
  }
}

/* ===== Calculator Engine: Page Speed (admin tools tab) ===== */
.ce-page-speed .ce-sc-form-row {
  display: grid;
  grid-template-columns: minmax(620px, 720px) max-content;
  gap: 12px;
  align-items: start;
  margin-top: 12px;
  max-width: 1100px;
}

.ce-page-speed .ce-sc-field label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

.ce-page-speed .ce-sc-field-action {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: start;
}

.ce-page-speed .ce-sc-field-action label {
  margin-bottom: 6px;
}

.ce-page-speed input.regular-text {
  max-width: none;
  width: 100%;
}

@media (max-width: 900px) {
  .ce-page-speed .ce-sc-form-row {
    grid-template-columns: 1fr;
  }

  .ce-page-speed .ce-sc-field-action {
    justify-content: flex-start;
  }
}

/* ===== Calculator Engine: Site Info (admin tools tab) ===== */
.ce-site-info .ce-sc-form-row {
  display: grid;
  grid-template-columns: minmax(620px, 720px) max-content;
  gap: 12px;
  align-items: start;
  margin-top: 12px;
  max-width: 1100px;
}

.ce-site-info .ce-sc-field label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

.ce-site-info .ce-sc-field-action {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: start;
}

.ce-site-info .ce-sc-field-action label {
  margin-bottom: 6px;
}

.ce-site-info input.regular-text {
  max-width: none;
  width: 100%;
}

@media (max-width: 900px) {
  .ce-site-info .ce-sc-form-row {
    grid-template-columns: 1fr;
  }

  .ce-site-info .ce-sc-field-action {
    justify-content: flex-start;
  }
}
:root {
  --bg: #052649;
  --card: #111827;
  --muted: #b8b8b8;
  --text: #EFEFEF;
  --accent: #FF5C00;
  --accent-2: #01F9C6;
  --border: #1f2937;
  --ring: #334155;
  --shadow: 0 10px 25px rgba(0, 0, 0, .35);
  --card-alt: #000000;
}

.hidden { display: none !important; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-15 { gap: 15px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.ml-5 { margin-left: 5px; }
.ml-12 { margin-left: 12px; }
.w-100px { width: 100px; }
input.w-100px { width: 100px !important; }
.align-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-end { justify-content: flex-end; }
.flex-col { flex-direction: column; }
.w-full { width: 100%; }
.text-accent-2 { color: var(--accent-2); }
.text-small { font-size: small; }
.italic { font-style: italic; }
.font-600 { font-weight: 600; }
.text-105 { font-size: 1.05em; }
.mt-30 { margin-top: 30px; }
.mt-5 { margin-top: 5px; }
.p-2-4 { padding: 2px 4px; }

.line-clamp-2 {
  height: 48px;
  min-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5;
}

.grid-primary-options {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  gap: 25px;
  align-items: start;
  width: 100%;
  margin-top: 15px;
}

.design-content-wrapper {
  display: contents;
}

.design-content-wrapper .checkbox-row {
  display: contents;
}


@media (max-width: 1024px) {
  .grid-primary-options {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .grid-primary-options {
    grid-template-columns: 1fr;
  }
}

.flex-product-loading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.col-48 {
  flex: 0 0 48%;
}

@media (max-width: 900px) {
  .col-48 {
    flex: 1 1 100%;
  }
}

.text-center { text-align: center; }
.min-w-0 { min-width: 0; }
.block { display: block; }
.mb-5 { margin-bottom: 5px; }
.font-500 { font-weight: 500; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.h-34 { height: 34px; }
.m-0 { margin: 0; }
.text-small-muted { font-size: 0.85em; color: #ccc; }
.gap-20 { gap: 20px; }
.flex-1 { flex: 1; }
.mb-8 { margin-bottom: 8px; }
.text-09 { font-size: 0.9em; }
.text-ccc { color: #ccc; }

.p-16-20 { padding: 16px 20px; }
.bg-dark-blue { background: #1a2332; }
.border-dark { border: 1px solid #2d3748; }
.rounded-6 { border-radius: 6px; }
.col-70 { flex: 0 0 70%; }
.min-w-150 { min-width: 150px; }
.max-w-150 { max-width: 150px; }
.text-warning { color: #FFB84D; }
.max-w-520 { max-width: 520px; }
.text-muted-blue { color: #9fb3c8; }
.text-white { color: #fff; }
.cursor-pointer { cursor: pointer; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.gap-18 { gap: 18px; }
.pl-20 { padding-left: 20px; }
.pr-20 { padding-right: 20px; }
.mb-15 { margin-bottom: 15px; }

.justify-between { justify-content: space-between; }
.text-095 { font-size: 0.95em; }

.highlight-input {
  background-color: var(--border) !important;
  box-shadow: 0 0 8px rgba(51, 153, 255, 0.3);
}

.section-sub-header {
  margin: 20px 0 10px 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--text);
}

.fieldset-full { width: 100%; flex: none !important; }
.fieldset-75 { width: 75%; flex: none !important; }
.fieldset-46 { width: 46%; flex: none !important; }
.fieldset-40 { width: 40%; flex: none !important; }
.fieldset-38 { width: 38%; flex: none !important; }
.fieldset-32 { width: 32%; flex: none !important; }
.fieldset-30 { width: 30%; flex: none !important; }
.fieldset-28 { width: 28%; flex: none !important; }
.fieldset-26 { width: 26%; flex: none !important; }
.fieldset-20 { width: 20%; flex: none !important; }
.fieldset-48 { width: 48%; flex: none !important; }
.fieldset-72 { width: 72%; flex: none !important; }
.fieldset-equal { flex: 1 1 0; min-width: 0; }

.data-source-info {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 0.9em;
  color: var(--muted);
}

.summary-discount-row {
  color: var(--accent);
  font-weight: bold;
}

.summary-discount-reason {
  font-size: 0.85em;
  font-weight: normal;
  color: var(--muted, #9aa0a6);
}

form[data-id="website-build"] aside#summary .summary-total-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.min-charge-note {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.vat-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

#site-check-error {
  color: var(--accent);
  margin-top: -5px;
  margin-left: 8px;
}

* {
  box-sizing: border-box;
}

.audit-section {
  background-color: var(--card);
}


.container {
  max-width: 1500px;
  margin: 40px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 14px;
  align-items: start;
}

/* Mobile/tablet: stack calculator + summary to prevent horizontal overflow */
@media (max-width: 980px) {
  .container {
    grid-template-columns: 1fr;
    margin: 16px auto;
  }
}
.calculator-engine-plugin-wrap h1,
.calculator-engine-plugin-wrap h2,
.calculator-engine-plugin-wrap h3 {
  margin: 0 0 8px;
  color: var(--text);
}

.calculator-engine-plugin-wrap h2 {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sec-total {
  font-weight: 800;
  white-space: nowrap;
}

.calculator-engine-plugin-wrap h3 {
  margin: 12px 0;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

 h4 {    font-size: 1.5em;}
h5 {    font-size: 1.2em;}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
  color: var(--text);
}

.form>.card + .card {
  background: var(--card-alt);
  border-color: #20304a;
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label-with-help {
  display: flex;
  align-items: center;
  gap: 6px;
}

.label-with-help label {
  margin: 0;
}

.fieldset {
  border: 1px dashed var(--ring);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
}

.legend-with-help {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.fieldset legend {
  
  color: var(--muted);
  font-weight: 700;
}

.mb-neg-10 { margin-bottom: -10px; }

.ecommerce-banner-style {
  margin-top: 12px;
  border: 2px solid var(--accent-2);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .25);
}

@media (max-width: 600px) {
  form[data-id="website-build"] #ecommerce-banner .flex {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  form[data-id="website-build"] #ecommerce-banner .flex > div {
    min-width: 0;
  }

  form[data-id="website-build"] #ecommerce-banner .ml-auto {
    margin-left: 0;
  }

  form[data-id="website-build"] #ecommerce-banner .whitespace-nowrap {
    white-space: normal;
  }

  form[data-id="website-build"] #ecommerce-banner .btn,
  form[data-id="website-build"] #ecommerce-banner .btn-toggle {
    width: 100%;
  }
}

.reset-heading-style {
  padding: 0 !important;
  margin-left: 0px !important;
}

.p-8 { padding: 8px; }
.shadow-blue { box-shadow: 0 0 8px rgba(51, 153, 255, 0.3); }
.mt-15 { margin-top: 15px; }
.gap-16 { gap: 16px; }
.p-14 { padding: 14px; }
.text-gray-300 { color: #d1d5db; }
.mt-6 { margin-top: 6px; }
.ml-auto { margin-left: auto; }
.whitespace-nowrap { white-space: nowrap; }
.text-decoration-none { text-decoration: none; }
  


.field input[type="number"],
.field input[type="text"],
.field select,
.field textarea,
select,
input[type="email"],
input[type="tel"] {
  width: 100%;
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  font: inherit;
}

input[type="range"] {
  width: 100%;
  appearance: none;
  height: 6px;
  background: #868789;
  border-radius: 999px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #38bdf8;
  cursor: pointer;
  border: 2px solid #0b1220;
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: #38bdf8;
  cursor: pointer;
}

input[type="range"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #4a4a4a;
}

input[type="range"]:disabled::-webkit-slider-thumb {
  background: #666;
  cursor: not-allowed;
}

input[type="range"]:disabled::-moz-range-thumb {
  background: #666;
  cursor: not-allowed;
}

.field:has(input[type="range"]:disabled) ~ #attn-desc {
  opacity: 0.5;
  color: #888 !important;
}

.field input:focus,
.field select:focus,
.field input[type="text"]:focus,
.field input[type="number"]:focus,
.field textarea:focus,
select:focus,
input:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .25);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 16px;
}

.checkbox-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Responsive checkbox lists (used by SEO Service/Audit search engine pickers) */
.ce-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 14px;
  align-items: start;
}

.ce-checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.ce-checkbox-grid label > input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

.settings-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.settings-col {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

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

.option-list label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.option-list input[type="radio"] {
  margin-top: 2px;
}

.radio-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 12px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.note {
  margin: 0 0 8px 0;
  color: var(--muted);
  font-size: 14px;
}

.note-line {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 14px;
}

.note-line .hint {
  display: block;
  font-size: 12px;
  color: #a8b3c6;
  margin-top: 4px;
}

.hidden,
.hide {
  display: none !important;
}

aside#summary {
  height: max-content;
  /*max-height: calc(100vh - 40px);*/
  background: #0b1220;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
  color: var(--text);
  transition: opacity 0.2s ease;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

/* Ensure tooltips from the form can layer above the summary column */
form.form[data-id] {
  position: relative;
  z-index: 2;
}

@media (max-width: 600px) {
  aside#summary {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* On mobile, the scrollbar "gutter" trick causes content to hug the edge */
  #mainpane aside#summary .summary-scrollable {
    padding-right: 0;
    margin-right: 0;
  }

  /* Give summary rows a little side padding */
  aside#summary .summary-row {
    padding-left: 4px;
    padding-right: 4px;
  }
}

aside#summary.calculating {
  opacity: 0.7;
  pointer-events: none;
}

aside#summary.calculating #aside-breakdowns {
  position: relative;
}

aside#summary.calculating #aside-breakdowns::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--accent-2);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

#mainpane aside#summary {
  margin-bottom: 100px;
  display: flex;
  flex-direction: column;
  /*max-height: calc(100vh - 40px);*/
  overflow-y: hidden;
}

#mainpane aside#summary .summary-scrollable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  margin-right: -8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

#mainpane aside#summary .summary-scrollable::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#mainpane aside#summary .summary-form-container {
  flex-shrink: 0;
  overflow: visible;
}

#mainpane aside#summary .summary-form-container .elementor {
  overflow: visible !important;
}

#mainpane aside#summary .summary-form-container .elementor-field-group {
  overflow: visible !important;
}

#mainpane aside#summary .summary-form-container .elementor-field-type-select select,
#mainpane aside#summary .summary-form-container .select2-container {
  position: relative;
  z-index: 9999;
}

.page-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 15px;
}

.page-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-column h4 {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd;
}

.page-column label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.page-column label input {
  margin: 0;
}
.page-types-row {
  display: grid;
  grid-template-columns: 55% 41%;
  gap: 15px;
  margin-bottom: 15px;
  align-items: start; 
}

#page-type-inputs {
  display: grid;
  grid-template-columns: repeat(5, 1fr) .25fr;
  gap: 15px;
  align-items: start;
}

.page-type-item {
  min-width: 60px;
}
.page-source-box {
  background: #0b1220;
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 12px;
  color: var(--text);
  
  font-size: 0.92em;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.page-source-box .source-title {
  
  color: #9fb3c8;
  margin-bottom: 6px;
}
.page-source-box .total-pages {
  margin-top: 4px;
  margin-bottom: 8px;
  color: #e2e8f0;
  
}
.page-source-box .modified-values {
  margin-top: 6px;
  color: #9fb3c8;
  
}
.page-source-box .modified-item {
  color: var(--accent-2);
}
.page-aside {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 12px;
  min-width: 0;
}
.page-aside > * {
  min-width: 0;
  max-width: 100%;
}
.page-source-box .pages-title { font-weight: 700; color: #9fb3c8; margin-bottom: 6px; }
.page-source-box .pages-list { color: #d1d5db; line-height: 1.4; font-size: 0.9em; white-space: normal; overflow-wrap: anywhere; }
.page-source-box .pages-empty { color: #9fb3c8; }

/* Website Build: 14xx laptop widths can squeeze the aside; stack sooner. */
@media (max-width: 1500px) {
  form[data-id="website-build"] .page-types-row {
    grid-template-columns: 1fr;
  }

  form[data-id="website-build"] .page-aside {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

input.page-type-input.manual-override,
.page-type-item .field input.manual-override {
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 3px rgba(1, 249, 198, 0.25) !important;
  color: var(--accent-2) !important;
  
}

.mini-info {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
#website_type_container .inline-field-row label,
#refinement_container .inline-field-row label {
  width: 140px !important;
  min-width: 140px !important;
  padding-right: 10px;
  flex-shrink: 0;
}
.btn-toggle {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 16px;
  width: 100%;
}

.btn-toggle:hover {
  background: #e0e0e0;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dashed transparent;
}

.summary-row.strong {
  font-weight: 800;
}

.summary-row.total-top {
  font-size: 1.15rem;
  font-weight: 900;
  color: #eafff3;
}

.summary-row.compact {
  padding: 4px 0;
  font-weight: 600;
  color: #e2e8f0;
}

.summary-row.indent {
  padding-left: 20px;
  font-size: 0.9rem;
  color: #9fb3c8;
  border-bottom: none;
  padding-bottom: 0px;
}

.summary-row.indent.indent-2 {
  padding-left: 40px;
  font-size: 0.88rem;
  color: #8ea5bd;
}

.summary-title {
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text);
}

.summary-row + .note {
  margin-top: -4px;
  margin-bottom: 6px;
  padding-left: 2px;
  color: #9fb3c8;
  font-size: 13px;
}

#jump-scope,
.btn,
#lf-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent);
  color: var(--text);
  width: 100%;
  margin-top: 10px;
  text-decoration: none;
}
.ss-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; z-index: 99998; }
.ss-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.2); width: min(92vw, 420px); display: none; z-index: 99999; }
.ss-modal header { padding: 14px 18px; border-bottom: 1px solid #eee; font-weight: 600; }
.ss-modal .ss-body { padding: 16px 18px; color: #333; }
.ss-modal footer { padding: 12px 18px; border-top: 1px solid #eee; display: flex; gap: 10px; justify-content: flex-end; }
.ss-btn { appearance: none; border: 1px solid #d0d5dd; background: #fff; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.ss-btn-primary { background: #1e63ff; color: #fff; border-color: #1e63ff; }
.ss-btn:hover { filter: brightness(.98); }
.sa-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; z-index: 99998; }
.sa-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.2); width: min(92vw, 420px); display: none; z-index: 99999; }
.sa-modal header { padding: 14px 18px; border-bottom: 1px solid #eee; font-weight: 600; }
.sa-modal .sa-body { padding: 16px 18px; color: #333; }
.sa-modal footer { padding: 12px 18px; border-top: 1px solid #eee; display: flex; gap: 10px; justify-content: flex-end; }
.sa-btn { appearance: none; border: 1px solid #d0d5dd; background: #fff; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.sa-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.sa-btn:hover { filter: brightness(.98); }

.btn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white !important;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--ring) !important;
  color: var(--text) !important;
  width: 100%;
  margin-top: 10px;
}
.btn2:hover {
  border: 1px solid white !important;;
  background: var(--accent) !important;;
  color: var(--text) !important;;

}
select {
    padding: 12px 0 !important;
}
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.reset-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.4) !important; display: none !important; z-index: 99998 !important; }
.reset-modal { color: var(--accent); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.2); width: min(92vw, 420px); display: none; z-index: 99999; }
.reset-modal header { padding: 14px 18px; border-bottom: 1px solid #eee; font-weight: 600; }
.reset-modal .reset-body { padding: 16px 18px; color: #333; }
.reset-modal footer { padding: 12px 18px; border-top: 1px solid #eee; display: flex; gap: 10px; justify-content: flex-end; }
.reset-btn { color: var(--bg) !important; border-color: var(--accent) !important; appearance: none; border: 1px solid #d0d5dd; background: #fff; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.reset-btn-primary { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.reset-btn:hover { filter: brightness(.98); background-color: var(--accent) !important; color:white !important;}
.reset-title { font-size: 1.25rem; margin: 0;color: var(--bg) !important; }

#check-site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--muted);
  color: var(--bg);
  width: 30%;
  height: 40px;
  min-width: 120px;
  position: relative;
  transition: all 0.3s ease;
  z-index: 1;
}

#check-site-btn.checking {
  border-color: transparent;
}

#check-site-btn.checking::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: conic-gradient(
    from var(--border-angle),
    transparent,
    var(--accent-2) 10%,
    var(--bg) 50%,
    var(--accent-2) 90%,
    transparent
  );
  z-index: -1;
  animation: border-spin 2.5s linear infinite;
}

#check-site-btn.checking::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--muted);
  border-radius: 11px;
  z-index: -1;
}

@keyframes border-spin {
  to {
    --border-angle: 1turn;
  }
}

#jump-scope {
  border-radius: 12px;
}

.btn,
#lf-send {
  border-radius: 10px;

}

[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover,
.btn:hover,
#lf-send:hover {
  background-color: #000000;
  color: var(--accent);
}

[type=button] {
  color: var(--text);
}

.link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid var(--ring);
  background: #0b1220;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
}

.link-icon:hover {
  background: #111b2c;
}

.icon-btn {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  font-size: 16px;
}
.icon-btn:focus {
  outline: none;
  box-shadow: none;
}
.icon-btn:hover {
  filter: brightness(0.95);
}

.section-summary {
  margin-top: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--ring);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .02);
  border-radius: 10px;
}

.longform {
  max-width: 1200px;
  margin: 16px auto 40px;
  color: var(--text);
}

hr {
  border: 0;
  border-top: 1px solid var(--ring);
  margin: 12px 0;
}

.longform.card {
  background: var(--card-alt);
  border-color: #20304a;
}

.cost-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px dashed var(--ring);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  margin: 8px 0;
}

.inline-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lf-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
}

.lf-main {
  min-width: 0;
}

.lf-side {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 12px;
  height: max-content;
}

.lf-side h4 {
  margin: 0 0 8px;
  color: var(--text);
}

.lf-side .field {
  margin: 8px 0;
}

.lf-side input {
  width: 100%;
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 10px 12px;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.header-row h2 {
  margin: 0;
}

.switch-row {
  display: flex;
  gap: 24px;
  align-items: center;
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}

.help {
  cursor: pointer;
  border-radius: 50%;
  background: #eee;
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
}

.help[aria-hidden=" true"] {
  display: none;
}

.helptext {
  color: #888;
  font-size: 0.95em;
  margin: 4px 0 8px 0;
}

.multiselect {
  min-width: 180px;
}

.inline-fields {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.inline-fields>* {
  margin-bottom: 0;
}

.audit-type-field {
  margin-bottom: 16px;
}

.audit-type-columns {
  display: flex;
  gap: 10px;
}

.audit-type-columns>div {
  flex: 1;
  background: #232733;
  border-radius: 8px;
  padding: 1em;
  min-width: 180px;
}

.target-checkboxes {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.seo-url-section {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}

.seo-url-section .seo-url-info {
  width: 40%;
}

.seo-url-section .seo-url-input-wrapper {
  width: 60%;
  display: flex;
  gap: 8px;
  align-items: center;
}

.seo-url-section .seo-url-input-wrapper .field {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

.seo-url-section .check-site-btn {
  flex: 0 0 auto;
  margin-top: 0;
  height: 40px;
  white-space: nowrap;
}

.visibility-top-row {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

.lf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  margin: 22px 0 12px;
  font-size: larger;
  font-weight: 600;
  border-bottom: 1px solid var(--lf-rule, rgba(255, 255, 255, 0.14));
}

.lf-title {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2px;
  font-size: clamp(1.125rem, 1.2vw + 0.75rem, 1.6rem);
}

.lf-value,
.lf-total {
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-align: right;
  font-size: clamp(1.2rem, 1.5vw + 0.85rem, 1.75rem);
}

.lf-list li,
.lf-sublist li {
  margin: 0;
  padding: 2px 0;
}

.lf-desc {
  display: block;
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--lf-muted, rgba(255, 255, 255, 0.7));
  line-height: 1.45;
}

.lf-list li>small.note,
.lf-sublist li>small.note {
  display: block;
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--lf-muted, rgba(255, 255, 255, 0.7));
}

.lf-list li:last-child>.lf-desc,
.lf-sublist li:last-child>.lf-desc,
.lf-list li:last-child>small.note,
.lf-sublist li:last-child>small.note {
  margin-bottom: 0;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #0b1220;
  border: 1px solid var(--ring);
  padding: 8px 10px;
  border-radius: 10px;
}

.check input {
  margin-top: 3px;
}

.lf-group {
  margin: 10px 0 16px;
}

.lf-two,
.lf-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.lf-list {
  margin: 0;
  padding-left: 18px;
}

.lf-list>li {
  margin: 10px 0;
}

.lf-list li.tick {
  position: relative;
  padding-left: 22px;
  list-style-type: none;
}

.lf-list li.tick::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #22c55e;
  font-weight: 800;
}
.lf-context {
margin: 0 0 !important;
}
.lf-source {
  color: var(--muted);
  font-size: small;
  font-weight: 600;
  font-style: normal;
  display: inline;
}

.lf-source:before {
  content: "src: ";
}

.shake {
  animation: sh .35s linear;
}

.fieldset {
  min-width: 0;
  flex: 1 1 0;
  max-width: 100%;
}

.toggle-switch {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

input[type="checkbox"]
{
 transform: scale(1.5);

}

input[type="checkbox"]:checked {
  background-color: var(--accent-2);
  color: white;

}
input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

input[type="checkbox"]:disabled:checked {
  opacity: 0.4;
  background-color: #555;
}

label:has(input[type="checkbox"]:disabled) {
  cursor: not-allowed;
  
}


.toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-switch .slider {
  position: relative;
  width: 38px;
  height: 22px;
  background: #444;
  border-radius: 22px;
  transition: background 0.2s;
  margin-right: 0;
  margin-left: 0;
  flex-shrink: 0;
}

.toggle-switch .slider:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked+.slider {
  background: #22c55e;
}

.toggle-switch input:checked+.slider:before {
  transform: translateX(16px);
}

.toggle-switch input:disabled+.slider {
  background: #2a2a2a;
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-switch input:disabled:checked+.slider {
  background: #166534;
  opacity: 0.5;
}

.toggle-switch input:disabled+.slider:before {
  opacity: 0.5;
}

.toggle-switch:has(input:disabled) {
  cursor: not-allowed;
  /* Don't fade the entire control: it makes the tooltip translucent.
     Only dim the slider/label text below. */
}

.toggle-switch:has(input:disabled) #mode-label {
  opacity: 0.75;
}

.helptext {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}
  
    .pulse-animation {
      display: inline-block;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      font-weight: bolder;
      color: white;
      border-radius: 50%;
      font-size: 16px;
      cursor: help;
      animation: pulse 2s infinite;
      position: relative;
      z-index: 0;
    }

    /* Ensure tooltips can render above the summary column (grid sibling) */
    .pulse-animation:hover,
    .pulse-animation:focus-within {
      z-index: 100000;
    }
    
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 white;
      }
      70% {
        box-shadow: 0 0 0 6px rgba(0, 123, 255, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
      }
    }
  .custom-tooltip {
  visibility: hidden;
  position: absolute;
  width: 220px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  z-index: 100001;
  bottom: 90%;
  left: 50%;
  margin-left: -110px;
  opacity: 0;
  transition: opacity 0.3s;
  font-weight: normal;
  font-size: 14px !important;
  line-height: 1.45;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.custom-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.pulse-animation:hover .custom-tooltip {
  visibility: visible;
  opacity: 1 !important;
}

/* Website Build: keep the Easy Mode tooltip on-screen on mobile */
@media (max-width: 600px) {
  form[data-id="website-build"] .wb-actions-row .pulse-animation .custom-tooltip {
    left: auto;
    right: 0;
    margin-left: 0;
    width: min(220px, 80vw);
    text-align: left;
  }

  form[data-id="website-build"] .wb-actions-row .pulse-animation .custom-tooltip::after {
    left: auto;
    right: 10px;
    margin-left: 0;
  }
}
.infotext {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
  color: var(--muted);
  font-size: 0.95em;
  margin-bottom: 10px;
}
.design-option-item,
.content-option-item {
  margin-bottom: 12px;
}

form[data-id="ecommerce"] #design-options-section .design-option-item label,
form[data-id="website-build"] #design-options-section .design-option-item label,
form[data-id="ecommerce"] #content-creation-section .content-option-item label,
form[data-id="website-build"] #content-creation-section .content-option-item label {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* `gap` won't apply to a text node, so use checkbox margin. */
form[data-id="ecommerce"] #design-options-section .design-option-item label > input[type="checkbox"],
form[data-id="website-build"] #design-options-section .design-option-item label > input[type="checkbox"],
form[data-id="ecommerce"] #content-creation-section .content-option-item label > input[type="checkbox"],
form[data-id="website-build"] #content-creation-section .content-option-item label > input[type="checkbox"] {
  transform: none !important;
  width: 18px;
  height: 18px;
  margin: 2px 10px 0 0;
  flex: 0 0 auto;
}

/* Indent descriptions so they align under the text (not under the checkbox). */
form[data-id="ecommerce"] #design-options-section .design-option-item > .infotext,
form[data-id="website-build"] #design-options-section .design-option-item > .infotext,
form[data-id="ecommerce"] #content-creation-section .content-option-item > .infotext,
form[data-id="website-build"] #content-creation-section .content-option-item > .infotext {
  margin-left: 28px !important;
  padding-right: 8px;
}

.design-option-item.quantity-option,
.content-option-item.quantity-option {
  margin-bottom: 16px;
}

.quantity-input label {
  font-size: 0.9em;
  color: #ccc;
  white-space: nowrap;
}

/* Ecommerce + Website Build: quantity rows (left text, right qty) */
form[data-id="website-build"] .ce-qty-row,
form[data-id="ecommerce"] .ce-qty-row {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

form[data-id="website-build"] .ce-qty-left,
form[data-id="ecommerce"] .ce-qty-left {
  flex: 1 1 auto;
  min-width: 0;
}

form[data-id="website-build"] .ce-qty-item-label,
form[data-id="ecommerce"] .ce-qty-item-label {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

form[data-id="website-build"] .ce-qty-desc,
form[data-id="ecommerce"] .ce-qty-desc {
  margin-left: 28px;
  margin-top: 4px;
  padding-right: 16px;
}

form[data-id="website-build"] .ce-qty-right,
form[data-id="ecommerce"] .ce-qty-right {
  flex: 0 0 clamp(160px, 30%, 190px);
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

form[data-id="website-build"] .ce-qty-field-label,
form[data-id="ecommerce"] .ce-qty-field-label {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 0 6px 0;
  font-size: 0.9em;
  color: #ccc;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

form[data-id="website-build"] .ce-qty-field,
form[data-id="ecommerce"] .ce-qty-field {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 0;
}

/* Design/content options: allow qty rows to wrap on smaller laptops. */
@media (max-width: 1500px) {
  form[data-id="website-build"] .advanced-columns,
  form[data-id="ecommerce"] .advanced-columns {
    flex-direction: column;
  }

  form[data-id="website-build"] .advanced-col,
  form[data-id="ecommerce"] .advanced-col {
    max-width: 100%;
  }

  form[data-id="website-build"] .ce-qty-row,
  form[data-id="ecommerce"] .ce-qty-row {
    flex-direction: column;
    align-items: stretch;
  }

  form[data-id="website-build"] .ce-qty-right,
  form[data-id="ecommerce"] .ce-qty-right {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  form[data-id="website-build"] .quantity-input label,
  form[data-id="ecommerce"] .quantity-input label {
    white-space: normal;
  }

  form[data-id="website-build"] .quantity-input,
  form[data-id="ecommerce"] .quantity-input {
    width: 100%;
  }
}

.ce-option-label-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.quantity-input .field {
  vertical-align: middle;
}

.quantity-input .field input {
  width: 60px;
}
.requirements-label {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 1.1em;
}

.main-options {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.option-box {
  background: #232733;
  border-radius: 8px;
  padding: 1em;
  flex: 1 1 calc(20% - 16px); 
  min-width: 180px;
  max-width: 240px;
}

 .easy-mode .section-container,
  .easy-mode .search-engines-field,
  .easy-mode .keywords-field,
  .easy-mode .size-competition-row,
  .easy-mode .target-countries-row,
.easy-mode #competitor-section,
.easy-mode #content-section,
.easy-mode #visibility-section,
.easy-mode .search-engines-field,
.easy-mode #kw-fields,
.easy-mode #kw-source,
.easy-mode #pages-posts-section,
.easy-mode #competitors-field,
.easy-mode #pages-field,
.easy-mode #posts-field,
.easy-mode #products-field,
.easy-mode #product-categories-field,
.easy-mode .country-field {
  display: none !important;
}

.subs {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}
.inline-fields>.fieldset {
  flex: 1 1 0;
  min-width: 0;
}

.inline-fields.button-row {
  align-items: center;
  gap: 16px;
}
.inline-fields.button-row .button-row__copy {
  flex: 1 1 55%;
  max-width: 55%;
  min-width: 280px;
}
.inline-fields.button-row .button-row__switch,
.inline-fields.button-row .advanced-btn-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.inline-fields.button-row .advanced-btn-wrap {
  margin-left: auto;
  gap: 10px;
}
.inline-fields.button-row .btn2 {
  width: auto;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .inline-fields.button-row .button-row__copy {
    flex-basis: 100%;
    max-width: 100%;
  }
  .inline-fields.button-row .btn2 {
    width: 100%;
  }
  .inline-fields.button-row .advanced-btn-wrap {
    margin-left: 0;
    width: 100%;
  }
}

.country-field.hidden {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}


    .section-header {
      font-size: 1.2em;
      font-weight: 500;
      margin-top: 20px;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--ring);
    }
    
    .section-container {
      border: 1px solid var(--ring);
      border-radius: 6px;
      padding: 16px;
      margin-bottom: 20px;
      background-color: var(--card-alt);
    }
#keywords-row>fieldset {
  flex: 1 1 0;
  min-width: 0;
  width: 33.33%;
}
#competitor-row>fieldset {
  flex: 1 1 0;
  min-width: 0;
}

#competitors-field {
  width: 20%;
}

#seo-target-field {
  width: 40%;
}

#competitor-row>.fieldset,
#competitor-row>.country-field {
  min-width: 0 !important;
  box-sizing: border-box;
}

#competitors-field {
  width: 26% !important;
}

#seo-target-field {
  width: 37% !important;
}

#competitor-row .country-field {
  width: 37% !important;
}
#keywords-row>.fieldset {
  min-width: 0 !important;
  box-sizing: border-box;
}

#kw-source-field {
  width: 26% !important;
}

#kw-count-field {
  width: 26% !important;
}

#kw-text-field {
  width: 48% !important;
}
#competitor-row {
  display: flex !important;
  flex-wrap: nowrap !important;
}

#competitor-row>.fieldset,
#competitor-row>.country-field {
  flex: none !important;
  min-width: 0 !important;
}

#competitors-field {
  width: 26% !important;
  flex-basis: 26% !important;
}

#seo-target-field {
  width: 37% !important;
  flex-basis: 37% !important;
}

#competitor-row .country-field {
  width: 37% !important;
  flex-basis: 37% !important;
}

#keywords-row {
  display: flex !important;
  flex-wrap: nowrap !important;
}

#keywords-row>.fieldset {
  flex: none !important;
  min-width: 0 !important;
}

#kw-source-field {
  width: 26% !important;
  flex-basis: 26% !important;
}

#kw-count-field {
  width: 26% !important;
  flex-basis: 26% !important;
}

#kw-text-field {
  width: 48% !important;
  flex-basis: 48% !important;
}

@keyframes sh {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-6px);
  }

  50% {
    transform: translateX(6px);
  }

  75% {
    transform: translateX(-4px);
  }

  100% {
    transform: translateX(0);
  }
}

@media (max-width: 1100px) {
  .checkbox-grid.cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media (max-width: 900px) {
  .container,
  .lf-grid {
    grid-template-columns: 1fr;
  }

  aside#summary {
    order: -1;
  }
  #mainpane aside#summary {
    max-height: none;
    overflow: visible;
    margin-bottom: 0;
  }
}

@media (max-width: 800px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .check-grid {
    grid-template-columns: 1fr;
  }
  
    .seo-url-section {
    flex-wrap: wrap;
  }
  
  .seo-url-section .seo-url-info {
    width: 100%;
  }
  
  .seo-url-section .seo-url-input-wrapper {
    width: 100%;
  }

  /* SEO Audit: stack the URL input + button on mobile */
  form[data-id="seo-audit"] .seo-url-section .seo-url-input-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  form[data-id="seo-audit"] .seo-url-section .check-site-btn {
    width: 100%;
    max-width: 100%;
    display: block;
    white-space: normal;
  }

  /* SEO Audit: Content & UX first row should be 2 columns, with Other Content on a new row */
  form[data-id="seo-audit"] #content-section .inline-fields:first-of-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  form[data-id="seo-audit"] #content-section .inline-fields:first-of-type > .fieldset-equal {
    min-width: 0;
  }

  form[data-id="seo-audit"] #content-section .inline-fields:first-of-type > .fieldset-equal:nth-child(3) {
    grid-column: 1 / -1;
  }

  /* SEO Audit: Visibility search engine blocks should be full width */
  form[data-id="seo-audit"] #visibility-section .search-engines-col,
  form[data-id="seo-audit"] #visibility-section .fieldset-75 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* SEO Audit: Local business should stack full-width on mobile */
  form[data-id="seo-audit"] #visibility-section #local-business-field {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* SEO Audit: Keyword source + keywords layout */
  form[data-id="seo-audit"] #visibility-section .flex.gap-12 {
    flex-wrap: wrap;
  }

  /* Mobile: stack all keyword inputs */
  form[data-id="seo-audit"] #kw-source-field,
  form[data-id="seo-audit"] #kw-text-field,
  form[data-id="seo-audit"] #kw-count-field,
  form[data-id="seo-audit"] #kw-description-field {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
.audit-type-columns {
    flex-wrap: wrap !important;
  }
  
  .audit-type-columns > div {
    flex: 0 0 calc(50% - 5px) !important;
    min-width: 0 !important;
  }
  
    .visibility-top-row .fieldset-46,
  .visibility-top-row .fieldset-26 {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 721px) {
  /* SEO Audit: keep Search Engines + Local Business on the same row */
  form[data-id="seo-audit"] #visibility-section .inline-fields.gap-14 {
    flex-wrap: nowrap;
    align-items: stretch;
  }

  form[data-id="seo-audit"] #visibility-section .search-engines-col {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
  }

  form[data-id="seo-audit"] #visibility-section #local-business-field {
    flex: 0 0 26% !important;
    width: 26% !important;
    max-width: 26% !important;
    min-width: 0;
  }
}

@media (max-width: 700px) {
  .lf-two {
    grid-template-columns: 1fr;
  }
}
.inline-field-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 12px;
  width: 100%;
}

/* Global: give native checkbox/radio labels breathing room */
.calculator-engine-wrap form label > input[type="checkbox"],
.calculator-engine-wrap form label > input[type="radio"] {
  margin-right: 6px;
}

/* SEO Audit: add spacing between adjacent checkbox labels */
form[data-id="seo-audit"] #visibility-section .target-checkboxes label,
form[data-id="seo-audit"] #visibility-section fieldset.fieldset-full > div > label {
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
}

.inline-field-row label {
  width: 200px;
  min-width: 200px;
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.inline-field-row .field {
  flex: 0 1 240px;
  max-width: 240px;
  min-width: 240px;
}

.inline-field-row select,
.inline-field-row input {
  width: 100%;
}

#service-options-container .inline-fields {
  flex-wrap: nowrap;
}

#service-options-container #local-section,
#service-options-container #content-section,
#service-options-container #accelerate-section {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  width: calc((100% - 48px) / 3) !important;
  min-width: 0 !important;
}
@media (max-width: 980px) {
  #service-options-container .inline-fields {
    flex-wrap: wrap;
  }
  #service-options-container #local-section,
  #service-options-container #content-section,
  #service-options-container #accelerate-section {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* SEO Service: Core SEO Service Options stacked (1 per row) */
  form[data-id="seo-service"] #sec-core .inline-fields {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }

  form[data-id="seo-service"] #sec-core .inline-fields > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  /* If the wrapper isn't a form (cached/legacy markup), still stack core options */
  details#sec-core.ce-collapsible .inline-fields {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }

  details#sec-core.ce-collapsible .inline-fields > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
}
.badge-multi {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.6;
  background: #eef3ff;
  color: #2b5fcc;
}

form[data-id="website-build"] .multi-page-controls .multi-page-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

form[data-id="website-build"] .multi-page-controls .multi-page-row label {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

form[data-id="website-build"] .multi-page-controls .multi-page-input {
  width: 72px;
  flex: 0 0 72px;
  margin-left: auto;
}

@media (max-width: 600px) {
  form[data-id="website-build"] .multi-page-controls .multi-page-row {
    gap: 8px;
  }

  form[data-id="website-build"] .multi-page-controls .multi-page-control label {
    min-width: 0;
    width: 100%;
  }

  form[data-id="website-build"] .multi-page-controls .multi-page-input {
    width: 110px;
    flex-basis: 110px;
    max-width: 140px;
  }
}
.wb-pulse-start {
  position: relative;
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 0 rgba(1, 249, 198, 0.45);
  animation: wb-pulse-border 1.8s ease-in-out infinite;
}

@keyframes wb-pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(1, 249, 198, 0.45);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(1, 249, 198, 0.0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(1, 249, 198, 0.0);
  }
}

.text-red { color: #e00; }
.bg-red-light { background: #fee; }
.border-red { border: 1px solid #e00; }
.p-12 { padding: 12px; }
.rounded-8 { border-radius: 8px; }
.p-20 { padding: 20px; }

/* Utility Classes - Must be at the end to override component styles */
.d-none { display: none; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

.ce-note-help {
  color: var(--accent-2);
  font-size: 0.9em;
  font-weight: 300;
}

/* Video Help Icons */
.ce-video-help {
  cursor: pointer;
  color: var(--accent-2);
  margin-left: 8px;
  font-size: 0.9em;
  font-weight: 300;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s;
}
.ce-video-help:hover {
  opacity: 0.8;
  text-decoration: underline;
}


/* Video Help Container */
.video-help-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  margin-top: -8px;
  padding-left: 2px;
}

/* Defensive: themes sometimes hide generic containers/spans */
form.form .video-help-container {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

form.form .ce-video-help {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Collapsible sections (frontend) */
details.ce-collapsible > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 2px 0;
  color: var(--text);
  font-weight: 600;
}

/* Mobile: put title on first line; help + caret on second line */
@media (max-width: 600px) {
  details.ce-collapsible > summary {
    /* iOS/Android: keep native summary tap behavior */
    display: list-item;
    position: relative;
    padding: 6px 28px 10px 0;
    border-bottom: 1px solid rgba(32, 48, 74, 0.7);
  }

  details.ce-collapsible > summary::after {
    position: absolute;
    right: 0;
    bottom: 10px;
    margin-left: 0;
  }

  /* First element child (usually the title span) sits on row 1 */
  details.ce-collapsible > summary > :first-child {
    display: block;
    font-size: 1.05em;
    line-height: 1.15;
  }

  /* Any other controls (e.g., video help) sit on row 2 */
  details.ce-collapsible > summary > :not(:first-child) {
    display: inline-flex;
    margin-top: 6px;
  }

  details.ce-collapsible > summary .ce-video-help {
    font-size: 0.95em;
    opacity: 0.95;
  }
}

details.ce-collapsible > summary::-webkit-details-marker {
  display: none;
}

details.ce-collapsible > summary::after {
  content: '▾';
  color: var(--accent-2);
  font-size: 0.95em;
  margin-left: auto;
  flex: 0 0 auto;
}

details.ce-collapsible:not([open]) > summary::after {
  content: '▸';
}

details.ce-collapsible > summary + * {
  margin-top: 10px;
}

/* Website Build (mobile layout fixes) */
form[data-id="website-build"] .wb-header {
  margin-bottom: 12px;
}

/* Website Build: tighten the spacing between stacked panes */
form.form[data-id="website-build"] {
  gap: 6px;
}

form[data-id="website-build"] .flex-product-loading.mb-24 {
  margin-bottom: 6px !important;
}

form[data-id="website-build"] .wb-title {
  margin: 0 0 10px;
}

aside#summary[data-id="website-build"] .wb-title {
  margin: 0 0 10px;
}

form[data-id="website-build"] .wb-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

form[data-id="website-build"] .wb-actions-row .video-help-container {
  margin: 0;
  margin-top: 0;
  padding-left: 0;
}

form[data-id="website-build"] .wb-actions-row .switch-row {
  margin-left: auto;
}

/* Hosting & Maintenance: match Website Build header + collapsible patterns */
form[data-id="hosting-maintenance"] .hm-header {
  margin-bottom: 12px;
}

/* Hosting & Maintenance: tighten the spacing between stacked panes */
form.form[data-id="hosting-maintenance"] {
  gap: 6px;
}

form[data-id="hosting-maintenance"] .flex-product-loading.mb-24 {
  margin-bottom: 6px !important;
}

form[data-id="hosting-maintenance"] .hm-title {
  margin: 0 0 10px;
}

aside#summary[data-id="hosting-maintenance"] .hm-title {
  margin: 0 0 10px;
}

form[data-id="hosting-maintenance"] .hm-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media (min-width: 601px) {
  /* Desktop: keep help links + Easy Mode on one row */
  form[data-id="hosting-maintenance"] .hm-actions-row {
    flex-wrap: nowrap;
  }

  form[data-id="hosting-maintenance"] .hm-actions-row .video-help-container {
    flex: 1 1 auto;
    min-width: 0;
  }

  form[data-id="hosting-maintenance"] .hm-actions-row .switch-row {
    flex: 0 0 auto;
  }
}

form[data-id="hosting-maintenance"] .hm-actions-row .video-help-container {
  margin: 0;
  margin-top: 0;
  padding-left: 0;
}

form[data-id="hosting-maintenance"] .hm-actions-row .switch-row {
  margin-left: auto;
}

/* SEO Audit: match Website Build header + collapsible patterns */
form[data-id="seo-audit"] .sa-header {
  margin-bottom: 12px;
}

/* SEO Audit: tighten the spacing between stacked panes */
form.form[data-id="seo-audit"] {
  gap: 6px;
}

form[data-id="seo-audit"] .sa-title {
  margin: 0 0 10px;
}

aside#summary[data-id="seo-audit"] .sa-title {
  margin: 0 0 10px;
}

form[data-id="seo-audit"] .sa-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

form[data-id="seo-audit"] .sa-actions-row .video-help-container {
  margin: 0;
  margin-top: 0;
  padding-left: 0;
}

form[data-id="seo-audit"] .sa-actions-row .switch-row {
  margin-left: auto;
}

/* SEO Service: match Website Build header + collapsible patterns */
form[data-id="seo-service"] .ss-header {
  margin-bottom: 12px;
}

/* SEO Service: tighten the spacing between stacked panes */
form.form[data-id="seo-service"] {
  gap: 6px;
}

form[data-id="seo-service"] .ss-title {
  margin: 0 0 10px;
}

aside#summary[data-id="seo-service"] .ss-title {
  margin: 0 0 10px;
}

form[data-id="seo-service"] .ss-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

form[data-id="seo-service"] .ss-actions-row .video-help-container {
  margin: 0;
  margin-top: 0;
  padding-left: 0;
}

form[data-id="seo-service"] .ss-actions-row .switch-row {
  margin-left: auto;
}

/* SEO Service: summary keyword label subline */
aside#summary[data-id="seo-service"] #keywords-label .ss-subline {
  display: block;
  font-size: 0.95em;
  font-weight: 500;
  opacity: 0.95;
}

/* SEO Service: headings use the same typeface (match Target Market) */
form[data-id="seo-service"] .section-sub-header,
form[data-id="seo-service"] .fieldset legend,
form[data-id="seo-service"] details.ce-collapsible > summary {
  font-family: var(--e-global-typography-primary-font-family, inherit);
}

/* SEO Service: Core row uses full width (AI Search Engines should fill remaining space) */
@media (min-width: 981px) {
  form[data-id="seo-service"] #sec-core .inline-fields.ss-core-options {
    flex-wrap: nowrap;
    align-items: stretch;
  }

  form[data-id="seo-service"] #sec-core .inline-fields.ss-core-options > * {
    min-width: 0;
  }

  form[data-id="seo-service"] #sec-core .inline-fields.ss-core-options > .fieldset.fieldset-20 {
    width: 20% !important;
    flex: 0 0 20% !important;
  }

  form[data-id="seo-service"] #sec-core .inline-fields.ss-core-options > .fieldset.fieldset-30 {
    width: 30% !important;
    flex: 0 0 30% !important;
  }

  form[data-id="seo-service"] #sec-core .inline-fields.ss-core-options > .fieldset.fieldset-40 {
    width: auto !important;
    flex: 1 1 0 !important;
  }
}

/* Functionality: 3 columns desktop, 2 columns mobile */
form[data-id="hosting-maintenance"] #sec-functionality .page-table {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Ecommerce: match Website Build header + collapsible patterns */
form[data-id="ecommerce"] .ec-header {
  margin-bottom: 12px;
}

form[data-id="ecommerce"] .ec-title {
  margin: 0 0 10px;
}

aside#summary[data-id="ecommerce"] .ec-title {
  margin: 0 0 10px;
}

form[data-id="ecommerce"] .ec-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

form[data-id="ecommerce"] .ec-actions-row .video-help-container {
  margin: 0;
  margin-top: 0;
  padding-left: 0;
}

form[data-id="ecommerce"] .ec-actions-row .switch-row {
  margin-left: auto;
}

@media (max-width: 600px) {
  /* Hosting & Maintenance: stack Website Information + selectors like Website Build */
  form[data-id="hosting-maintenance"] .flex-product-loading {
    flex-direction: column;
    gap: 12px;
  }

  /* Reduce "Website Information" visual weight (match Website Build) */
  form[data-id="hosting-maintenance"] .website-info-col h2 {
    font-size: 1.2em;
    margin: 0 0 6px;
  }

  /* Make selects full-width on mobile (label above field) */
  form[data-id="hosting-maintenance"] .website-type-col .inline-field-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  form[data-id="hosting-maintenance"] .website-type-col .inline-field-row label {
    width: auto !important;
    min-width: 0 !important;
    white-space: normal;
  }
  form[data-id="hosting-maintenance"] .website-type-col .inline-field-row .field {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
  }

  /* Requirements: 2 rows of 2 on mobile */
  form[data-id="hosting-maintenance"] .main-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  form[data-id="hosting-maintenance"] .main-options .option-box {
    max-width: none;
    min-width: 0;
  }
  form[data-id="hosting-maintenance"] #custom-hours-container {
    grid-column: 1 / -1;
  }

  form[data-id="hosting-maintenance"] .card {
    padding: 14px;
  }

  form[data-id="hosting-maintenance"] .hm-title {
    font-size: 1.45em;
    line-height: 1.15;
    text-align: center;
  }

  /* SEO Audit: center title on mobile + smaller second line */
  form[data-id="seo-audit"] .sa-title {
    font-size: 1.45em;
    line-height: 1.15;
    text-align: center;
  }

  form[data-id="seo-audit"] .sa-title .sa-title-line1,
  form[data-id="seo-audit"] .sa-title .sa-title-line2 {
    display: block;
  }

  form[data-id="seo-audit"] .sa-title .sa-title-line2 {
    font-size: 0.83em;
    font-weight: 600;
  }

  aside#summary[data-id="seo-audit"] .sa-title {
    text-align: center;
    font-size: 1.45em;
    line-height: 1.15;
  }

  /* Header controls: help links left, easy mode right */
  form[data-id="seo-audit"] .sa-actions-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
  }

  form[data-id="seo-audit"] .sa-actions-row .video-help-container {
    width: 100%;
    gap: 12px;
  }

  form[data-id="seo-audit"] .sa-actions-row .switch-row {
    margin-left: 0;
    justify-content: flex-end;
  }

  /* Switch, label, ? stacked vertically */
  form[data-id="seo-audit"] .sa-actions-row .switch-label.toggle-switch {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  form[data-id="seo-audit"] .sa-actions-row #mode-label,
  form[data-id="seo-audit"] .sa-actions-row .pulse-animation {
    margin-left: 0 !important;
  }

  /* Keep the Easy Mode tooltip on-screen + opaque */
  form[data-id="seo-audit"] .sa-actions-row .pulse-animation .custom-tooltip {
    left: auto;
    right: 0;
    margin-left: 0;
    width: min(240px, 80vw);
    text-align: left;
    background-color: #333;
    opacity: 1;
  }

  form[data-id="seo-audit"] .sa-actions-row .pulse-animation .custom-tooltip::after {
    left: auto;
    right: 10px;
    margin-left: 0;
  }

  /* SEO Service: center title on mobile + smaller second line */
  form[data-id="seo-service"] .ss-title {
    font-size: 1.45em;
    line-height: 1.15;
    text-align: center;
  }

  form[data-id="seo-service"] .ss-title .ss-title-line1,
  form[data-id="seo-service"] .ss-title .ss-title-line2 {
    display: block;
  }

  form[data-id="seo-service"] .ss-title .ss-title-line2 {
    font-size: 0.83em;
    font-weight: 600;
  }

  aside#summary[data-id="seo-service"] .ss-title {
    text-align: center;
    font-size: 1.45em;
    line-height: 1.15;
  }

  /* Header controls: help links left, easy mode right */
  form[data-id="seo-service"] .ss-actions-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
  }

  form[data-id="seo-service"] .ss-actions-row .video-help-container {
    width: 100%;
    gap: 12px;
  }

  form[data-id="seo-service"] .ss-actions-row .switch-row {
    margin-left: 0;
    justify-content: flex-end;
  }

  /* Switch, label, ? stacked vertically */
  form[data-id="seo-service"] .ss-actions-row .switch-label.toggle-switch {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  form[data-id="seo-service"] .ss-actions-row #mode-label,
  form[data-id="seo-service"] .ss-actions-row .pulse-animation {
    margin-left: 0 !important;
  }

  /* Keep the Easy Mode tooltip on-screen + opaque */
  form[data-id="seo-service"] .ss-actions-row .pulse-animation .custom-tooltip {
    left: auto;
    right: 0;
    margin-left: 0;
    width: min(240px, 80vw);
    text-align: left;
    background-color: #333;
    opacity: 1;
  }

  form[data-id="seo-service"] .ss-actions-row .pulse-animation .custom-tooltip::after {
    left: auto;
    right: 10px;
    margin-left: 0;
  }

  /* SEO Service: Core options fields stacked on mobile */
  form[data-id="seo-service"] #sec-core .inline-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  form[data-id="seo-service"] #sec-core .inline-fields > .fieldset,
  form[data-id="seo-service"] #sec-core .inline-fields > fieldset,
  form[data-id="seo-service"] #sec-core .inline-fields > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* SEO Audit: stack URL field + button */
  form[data-id="seo-audit"] .seo-url-section .seo-url-input-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  form[data-id="seo-audit"] .seo-url-section .check-site-btn {
    width: 100%;
    white-space: normal;
  }

  form[data-id="seo-audit"] .sa-hide-mobile {
    display: none !important;
  }

  /* SEO ROI: stack input+source rows on mobile */
  form[data-id="seo-roi"] .ce-roi-row {
    grid-template-columns: 1fr;
  }

  form[data-id="hosting-maintenance"] .hm-title .hm-title-line1,
  form[data-id="hosting-maintenance"] .hm-title .hm-title-line2 {
    display: block;
  }

  form[data-id="hosting-maintenance"] .hm-title .hm-title-line2 {
    font-size: 0.83em;
    font-weight: 600;
  }

  aside#summary[data-id="hosting-maintenance"] .hm-title {
    text-align: center;
    font-size: 1.45em;
    line-height: 1.15;
  }

  /* Header controls: help links left, easy mode right */
  form[data-id="hosting-maintenance"] .hm-actions-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
  }

  form[data-id="hosting-maintenance"] .hm-actions-row .video-help-container {
    width: 100%;
    gap: 12px;
  }

  form[data-id="hosting-maintenance"] .hm-actions-row .switch-row {
    margin-left: 0;
    justify-content: flex-end;
  }

  /* Switch, label, ? stacked vertically */
  form[data-id="hosting-maintenance"] .hm-actions-row .switch-label.toggle-switch {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  form[data-id="hosting-maintenance"] .hm-actions-row #mode-label,
  form[data-id="hosting-maintenance"] .hm-actions-row .pulse-animation {
    margin-left: 0 !important;
  }

  /* Keep the Easy Mode tooltip on-screen + opaque */
  form[data-id="hosting-maintenance"] .hm-actions-row .pulse-animation .custom-tooltip {
    left: auto;
    right: 0;
    margin-left: 0;
    width: min(220px, 80vw);
    text-align: left;
    background-color: #333;
    opacity: 1;
  }

  form[data-id="hosting-maintenance"] .hm-actions-row .pulse-animation .custom-tooltip::after {
    left: auto;
    right: 10px;
    margin-left: 0;
    border-color: #333 transparent transparent transparent;
  }

  form[data-id="hosting-maintenance"] #sec-functionality .page-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  form[data-id="ecommerce"] .card {
    padding: 14px;
  }

  form[data-id="ecommerce"] .ec-title {
    font-size: 1.45em;
    line-height: 1.15;
    text-align: center;
  }

  form[data-id="ecommerce"] .ec-title .ec-title-line1,
  form[data-id="ecommerce"] .ec-title .ec-title-line2 {
    display: block;
  }

  form[data-id="ecommerce"] .ec-title .ec-title-line2 {
    font-size: 0.83em;
    font-weight: 600;
  }

  aside#summary[data-id="ecommerce"] .ec-title {
    text-align: center;
    font-size: 1.45em;
    line-height: 1.15;
  }

  /* Header controls: help links left, easy mode right */
  form[data-id="ecommerce"] .ec-actions-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
  }

  form[data-id="ecommerce"] .ec-actions-row .video-help-container {
    width: 100%;
    gap: 12px;
  }

  form[data-id="ecommerce"] .ec-actions-row .switch-row {
    margin-left: 0;
    justify-content: flex-end;
  }

  /* Switch, label, ? stacked vertically */
  form[data-id="ecommerce"] .ec-actions-row .switch-label.toggle-switch {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  form[data-id="ecommerce"] .ec-actions-row #mode-label,
  form[data-id="ecommerce"] .ec-actions-row .pulse-animation {
    margin-left: 0 !important;
  }

  /* Keep the Easy Mode tooltip on-screen + opaque */
  form[data-id="ecommerce"] .ec-actions-row .pulse-animation .custom-tooltip {
    left: auto;
    right: 0;
    margin-left: 0;
    width: min(220px, 80vw);
    text-align: left;
    background-color: #333;
    opacity: 1;
  }

  form[data-id="ecommerce"] .ec-actions-row .pulse-animation .custom-tooltip::after {
    left: auto;
    right: 10px;
    margin-left: 0;
    border-color: #333 transparent transparent transparent;
  }

  /* Hide the “Note: Content and design…” copy on mobile */
  form[data-id="ecommerce"] .ec-note {
    display: none;
  }

  /* Mobile padding for refinement block */
  form[data-id="ecommerce"] .ce-build-options .options-row {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Functionality on mobile: 2 columns */
  form[data-id="ecommerce"] #sec-functionality .page-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* SEO ROI: input rows with right-hand “where to find it” column */
form[data-id="seo-roi"] .ce-roi-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

form[data-id="seo-roi"] .ce-roi-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

form[data-id="seo-roi"] .ce-roi-row .fieldset {
  margin: 0;
}

form[data-id="seo-roi"] .ce-roi-field legend {
  color: var(--text);
}

form[data-id="seo-roi"] .ce-roi-source-title {
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

form[data-id="seo-roi"] .ce-roi-source-title a {
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 700;
}

form[data-id="seo-roi"] .ce-roi-source-title a:hover,
form[data-id="seo-roi"] .ce-roi-source-title a:focus-visible {
  text-decoration: underline;
}

form[data-id="seo-roi"] .ce-roi-source-body {
  font-size: 0.95em;
}

form[data-id="seo-roi"] .ce-roi-source-body a {
  color: var(--accent-2);
}

form[data-id="seo-roi"] .ce-roi-source-body p {
  margin: 0 0 8px 0;
}

form[data-id="seo-roi"] .ce-roi-source-body ol,
form[data-id="seo-roi"] .ce-roi-source-body ul {
  margin: 0;
  padding-left: 18px;
}

form[data-id="seo-roi"] .ce-roi-source-body li {
  margin: 4px 0;
}

@media (max-width: 600px) {
  form[data-id="website-build"] .card {
    padding: 14px;
  }

  form[data-id="website-build"] .wb-title {
    font-size: 1.45em;
    line-height: 1.15;
    text-align: center;
  }

  form[data-id="website-build"] .wb-title .wb-title-line1,
  form[data-id="website-build"] .wb-title .wb-title-line2 {
    display: block;
  }

  /* Make the second line smaller on mobile (roughly matches the Website Information header scale) */
  form[data-id="website-build"] .wb-title .wb-title-line2 {
    font-size: 0.83em;
    font-weight: 600;
  }

  aside#summary[data-id="website-build"] .wb-title {
    text-align: center;
  }

  aside#summary[data-id="website-build"] .wb-title {
    font-size: 1.45em;
    line-height: 1.15;
  }

  /* Header controls: help links left, easy mode right */
  form[data-id="website-build"] .wb-actions-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
  }

  form[data-id="website-build"] .wb-actions-row .video-help-container {
    width: 100%;
    gap: 12px;
  }

  form[data-id="website-build"] .wb-actions-row .switch-row {
    margin-left: 0;
    justify-content: flex-end;
  }

  form[data-id="website-build"] .wb-actions-row .switch-label.toggle-switch {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  form[data-id="website-build"] .wb-actions-row #mode-label,
  form[data-id="website-build"] .wb-actions-row .pulse-animation {
    margin-left: 0 !important;
  }

  /* Mobile: show Website Information before Website Type */
  form[data-id="website-build"] .flex-product-loading {
    gap: 12px;
  }
  form[data-id="website-build"] .website-type-col {
    order: 2;
    margin-bottom: 6px;
  }
  form[data-id="website-build"] .website-info-col {
    order: 1;
  }


  /* Reduce "Website Information" visual weight */
  form[data-id="website-build"] .website-info-col h2 {
    font-size: 1.2em;
    margin: 0 0 6px;
  }

  /* Make Website Type select full-width on mobile (stack label + field) */
  form[data-id="website-build"] #website_type_container.inline-field-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  form[data-id="website-build"] #website_type_container.inline-field-row label {
    width: auto !important;
    min-width: 0 !important;
    white-space: normal;
  }
  form[data-id="website-build"] #website_type_container.inline-field-row .field {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
  }
  form[data-id="website-build"] #website_type_desc {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  /* Hide the extra note on mobile */
  form[data-id="website-build"] .wb-note {
    display: none;
  }
}

/* Website Build: make fold-ups look like the Page Types card */
form[data-id="website-build"] details.ce-build-options {
  background: var(--card-alt);
  border: 1px solid #20304a;
  border-radius: 16px;
  padding: 14px;
  color: var(--text);
}

form[data-id="website-build"] details.ce-build-options label {
  color: var(--text);
}

form[data-id="website-build"] details.wb-foldup {
  background: var(--card-alt);
  border: 1px solid #20304a;
  border-radius: 16px;
  padding: 14px;
}

@media (max-width: 600px) {
  form[data-id="website-build"] .page-types-row {
    grid-template-columns: 1fr;
  }

  /* Prevent subtle horizontal overflow from the 5-column page type grid */
  form[data-id="website-build"] #page-type-inputs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  form[data-id="website-build"] .page-type-item {
    min-width: 0;
  }

  form[data-id="website-build"] .page-type-item label {
    font-size: 0.95em;
  }

  form[data-id="website-build"] .page-aside {
    /* Source box ~40%, Selected pages ~60% */
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  form[data-id="website-build"] .page-aside > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Prevent Selected pages content overflowing viewport */
  form[data-id="website-build"] .page-source-box {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Page type hr/pg hint: slightly smaller on mobile */
  form[data-id="website-build"] .page-type-item > .infotext {
    font-size: 0.82em;
    margin-bottom: 0;
  }

  /* Build options: add padding so Refinement/checkbox blocks don't hug edges */
  form[data-id="website-build"] details.ce-build-options #primary-options-row {
    padding: 0 8px 8px;
    margin-top: 10px;
  }

  /* Pages + Functionality: 2 columns on mobile */
  form[data-id="website-build"] #sec-page-selection .page-table,
  form[data-id="website-build"] #sec-functionality .page-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Reduce category header size (pages + functionality) */
  form[data-id="website-build"] #sec-page-selection h4,
  form[data-id="website-build"] #sec-functionality h4 {
    font-size: 1.05em;
    margin-bottom: 6px;
  }
}

/* Ecommerce: make the top selects full-width on mobile */
@media (max-width: 600px) {
  form[data-id="ecommerce"] #shop_category_container.inline-field-row,
  form[data-id="ecommerce"] #shop_type_container.inline-field-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Mobile: keep “(Start here)” on the same line and right-aligned */
  form[data-id="ecommerce"] #shop_category_container.inline-field-row label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
  }

  form[data-id="ecommerce"] #shop_category_container.inline-field-row label br {
    display: none;
  }

  form[data-id="ecommerce"] #shop_category_container.inline-field-row label .text-accent-2 {
    margin-left: auto;
    white-space: nowrap;
    text-align: right;
  }

  /* Mobile: match Website Build ordering and header scale */
  form[data-id="ecommerce"] .flex-product-loading {
    gap: 12px;
  }
  form[data-id="ecommerce"] .website-type-col {
    order: 2;
    margin-bottom: 6px;
  }
  form[data-id="ecommerce"] .website-info-col {
    order: 1;
  }
  form[data-id="ecommerce"] .website-info-col h2 {
    font-size: 1.2em;
    margin: 0 0 6px;
  }

  /* Mobile: don't bottom-align the select column (prevents big empty space + missing second field) */
  form[data-id="ecommerce"] .advanced-columns.items-end {
    align-items: stretch;
  }

  form[data-id="ecommerce"] .advanced-columns .advanced-col.justify-end {
    justify-content: flex-start;
  }

  form[data-id="ecommerce"] .advanced-columns .advanced-col.align-center {
    align-items: stretch;
  }

  /* Remove the big top gap above the first dropdown on mobile */
  form[data-id="ecommerce"] #shop_category_container.mt-30 {
    margin-top: 0;
  }

  form[data-id="ecommerce"] #shop_category_container.inline-field-row label,
  form[data-id="ecommerce"] #shop_type_container.inline-field-row label {
    width: auto !important;
    min-width: 0 !important;
    white-space: normal;
  }
  form[data-id="ecommerce"] #shop_category_container.inline-field-row .field,
  form[data-id="ecommerce"] #shop_type_container.inline-field-row .field {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
  }
  form[data-id="ecommerce"] #shop_type_desc {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }
}


.product-loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  align-items: start;
}

/* Ecommerce: Product loading layout should match other unfolds */
form[data-id="ecommerce"] .ec-product-loading-row {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 25px;
  align-items: start;
  width: 100%;
  margin-top: 15px;
}

/* Ecommerce: qty fields are a nested grid so mobile can reliably keep them in one row */
form[data-id="ecommerce"] .ec-product-qty-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  align-items: start;
}

/* Ecommerce: Product loading should match other unfold card backgrounds */
form[data-id="ecommerce"] #product-loading-section.card {
  background: var(--card-alt);
  border-color: #20304a;
}

@media (max-width: 600px) {
  form[data-id="ecommerce"] .ec-product-loading-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  form[data-id="ecommerce"] .ec-product-qty-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}