/* portal.css
 * Consolidated CSS extracted from portal templates (Customers/ + Businesses/).
 * Sections below preserve the original <style> blocks 1:1 so visual output is unchanged.
 */

/* ===== templates/Customers/manage_package.php ===== */

.page-manage-package .pkg-card {
    border: none; border-radius: 10px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: transform 0.2s, box-shadow 0.2s;
}
.page-manage-package .pkg-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.page-manage-package .pkg-card.is-current { box-shadow: 0 0 0 2px #007bff, 0 4px 14px rgba(0,123,255,0.15); }
.page-manage-package .pkg-card.is-pending { box-shadow: 0 0 0 2px #ffc107, 0 2px 10px rgba(255,193,7,0.15); }
.page-manage-package .pkg-card .card-header {
    font-size: 1.05rem; font-weight: 700; padding: 0.7rem 1rem;
    border-bottom: none; text-align: center; letter-spacing: 0.4px;
}
.page-manage-package .pkg-card .card-body { padding: 1rem 1.1rem; }
.page-manage-package .price-section {
    min-height: 0; display: flex; flex-direction: column;
    justify-content: center; align-items: center; padding: 0.35rem 0;
    margin-bottom: 0.75rem !important;
}
.page-manage-package .price-amount { font-size: 2.25rem; font-weight: 800; color: #111; line-height: 1; }
.page-manage-package .price-period { font-size: 0.9rem; color: #6b7280; font-weight: 400; margin-top: 2px; }
.page-manage-package .price-custom { font-size: 1.3rem; font-weight: 700; color: #222; }
.page-manage-package .package-features { padding: 0; margin: 0.6rem 0; list-style: none; }
.page-manage-package .package-features li {
    display: flex; align-items: center; padding: 0.32rem 0;
    font-size: 0.92rem; color: #374151; border-bottom: 1px solid #f3f4f6;
    line-height: 1.35;
}
.page-manage-package .package-features li:last-child { border-bottom: none; }
.page-manage-package .package-features li i { width: 18px; margin-right: 10px; color: #10b981; font-size: 0.85rem; }
.page-manage-package .current-badge,
.page-manage-package .pending-badge {
    display: inline-block; font-size: 0.7rem; font-weight: 600;
    padding: 0.15rem 0.6rem; border-radius: 16px; margin-top: 0.3rem;
}
.page-manage-package .current-badge { background: #007bff; color: #fff; }
.page-manage-package .pending-badge { background: #ffc107; color: #333; }
/* Tighten outer rhythm so the page fits without scrolling on a 768px+ viewport. */
.page-manage-package .row.mt-3 { margin-top: 0.5rem !important; }
.page-manage-package .row.mt-3 > [class^="col-"] { margin-bottom: 0.5rem !important; }
.page-manage-package .pkg-card .mt-auto.pt-3 { padding-top: 0.5rem !important; }
.page-manage-package h6.mb-3.mt-3 { margin: 0.5rem 0 0.4rem !important; font-size: 0.85rem; }
.page-manage-package .alert { padding: 0.5rem 0.85rem; font-size: 0.88rem; margin-bottom: 0.5rem !important; }
.page-manage-package .card.border-success { margin-bottom: 0.5rem !important; }
.page-manage-package .card.border-success .card-header { padding: 0.5rem 0.85rem; font-size: 0.95rem; }
.page-manage-package .card.border-success .card-body { padding: 0.75rem 0.85rem; }
.page-manage-package .mt-4.pt-3.border-top { margin-top: 0.75rem !important; padding-top: 0.5rem !important; }

/* ===== templates/Customers/step_review.php ===== */

#reviewTabs .nav-link {
  color: #6b7280; font-weight: 600; border: none;
  padding: 10px 18px; border-bottom: 2px solid transparent;
}
#reviewTabs .nav-link:hover { color: #374151; border-bottom-color: #d1d5db; }
#reviewTabs .nav-link.active { color: #2563eb; border-bottom-color: #2563eb; background: transparent; }
.info-table th { white-space: nowrap; }

.btn-pay {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 24px; border: none; border-radius: 10px; font-weight: 800;
  background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
  transition: transform .05s ease, box-shadow .2s ease;
}
.btn-pay:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(37, 99, 235, .28); color: #fff; }

.review-checkout-cta {
  background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}

/* Unified frame that wraps the 7 review tabs, so both columns share the
   same visual theme and the left column always matches the height of the
   sticky CTA on the right (no orphan blank gap on short tabs). */
.review-tabs-frame {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin-top: 1rem;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.review-tabs-frame > #reviewTabs {
  margin: 0;
  padding: 0 0.75rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  flex: 0 0 auto;
}
.review-tabs-frame > #reviewTabs .nav-link { padding: 12px 16px; }
.review-tabs-frame > #reviewTabContent {
  padding: 1.25rem;
  flex: 1 1 auto;
  min-height: 360px;
}
.review-tabs-frame .tab-pane { animation: none; }
/* Consistent intro line + spacing so every tab feels like it belongs to
   the same card. */
.review-tabs-frame .tab-pane > p.text-muted.small:first-child {
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #e5e7eb;
}
.review-tabs-frame .info-table th { font-weight: 600; }
.review-tabs-frame .table { margin-bottom: 0; }

/* Make both columns stretch to the same height in the row. */
.review-checkout-row { display: flex; flex-wrap: wrap; }
.review-checkout-row > .col-lg-8,
.review-checkout-row > .col-lg-4 { display: flex; flex-direction: column; }
.review-checkout-row > .col-lg-8 > .review-tabs-frame { flex: 1 1 auto; }
.review-checkout-row > .col-lg-4 > .review-checkout-cta {
  flex: 1 1 auto;
  /* Match the visual rhythm of .review-tabs-frame (margin-top:1rem) so both
     boxes start at the same vertical position. */
  margin-top: 1rem;
  padding: 2rem 1.25rem;
}
.review-checkout-cta .cta-plan-name {
  font-size: 1.6rem; font-weight: 700; color: #111827; line-height: 1.2;
  letter-spacing: 0.2px;
}
.review-checkout-cta .cta-plan-price {
  font-size: 3rem; font-weight: 800; color: #111827; line-height: 1;
}
.review-checkout-cta .cta-plan-period {
  font-size: 1.1rem; font-weight: 500; color: #6b7280;
}
.review-checkout-cta .cta-stripe-note {
  font-size: 0.95rem; color: #6b7280; font-weight: 500;
}
.review-checkout-cta .btn-pay-review {
  font-size: 1.4rem; padding: 18px 40px;
}
.btn-pay-review {
  display: inline-block; padding: 16px 48px; border: none; border-radius: 10px;
  font-size: 1.25rem; font-weight: 800; letter-spacing: 0.3px;
  background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
  transition: transform .05s ease, box-shadow .2s ease;
}
.btn-pay-review:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(37, 99, 235, .28); color: #fff; text-decoration: none; }

.success-hero { text-align: center; padding: 12px 8px; }
.success-hero .emoji { font-size: 3rem; }
.success-hero p { color: #4b5563; }
.success-hero .btn-wrap-center { text-align: center; }
.success-hero .btn-landing {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 260px; padding: 10px 16px; border-radius: 8px;
}
@media (max-width: 576px) {
  .success-hero .btn-landing { width: 100%; min-width: 0; }
}

/* ===== templates/Customers/checkout_overview.php ===== */

.checkout-overview .co-title { font-size: 2rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; }
.checkout-overview .co-subtitle { font-size: 1.1rem; color: #6b7280; max-width: 500px; margin: 0 auto; }

.checkout-overview .co-step-card {
  border: 2px solid #e5e7eb; border-radius: 12px; padding: 1.5rem;
  text-align: center; height: 100%; background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.checkout-overview .co-step-card.co-step-active {
  border-color: #2563eb; box-shadow: 0 8px 24px rgba(37,99,235,0.12);
}
.checkout-overview .co-step-card.co-step-done {
  border-color: #22c55e; background: #f0fdf4;
}
.checkout-overview .co-step-badge {
  display: inline-block; background: #2563eb; color: #fff; font-size: 0.8rem;
  font-weight: 700; padding: 0.2rem 0.75rem; border-radius: 20px; margin-bottom: 0.75rem;
}
.checkout-overview .co-step-badge-muted { background: #9ca3af; }
.checkout-overview .co-step-badge-done { background: #22c55e; }
.checkout-overview .co-step-title { font-size: 1.15rem; font-weight: 700; color: #111827; margin-bottom: 0.25rem; }
.checkout-overview .co-step-desc { font-size: 0.9rem; color: #6b7280; margin-bottom: 1rem; }
.checkout-overview .co-step-details { background: #f9fafb; border-radius: 8px; padding: 1rem; }
.checkout-overview .co-step-name { font-weight: 600; color: #374151; margin-bottom: 0.5rem; }
.checkout-overview .co-step-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.checkout-overview .co-currency { font-size: 1rem; font-weight: 700; color: #111827; }
.checkout-overview .co-amount { font-size: 1.8rem; font-weight: 800; color: #111827; letter-spacing: 0.2px; }
.checkout-overview .co-cycle { font-size: 0.9rem; color: #6b7280; }
.checkout-overview .co-trial-badge {
  display: inline-block; background: #e8f5e9; color: #2e7d32;
  font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.6rem;
  border-radius: 4px; margin-top: 0.5rem;
}
.checkout-overview .co-arrow { width: 32px; height: 32px; color: #9ca3af; }

.checkout-overview .co-total-card {
  max-width: 420px; background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 10px; padding: 1rem 1.25rem;
}
.checkout-overview .co-total-row {
  display: flex; justify-content: space-between; padding: 0.4rem 0;
  font-size: 0.95rem; color: #374151;
}
.checkout-overview .co-total-row.co-total-done { color: #6b7280; text-decoration: line-through; }
.checkout-overview .co-total-row.co-total-done span:last-child { text-decoration: none; color: #22c55e; font-weight: 600; }
.checkout-overview .co-total-note { font-size: 0.8rem; color: #6b7280; margin-top: 0.5rem; }

.checkout-overview .btn-pay {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 32px; border: none; border-radius: 10px; font-weight: 800;
  background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff;
  box-shadow: 0 12px 24px rgba(37,99,235,0.22);
  transition: transform 0.05s ease, box-shadow 0.2s ease;
  font-size: 1.1rem;
}
.checkout-overview .btn-pay:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(37,99,235,0.28); color: #fff; }
.checkout-overview .co-reassurance { font-size: 0.85rem; color: #6b7280; }

@media (max-width: 767.98px) {
  .checkout-overview .co-title { font-size: 1.5rem; }
  .checkout-overview .co-amount { font-size: 1.5rem; }
}

/* ===== templates/Customers/index.php ===== */

.payment-pending-cell { background-color: #fff3cd !important; }
tr:hover .payment-pending-cell { background-color: #ffe69c !important; }

/* ===== templates/Customers/form_wizard.php ===== */

 .upload-area {
    border: 2px dashed #007bff;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    background: #f8f9fa;
    margin-bottom: 10px;
 }
 .upload-text { color: #007bff; font-size: 16px; }
 .select-btn { color: #007bff; font-weight: bold; text-decoration: underline; cursor: pointer; }
 .preview-area { display: flex; flex-wrap: wrap; margin-top: 10px; }
 .preview-area img { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; margin-right: 5px; margin-bottom: 5px; border: 1px solid #ddd; padding: 2px; }

/* ===== templates/Customers/step_basic.php ===== */

/* Primary-category autocomplete — mirrors .service-input / .ac-item from step_categories.php */
#primary-category-ac .ac-item { padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.95rem; }
#primary-category-ac .ac-item:hover,
#primary-category-ac .ac-item.ac-active { background: #007bff; color: #fff; }
#primary-category-ac .ac-item.ac-create-new { color: #555; font-style: italic; }
#primary-category-ac .ac-item.ac-create-new:hover,
#primary-category-ac .ac-item.ac-create-new.ac-active { background: #6c757d; color: #fff; }
#primary-category-ac .ac-item.ac-no-results { color: #888; cursor: default; }

/* ===== templates/Customers/step_campaign_goals.php (block 1) ===== */

.campaign-goals-heading { font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: #333; }
.campaign-goals-intro { font-size: 1.05rem; }
.goal-panel-title { font-size: 1.1rem; font-weight: 600; color: #555; }
.goal-count-badge { font-size: 0.8rem; }
.goal-sortable { min-height: 80px; padding: 0.5rem; border: 2px dashed #dee2e6; border-radius: 6px; background: #fafafa; }
#my-goals { border-color: #20c997; background: #f0fdf9; }
.goal-drag-item { cursor: grab; transition: border-color .2s, box-shadow .2s, background .2s, opacity .15s; user-select: none; -webkit-user-select: none; background: #fff; }
.goal-drag-item:hover { background: #f8fbfa; border-color: #adb5bd !important; }
.goal-drag-item-selected { border-color: #20c997 !important; box-shadow: 0 0 0 2px rgba(32, 201, 153, .15); }
.goal-drag-handle { cursor: grab; font-size: 1rem; opacity: 0.5; }
.goal-drag-item:hover .goal-drag-handle { opacity: 1; }
.goal-priority-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #20c997; color: #fff; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.campaign-goal-icon { width: 2.5rem; height: 2.5rem; border-radius: 8px; background: #20c997; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.campaign-goal-text { font-size: 1.05rem; line-height: 1.4; color: #333; }
.goal-placeholder { border: 2px dashed #20c997; border-radius: 6px; background: #e6fff7; min-height: 52px; margin-bottom: 0.5rem; list-style: none; }
.goal-locked-item { background: #f8f9fa; }
.goal-locked-item .goal-priority-badge { background: #6c757d; }
.goal-drag-item.ui-sortable-helper { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: rotate(1deg); z-index: 1000; }

/* ===== templates/Customers/step_campaign_goals.php (block 2) ===== */

.goal-guardrails-panel { font-size: 1rem; }
.goal-guardrails-panel-heading { font-size: 1.2rem; font-weight: 600; color: #333; }
.goal-guardrails-empty { font-size: 1rem; }
.goal-guardrails-panel .goal-guardrails-title { list-style: none; color: #20c997; font-size: 1.05rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.35rem; }
.goal-guardrails-panel .goal-guardrails-item { padding-left: 1.1rem; font-size: 1rem; line-height: 1.45; margin-bottom: 0.4rem; }

/* ===== templates/Customers/step_choose_package.php ===== */

.package-card {
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: 0.3s;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    cursor: pointer;
}
.package-card:hover, .package-card.selected {
    border-color: #20c997;
    background-color: #f0fdf9;
    box-shadow: 0 4px 8px rgba(32, 201, 151, 0.2);
}
.package-header {
    background: #20c997;
    color: #fff;
    padding: 15px;
    border-radius: 10px 10px 0 0;
}
.package-price {
    font-size: 24px;
    font-weight: bold;
}
.package-features {
    list-style: none;
    padding: 0;
    text-align: left;
}
.package-features li {
    padding: 5px 0;
}

.package-select-btn { background-color: #20c997; border-color: #20c997; color: #fff; }
.package-select-btn:hover { background-color: #1aa179; border-color: #1aa179; color: #fff; }
.package-card .btn-success,
.package-card .select-package.btn-success { background-color: #1aa179; border-color: #1aa179; color: #fff; }

/* ===== templates/Customers/step_geo_targets.php ===== */

.leaflet-pane { z-index: 0 !important; }
.leaflet-layer { z-index: 0 !important; }
#geoMap { border-radius: 0 0 0 0; }

/* ===== templates/Customers/step_images.php ===== */

 .upload-area {
    border: 2px dashed #007bff;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    background: #f8f9fa;
    margin-bottom: 10px;
}
.upload-text {
    color: #007bff;
    font-size: 16px;
}
.select-btn {
    color: #007bff;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}
.preview-area {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.preview-area img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    padding: 2px;
}
.image-thumb { position: relative; }
.remove-photo {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}
.gallery-grid { display:flex; flex-wrap:wrap; gap:6px; max-height:260px; overflow-y:auto; padding:6px; border:1px solid #eee; border-radius:4px; }
.gallery-item { position:relative; width:80px; height:80px; cursor:pointer; border:2px solid transparent; border-radius:4px; overflow:hidden; }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item .check-overlay { display:none; position:absolute; top:2px; right:2px; width:20px; height:20px; line-height:20px; text-align:center; background:#007bff; color:#fff; border-radius:50%; font-size:11px; }
.gallery-item.active { border-color:#007bff; }
.gallery-item.active .check-overlay { display:block; }
.upload-wins-notice { color:#856404; background:#fff3cd; border:1px solid #ffeeba; padding:4px 8px; border-radius:4px; font-size:12px; margin-top:6px; display:none; }

/* ===== templates/Customers/step_payment_options.php ===== */
.payment-options-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 1rem;
}

.payment-card {
  display: block;
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  transition: transform .2s;
}

/* Hide the real checkbox */
.card-input-hidden {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Card styling */
.card-content {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1rem;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Center icon and label */
.icon {
  margin-bottom: .5rem;
  color: #666;
}
.name {
  font-weight: 500;
  color: #333;
}

/* Hover effect */
.payment-card:hover .card-content {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Checked state — using adjacent sibling selector */
.card-input-hidden:checked + .card-content {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
  background: #f0f8ff;
}

/* Add a checkmark in the top‐right corner */
.card-input-hidden:checked + .card-content::after {
  content: "\f00c";               /* FontAwesome check */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1rem;
  color: #007bff;
}

/* Fieldset/legend basic reset & spacing */
fieldset {
  border: none;
  padding: 0;
}
legend {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: .5rem;
  color: #444;
}

/* Actions */
.form-actions {
  margin-top: 1.5rem;
  text-align: right;
}

/* ===== templates/Customers/step_recommendations.php ===== */

.recommendation-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.recommendation-card { cursor: pointer; transition: border-color .2s, box-shadow .2s; position: relative; }
.recommendation-card:hover, .recommendation-card-selected { border-color: #20c997 !important; box-shadow: 0 0 0 2px rgba(32, 201, 151, .25); }
.cursor-pointer { cursor: pointer; }
.recommendation-page-title { font-size: 1.35rem; }
.recommendation-intro { font-size: 1.05rem; }
.recommendation-tier-name { font-size: 1.2rem; }
.recommendation-budget { font-size: 1.25rem; color: #20c997; }
.recommendation-desc { font-size: 1.05rem; }
.recommendation-sidebar { font-size: 1rem; }
.recommendation-sidebar h6 { font-size: 1.1rem; }
.recommendation-sidebar li { font-size: 1rem; }
.recommendation-badge-current { font-size: 0.75rem; margin-bottom: 0.25rem; }
.recommendation-card-disabled .recommendation-card { opacity: 0.7; }
.recommendation-card-disabled label { cursor: not-allowed; }
.recommendation-badge-recommended { font-size: 0.75rem; margin-bottom: 0.5rem; display: inline-block; }
.recommendation-card-recommended { border-color: #28a745 !important; box-shadow: 0 0 0 2px rgba(40, 167, 69, .2); }

/* ===== templates/Customers/step_services.php ===== */

    .service-fields-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
    .service-fields-wrapper .service-row { display: flex; align-items: center; margin-bottom: 0; position: relative; }
    .service-fields-wrapper .service-row input[type="text"] { flex: 1; }
    .service-fields-wrapper .service-row .btn-remove-service { margin-left: 0.5rem; color: #dc3545; background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 0 0.4rem; line-height: 1; opacity: 0.6; }
    .service-fields-wrapper .service-row .btn-remove-service:hover { opacity: 1; }
    .service-fields-wrapper .service-count { grid-column: 1 / -1; font-size: 0.85rem; color: #888; margin-top: 0.25rem; }
    @media (max-width: 575.98px) {
        .service-fields-wrapper { grid-template-columns: 1fr; }
    }
    .service-fields-wrapper .autocomplete-list { position: absolute; top: 100%; left: 0; right: 2.5rem; background: #fff; border: 1px solid #ced4da; border-top: none; border-radius: 0 0 4px 4px; max-height: 200px; overflow-y: auto; z-index: 100; display: none; }
    .service-fields-wrapper .autocomplete-list .ac-item { padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.95rem; }
    .service-fields-wrapper .autocomplete-list .ac-item:hover,
    .service-fields-wrapper .autocomplete-list .ac-item.ac-active { background: #007bff; color: #fff; }
    .service-fields-wrapper .autocomplete-list .ac-item.ac-create-new { color: #555; font-style: italic; }
    .service-fields-wrapper .autocomplete-list .ac-item.ac-create-new:hover,
    .service-fields-wrapper .autocomplete-list .ac-item.ac-create-new.ac-active { background: #6c757d; color: #fff; }

/* ===== templates/Customers/choose_platform_package.php ===== */

.page-choose-package { font-size: 1rem; }
.page-choose-package .page-title { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; color: #222; }
.page-choose-package .page-subtitle { font-size: 1.1rem; color: #666; margin-bottom: 2rem; }

/* Billing toggle */
.page-choose-package .billing-toggle-wrapper { margin-bottom: 2rem; }
.page-choose-package .billing-toggle { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 1.1rem; font-weight: 500; background: #f8f9fa; border-radius: 50px; padding: 0.5rem 1.5rem; }
.page-choose-package .billing-toggle .toggle-switch { position: relative; width: 50px; height: 26px; cursor: pointer; flex-shrink: 0; }
.page-choose-package .billing-toggle .toggle-switch input { opacity: 0; width: 0; height: 0; }
.page-choose-package .billing-toggle .toggle-slider { position: absolute; inset: 0; background-color: #28a745; border-radius: 26px; transition: background-color 0.2s; }
.page-choose-package .billing-toggle .toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.page-choose-package .billing-toggle .toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px); }
.page-choose-package .billing-toggle .toggle-label { cursor: pointer; color: #999; transition: color 0.2s; }
.page-choose-package .billing-toggle .toggle-label.active { color: #333; font-weight: 600; }
.page-choose-package .annual-savings-badge { display: inline-block; background: #28a745; color: #fff; font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 20px; margin-left: 0.5rem; vertical-align: middle; }

/* Cards */
.page-choose-package .package-card { transition: all 0.25s ease; border: 2px solid #e9ecef; border-radius: 12px; overflow: hidden; cursor: pointer; }
.page-choose-package .package-card:hover { border-color: #007bff; box-shadow: 0 8px 25px rgba(0,123,255,0.15); transform: translateY(-2px); }
.page-choose-package .package-card.selected { border: 3px solid #28a745; box-shadow: 0 8px 25px rgba(40,167,69,0.2); transform: translateY(-2px); }
.page-choose-package .package-card .card-header { font-size: 1.2rem; font-weight: 700; padding: 1.25rem; border-bottom: none; text-align: center; }
.page-choose-package .package-card .card-body { padding: 1.5rem; }

/* Pricing */
.page-choose-package .price-section { min-height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.page-choose-package .price-amount { font-size: 2.5rem; font-weight: 700; color: #222; line-height: 1; }
.page-choose-package .price-period { font-size: 0.95rem; color: #888; font-weight: 400; }
.page-choose-package .price-secondary { font-size: 0.85rem; color: #999; margin-top: 0.25rem; }
.page-choose-package .price-custom { font-size: 1.5rem; font-weight: 700; color: #222; }
.page-choose-package .trial-badge { display: inline-block; background: #e8f5e9; color: #2e7d32; font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 4px; margin-top: 0.5rem; }
.page-choose-package .trial-badge-placeholder { visibility: hidden; }

/* Limits */
.page-choose-package .package-limits { background: #f8f9fa; border-radius: 8px; padding: 0.75rem 1rem; margin: 1rem 0; font-size: 0.9rem; }
.page-choose-package .package-limits .limit-item { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.page-choose-package .package-limits .limit-value { font-weight: 600; color: #333; }

/* Features (shared, left column) */
.page-choose-package .shared-features { list-style: none; padding: 0; margin: 0; }
.page-choose-package .shared-features .feature-item { display: block; padding: 0.4rem 0; font-size: 0.95rem; color: #555; }
.page-choose-package .shared-features .feature-item::before { content: '\2713'; color: #28a745; font-weight: 700; margin-right: 0.5rem; }
.page-choose-package .shared-features-heading { font-size: 1rem; font-weight: 600; color: #333; margin-bottom: 0.75rem; }

/* Bottom */
.page-choose-package .btn-continue { font-size: 1.15rem; padding: 0.7rem 2rem; border-radius: 8px; }
.page-choose-package .bottom-note { font-size: 0.9rem; color: #888; max-width: 600px; margin: 0 auto; }
.page-choose-package .selected-indicator { display: none; position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background: #28a745; border-radius: 50%; color: #fff; font-size: 16px; line-height: 28px; text-align: center; }
.page-choose-package .package-card.selected .selected-indicator { display: block; }

.page-choose-package.already-selected .package-card { pointer-events: none; cursor: default; opacity: 0.85; }
.page-choose-package.already-selected .package-card.selected { opacity: 1; }
.page-choose-package.already-selected .package-card:hover { transform: none; box-shadow: none; }

@media (max-width: 767.98px) {
  .page-choose-package .page-title { font-size: 1.5rem; }
  .page-choose-package .price-amount { font-size: 2rem; }
  .page-choose-package .package-card .card-body { padding: 1rem; }
}

/* ===== templates/Businesses/details.php ===== */

 /* ====== Tab styling ====== */
 #businessDetailsTabs .nav-link {
  color: #6b7280; font-weight: 600; border: none;
  padding: 10px 18px; border-bottom: 2px solid transparent;
 }
 #businessDetailsTabs .nav-link:hover { color: #374151; border-bottom-color: #d1d5db; }
 #businessDetailsTabs .nav-link.active { color: #2563eb; border-bottom-color: #2563eb; background: transparent; }

 /* ====== Info table ====== */
 .info-table th { white-space: nowrap; }

 /* ====== Accordion blocks (used inside Business Info tab) ====== */
 .rev-block{ border:1px solid #edf2f7; border-radius:10px; padding:10px 12px; margin-bottom:12px; }
 .rev-block > summary{
  cursor:pointer; list-style:none; font-weight:700; color:#374151; margin:2px 0 8px;
 }
 .rev-block > summary::-webkit-details-marker{ display:none; }
 .rev-block .bullets li{ position:relative; padding-left:20px; margin:6px 0; }
 .rev-block .bullets li::before{
  content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%;
  background:#a78bfa;
 }

 .rev-rows .rev-block { height: 100%; }
 .rev-rows .mb-3 { margin-bottom: 1rem !important; }

 .rev-summary{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:-10px -12px 8px;
  border-radius:8px; cursor:pointer; user-select:none;
  background:#f8fafc; border:1px solid #e6edf5;
  transition:background .2s, border-color .2s, color .2s;
 }
 .rev-summary:hover,
 .rev-summary:focus { background:#f1f5f9; border-color:#dbe5f0; outline:none; }
 .rev-block[open] .rev-summary { background:#eef6ff; border-color:#cfe2ff; }

 .rev-summary .title{ font-weight:700; color:#374151; }
 .rev-summary .hint{
  margin-left:auto; font-size:.85rem; color:#6b7280;
 }
 .rev-summary .hint::after{ content:"Expand"; }
 .rev-block[open] .rev-summary .hint::after{ content:"Collapse"; }
 .rev-summary .chev{ width:18px; height:18px; color:#6b7280; transition:transform .2s ease; }
 .rev-block[open] .rev-summary .chev{ transform:rotate(180deg); }
 .rev-summary:focus-visible{ box-shadow:0 0 0 3px rgba(59,130,246,.35); }
 .rev-block { overflow:clip; }

 /* ====== Campaign goal cards ====== */
 .goals-pane .card { border: 1px solid #e5e7eb; }

 /* Payment Options (read-only cards matching /customers/payment-options) */
 .payment-options-grid {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   margin-top: .5rem;
 }
 .payment-card-readonly .card-content {
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
   padding: 1rem;
   height: 100%;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   transition: box-shadow .2s, transform .2s;
 }
 .payment-card-readonly:hover .card-content {
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0,0,0,0.08);
 }
 .payment-card-readonly .icon { margin-bottom: .5rem; }
 .payment-card-readonly .name { font-weight: 500; color: #333; }


/* ===== Round 2: portal elements + OnboardingSteps ===== */

/* ===== templates/Customers/expert_calls.php ===== */

                          /* Dim the buy-ahead state without disabling it — the button still
                             accepts clicks; the muted look just says "you don't need to
                             hurry". */
                          .buy-call-dim { opacity: .55; }
                          .buy-call-dim:hover, .buy-call-dim:focus { opacity: 1; }

/* ===== templates/element/portal/campaign_dashboard_recreating.php ===== */

.portal-loading-dots::after {
    content: '';
    animation: portalDots 1.5s steps(4, end) infinite;
}
@keyframes portalDots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

/* ===== templates/element/portal/campaign_dashboard_consolidated.php ===== */

    /* ---- CSS Custom Properties (scoped under .campaign-dashboard) ---- */
    .campaign-dashboard {
        --cd-hero-color: #2563eb;
        --cd-success: #10b981;
        --cd-danger: #ef4444;
        --cd-warning: #f59e0b;
        --cd-neutral: #6b7280;
        --cd-card-shadow: 0 1px 3px rgba(0,0,0,0.1);
        --cd-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.1);
        --cd-hero-size: clamp(36px, 5vw, 48px);
        --cd-secondary-size: clamp(20px, 3vw, 24px);
    }

    /* ---- Period pills ---- */
    .period-pills .btn { font-size: 12px; padding: 4px 14px; border-radius: 20px; }
    .period-pills .btn.active { background: #007bff; color: #fff; border-color: #007bff; }

    /* ---- Hero Section ---- */
    .hero-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 20px;
    }
    .hero-card {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 28px 24px;
        border-left: 4px solid var(--cd-hero-color);
        box-shadow: var(--cd-card-shadow);
        transition: box-shadow 0.2s, transform 0.2s;
    }
    .hero-card:hover {
        box-shadow: var(--cd-card-shadow-hover);
        transform: translateY(-2px);
    }
    .hero-card.hero-calls { border-left-color: var(--cd-success); }
    .hero-card .hero-label {
        font-size: 12px; color: #6c757d; text-transform: uppercase;
        letter-spacing: 0.5px; margin-bottom: 6px; font-weight: 600;
    }
    .hero-card .hero-value {
        font-size: var(--cd-hero-size);
        font-weight: 700; color: #212529; line-height: 1.2;
    }

    /* ---- Secondary Metrics ---- */
    .secondary-metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 20px;
    }
    .metric-card {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 16px;
        text-align: center;
        box-shadow: var(--cd-card-shadow);
        transition: box-shadow 0.2s;
    }
    .metric-card:hover { box-shadow: var(--cd-card-shadow-hover); }
    .metric-card .metric-label {
        font-size: 11px; color: #6c757d; text-transform: uppercase;
        letter-spacing: 0.5px; margin-bottom: 4px;
    }
    .metric-card .metric-value {
        font-size: var(--cd-secondary-size);
        font-weight: 700; color: #212529; line-height: 1.2;
    }

    /* ---- Trend indicators ---- */
    .trend-indicator {
        display: inline-block; font-size: 13px; margin-top: 4px; font-weight: 600;
    }
    .trend-up { color: var(--cd-success); }
    .trend-down { color: var(--cd-danger); }
    .trend-flat { color: var(--cd-neutral); }
    .trend-label { font-size: 11px; color: #9ca3af; margin-top: 2px; }

    /* ---- Chart cards ---- */
    .chart-card {
        background: #fff; border: 1px solid #e9ecef; border-radius: 8px;
        box-shadow: var(--cd-card-shadow); margin-bottom: 16px;
    }
    .chart-card .card-body { padding: 12px 16px; }
    .chart-container { position: relative; }

    /* ---- Budget progress bar ---- */
    .budget-progress { margin-top: 8px; }
    .budget-progress .progress { height: 6px; border-radius: 3px; background: #f1f5f9; }

    /* ---- Skeleton loading ---- */
    .skeleton-card {
        background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px;
        padding: 28px 24px; animation: skeletonPulse 1.5s ease-in-out infinite;
    }
    .skeleton-line {
        background: #e5e7eb; border-radius: 4px; height: 14px; margin-bottom: 8px;
    }
    .skeleton-line.lg { height: 40px; width: 60%; }
    .skeleton-line.sm { width: 40%; }
    .skeleton-card-small {
        background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px;
        padding: 16px; text-align: center; animation: skeletonPulse 1.5s ease-in-out infinite;
    }
    @keyframes skeletonPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    /* ---- Loading overlay ---- */
    .loading-overlay {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center;
        z-index: 10; border-radius: 8px;
    }
    .loading-overlay .spinner-border { width: 1.5rem; height: 1.5rem; }
    .no-data-msg { text-align: center; color: #adb5bd; padding: 60px 0; }
    .no-data-msg i { font-size: 2rem; margin-bottom: 8px; }

    /* ---- Responsive ---- */
    @media (max-width: 1200px) {
        .secondary-metrics { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
        .hero-section { grid-template-columns: 1fr; gap: 16px; }
        .secondary-metrics { grid-template-columns: 1fr; }
    }

/* ===== templates/element/my_customer_step_layout.php ===== */

.customer-step-layout .customer-step-btn-continue { background-color: #20c997; border-color: #20c997; color: #fff; }
.customer-step-layout .customer-step-btn-continue:hover { background-color: #1aa179; border-color: #1aa179; color: #fff; }
.customer-step-layout .btn-outline-teal.customer-step-back,
.customer-step-layout .customer-step-btn-return { background: transparent; border: 1px solid #20c997; color: #20c997; }
.customer-step-layout .btn-outline-teal.customer-step-back:hover,
.customer-step-layout .customer-step-btn-return:hover { background-color: #20c997; border-color: #20c997; color: #fff; }

/* ===== templates/element/my_customer_steps.php ===== */

.nav.nav-progress .nav-item {
  display: block;
  width: 100%;
}

/* Do _not_ remove the bottom border on the last child! */
.nav.nav-progress .nav-link,
.nav.nav-progress span.nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* <- left-aligns the number+label */
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: bold;
  color: #99d5f5;
  text-decoration: none;
  transition: background-color 0.3s;
  /* Allow long labels (e.g. "Recommendations & Package") to wrap inside the
     narrow col-md-3 step rail instead of truncating with an ellipsis. */
  white-space: normal;
  word-break: break-word;
  min-width: 0;

  border-bottom: 2px solid #000; /* <- full-width underline on every item */
}

.nav.nav-progress .nav-link > *,
.nav.nav-progress span.nav-link > * { min-width: 0; }

/* If you had previously disabled the last border, re-enable it: */
.nav.nav-progress .nav-item:last-child .nav-link,
.nav.nav-progress .nav-item:last-child span.nav-link {
  border-bottom: 2px solid #000;
}

.nav.nav-progress .nav-link:hover {
  background-color: #f0f8ff;
}

.nav.nav-progress .nav-link.active,
.nav.nav-progress span.nav-link.active {
  color: #20c997;
}

.nav.nav-progress span.nav-link.locked {
  opacity: 0.78;
  cursor: not-allowed;
}

.nav.nav-progress .num {
  font-weight: 800;
  font-size: 20px;
  margin-right: 10px;
  color: #99d5f5;
}

/* ===== templates/element/ele_profile_common.php ===== */

  .ui-datepicker-trigger{
    width: 25px;
    height: 25px;
    padding-left: 4px;
  }
  input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
  }

/* ===== templates/OnboardingSteps/business-services.php =====
   All rules in this block target the admin OnboardingSteps wizard
   (#smartwizard2). Selectors are scoped so they don't leak onto
   customer-facing pages that share the same Bootstrap classes
   (.card, .nav-progress, .list-group, etc.). */

/* ✅ Allow `.tab-content` to grow naturally */
#smartwizard2 .tab-content {
    flex-grow: 1;
    width: 100%;
    min-height: auto !important; /* Ensures it expands */
    overflow: visible !important; /* Prevents content from getting hidden */
}

/* ✅ Fix `.card-body` expanding issue */
#smartwizard2 .card-body {
    height: auto !important; /* Allow expansion */
    max-height: none !important; /* No restriction */
    overflow: visible !important; /* Ensures all content is shown */
}

/* ✅ Allow `.card` to expand */
#smartwizard2 .card {
    height: auto !important;
    min-height: unset !important; /* Remove unnecessary height restriction */
}

/* ✅ Adjust `.list-group` height dynamically */
#smartwizard2 .list-group {
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ✅ Fix step navigation if causing conflicts */
#smartwizard2 .nav-progress {
    flex-direction: column;
    width: 250px; /* Keep width fixed */
    min-height: 60vh !important; /* Allow flexibility */
    overflow-y: auto; /* Allow scrolling */
}

/* ✅ Debugging Borders (Remove after testing) */
.debug {
    border: 2px solid red !important; /* Debugging border */
}

/* ===== templates/OnboardingSteps/choose-package.php ===== */

    .package-card {
        border: 2px solid #ddd;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        transition: 0.3s;
        background: #fff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        cursor: pointer;
    }
    .package-card:hover, .package-card.selected {
        border-color: #007bff;
        background-color: #f8f9fa;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    .package-header {
        background: #007bff;
        color: #fff;
        padding: 15px;
        border-radius: 10px 10px 0 0;
    }
    .package-price {
        font-size: 24px;
        font-weight: bold;
    }
    .package-features {
        list-style: none;
        padding: 0;
        text-align: left;
    }
    .package-features li {
        padding: 5px 0;
    }

/* ===== templates/OnboardingSteps/index.php =====
   Scoped to #smartwizard2 so the OnboardingSteps wizard rules don't
   collide with the customer wizard rail (templates/element/my_customer_steps.php),
   which uses the same .nav-progress class but lives outside this container. */

/* Fix the left menu width and prevent expansion */
#smartwizard2 .nav-progress {
    flex-direction: column;
    width: 250px; /* Fixed width */
    height: 60vh; /* Full height */
    flex-shrink: 0; /* Prevents resizing based on content */
    overflow-y: auto; /* Only scroll when necessary */
    position: sticky;
    top: 0;
}

/* Ensure step numbers and labels wrap correctly */
#smartwizard2 .nav-progress .nav-link {
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Add '...' for long text */
    padding: 10px;
    font-size: 14px; /* Adjust size to fit */

}

/* Ensure wizard content expands to full width */
#smartwizard2 .tab-content {
    flex-grow: 1;
    width: 100%;
}

/* Make sure progress bar stays horizontal */
#smartwizard2 .progress {
    width: 100%; /* Full width progress bar */
    position: relative;
    margin-top: 10px;
}

/* Fix toolbar position at bottom */
/* Fix toolbar at top */
#toolbar-container {
    width: 100%;
    text-align: center;
    position: relative;
    margin-bottom: 15px;
}

/* Make sure buttons have proper spacing */
#toolbar-container .btn {
    min-width: 100px;
    padding: 10px 20px;
}

#smartwizard2 .nav-progress .nav-item {
  border-bottom: 2px solid #000; /* Adjust thickness/color as needed */
  text-decoration: none !important;
}

.sw-theme-basic > .nav .nav-link::after {
  content: none !important;
  display: none !important;
}

/* ===== templates/OnboardingSteps/photos-media.php ===== */

 .upload-area {
    border: 2px dashed #007bff;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    background: #f8f9fa;
    margin-bottom: 10px;
}
.upload-text {
    color: #007bff;
    font-size: 16px;
}
.select-btn {
    color: #007bff;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}
.preview-area {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.preview-area img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    padding: 2px;
}


/* ===== templates/element/portal/campaign_dashboard_checklist.php ===== */
/* Hero / stepper / next-up panel for the pre-live customer dashboard. */

.dash-hero {
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #5b21b6 0%, #2563eb 55%, #06b6d4 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
}
.dash-hero::before,
.dash-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: .12;
    background: #fff;
    pointer-events: none;
}
.dash-hero::before { width: 220px; height: 220px; top: -80px; right: -60px; }
.dash-hero::after  { width: 140px; height: 140px; bottom: -50px; left: -40px; }
.dash-hero .dash-hero-body { position: relative; padding: 2rem 2rem 2.25rem; }
.dash-hero .dash-hero-icon {
    font-size: 2.4rem; line-height: 1;
    background: rgba(255,255,255,.18);
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    margin-bottom: .75rem;
}
.dash-hero h3 { font-weight: 700; margin: 0 0 .35rem; width: 100%; }
.dash-hero p  { color: rgba(255,255,255,.92); margin: 0 0 1.25rem; width: 100%; }
.dash-hero .btn-light {
    font-weight: 600;
    padding: .55rem 1.25rem;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.dash-hero .badge {
    background: rgba(255,255,255,.18);
    color: #fff;
    font-weight: 500;
    padding: .35rem .8rem;
    border-radius: 999px;
}
.dash-hero-rocket { animation: dashFloat 3.4s ease-in-out infinite; display: inline-block; }
@keyframes dashFloat {
    0%, 100% { transform: translateY(0) rotate(-12deg); }
    50%      { transform: translateY(-6px) rotate(-4deg); }
}

.dash-stepper {
    list-style: none;
    margin: 0; padding: 1.25rem 1rem .25rem;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.dash-stepper::before {
    content: '';
    position: absolute;
    left: 8%; right: 8%;
    top: calc(1.25rem + 22px);
    height: 3px;
    background: #e5e7eb;
    border-radius: 2px;
    z-index: 0;
}
.dash-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}
.dash-step-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #e5e7eb;
    color: #9ca3af;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: all .25s ease;
}
.dash-step.is-done .dash-step-circle {
    background: #10b981; border-color: #10b981; color: #fff;
}
.dash-step.is-current .dash-step-circle {
    background: #fff; border-color: #2563eb; color: #2563eb;
    box-shadow: 0 0 0 6px rgba(37,99,235,.15);
}
.dash-step-label {
    display: block;
    margin-top: .55rem;
    font-size: .82rem;
    color: #6b7280;
    font-weight: 500;
}
.dash-step.is-done .dash-step-label,
.dash-step.is-current .dash-step-label { color: #111827; font-weight: 600; }
.dash-step.is-current .dash-step-label::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 6px;
    background: #2563eb;
    border-radius: 50%;
    animation: dashPulse 1.4s ease-in-out infinite;
}
@keyframes dashPulse {
    0%, 100% { transform: scale(1);   opacity: .9; }
    50%      { transform: scale(1.6); opacity: .35; }
}

.dash-next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 767px) {
    .dash-next-grid { grid-template-columns: 1fr; }
}
.dash-next-item {
    background: #f8fafc;
    border-radius: 10px;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid #eef2f7;
}
.dash-next-item .dash-next-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #ede9fe; color: #6d28d9;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .55rem; font-size: .95rem;
}
.dash-next-item h6 { margin: 0 0 .2rem; font-weight: 600; color: #111827; }
.dash-next-item p  { margin: 0; color: #6b7280; font-size: .85rem; }

@media (max-width: 575px) {
    .dash-step-label { font-size: .72rem; }
    .dash-step-circle { width: 38px; height: 38px; }
    .dash-stepper::before { top: calc(1.25rem + 19px); }
}

/* ===== templates/Customers/setup_complete.php ===== */
/* Reuses .dash-hero / .dash-next-grid from the dashboard checklist for visual
   consistency. These extras style the per-page emoji + 4-tile status row
   that lives only on this page. */

.setup-complete-page .setup-complete-emoji {
    font-size: 3rem;
    line-height: 1;
}
.setup-complete-page .dash-hero h3 { font-size: 1.5rem; }

.setup-complete-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 767px) {
    .setup-complete-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
    .setup-complete-tiles { grid-template-columns: 1fr; }
}
.setup-complete-tile {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 1rem .75rem 1.1rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.setup-complete-tile-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: .35rem;
}
.setup-complete-tile.is-done .setup-complete-tile-icon { color: #22c55e; }
.setup-complete-tile.is-progress .setup-complete-tile-icon {
    color: #2563eb;
    animation: setupCompletePulse 2s ease-in-out infinite;
}
@keyframes setupCompletePulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.setup-complete-tile-label {
    font-weight: 700;
    color: #111827;
    font-size: .92rem;
    margin-bottom: .15rem;
}
.setup-complete-tile-status {
    color: #6b7280;
    font-size: .82rem;
    font-weight: 500;
}
.setup-complete-tile.is-progress .setup-complete-tile-status {
    color: #2563eb;
    font-weight: 600;
}

.setup-complete-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: .25rem;
}
.setup-complete-cta {
    padding: 12px 32px;
    border-radius: 10px;
    font-weight: 700;
    min-width: 220px;
}
@media (max-width: 480px) {
    .setup-complete-cta { width: 100%; min-width: 0; }
}

/* --------------------------------------------------------------------
 * Bootstrap tooltip width cap.
 *
 * Bootstrap's default .tooltip allows the inner content to grow to the
 * Popper-calculated max-width (often the full viewport width for short
 * lines, which produces awkward single-line stretched bubbles). On the
 * customer portal pages the visual result was tooltips that span half
 * the page for one-sentence help text.
 *
 * Capping max-width keeps tooltips readable (multi-line when content
 * is long, narrow when content is short) and looks polished in the
 * recorded demo. Bootstrap's own white-space: normal already lets
 * .tooltip-inner wrap once a width is set.
 * -------------------------------------------------------------------- */
.tooltip { max-width: 260px !important; }
.tooltip .tooltip-inner {
    max-width: 260px;
    text-align: left;
    line-height: 1.35;
    padding: 0.4rem 0.6rem;
}