/**
 * House Configurator - Frontend Styles
 * Premium Design - 1400x860 Image Dimensions
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
  --hc-primary: #1a365d;
  --hc-primary-dark: #0d1f3c;
  --hc-primary-light: #2c5282;
  --hc-accent: #ed8936;
  --hc-accent-dark: #dd6b20;
  --hc-success: #38a169;
  --hc-error: #e53e3e;
  --hc-white: #ffffff;
  --hc-gray-50: #f7fafc;
  --hc-gray-100: #edf2f7;
  --hc-gray-200: #e2e8f0;
  --hc-gray-300: #cbd5e0;
  --hc-gray-400: #a0aec0;
  --hc-gray-500: #718096;
  --hc-gray-600: #4a5568;
  --hc-gray-700: #2d3748;
  --hc-gray-800: #1a202c;
  --hc-gray-900: #171923;
  --hc-radius: 0;
  --hc-radius-sm: 0;
  --hc-radius-lg: 0;
  --hc-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --hc-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --hc-shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --hc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --hc-font:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ast-single-post.ast-page-builder-template .site-main > article,
.ast-page-builder-template .post-navigation {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
/* ============================================
   Base Container
   ============================================ */
.hc-configurator {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--hc-font);
  color: var(--hc-gray-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hc-configurator *,
.hc-configurator *::before,
.hc-configurator *::after {
  box-sizing: border-box;
}

/* ============================================
   Main Container - Fixed Full Screen
   ============================================ */
#hc-main {
  position: fixed;
  top: 91px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 81px);
  overflow: hidden;
  background: var(--hc-white);
  z-index: 9;
}

/* ============================================
   Loading State
   ============================================ */
.hc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  background: linear-gradient(
    135deg,
    var(--hc-gray-50) 0%,
    var(--hc-gray-100) 100%
  );
  border-radius: var(--hc-radius-lg);
}

.hc-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--hc-gray-200);
  border-top-color: var(--hc-primary);
  border-radius: 50%;
  animation: hc-spin 0.8s linear infinite;
}

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

.hc-loading p {
  margin: 16px 0 0;
  color: var(--hc-gray-500);
  font-size: 14px;
}

/* ============================================
   Main Layout
   ============================================ */
.hc-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  background: var(--hc-white);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .hc-layout {
    grid-template-columns: 1fr;
  }
}

/* Panel Left Layout - Options on left, preview on right */
.hc-panel-left .hc-layout {
  grid-template-columns: 420px 1fr;
}

.hc-panel-left .hc-preview-panel {
  order: 2;
}

.hc-panel-left .hc-options-panel {
  order: 1;
}

@media (max-width: 1200px) {
  .hc-panel-left .hc-layout {
    grid-template-columns: 1fr;
  }

  .hc-panel-left .hc-preview-panel {
    order: 1;
  }

  .hc-panel-left .hc-options-panel {
    order: 2;
  }
}

/* ============================================
   Preview Panel
   ============================================ */
.hc-preview-panel {
  background: var(--hc-gray-100);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}

.hc-preview-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.hc-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: opacity 0.4s ease;
}

.hc-base-layer {
  z-index: 1;
}

.hc-layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.hc-layers img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hc-layers img.loading {
  opacity: 0;
}

.hc-layers img.active {
  opacity: 1;
}

.hc-layers img.fade-out {
  opacity: 0;
}

/* Layer Loading Indicator */
.hc-layer-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.hc-layer-loader.visible {
  opacity: 1;
  visibility: visible;
}

.hc-layer-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--hc-primary);
  border-radius: 50%;
  animation: hc-layer-spin 0.8s linear infinite;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

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

/* ============================================
   Options Panel
   ============================================ */
.hc-options-panel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid var(--hc-gray-200);
  background: var(--hc-white);
}

/* ============================================
   Progress Steps
   ============================================ */
.hc-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hc-gray-200);
  flex-shrink: 0;
}

.hc-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.hc-step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hc-gray-200);
  color: var(--hc-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  transition: var(--hc-transition);
}

.hc-step-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--hc-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--hc-transition);
}

.hc-progress-step.active .hc-step-number {
  background: var(--hc-primary);
  color: var(--hc-white);
  box-shadow: 0 0 0 4px rgba(26, 54, 93, 0.2);
}

.hc-progress-step.active .hc-step-label {
  color: var(--hc-primary);
}

.hc-progress-step.completed .hc-step-number {
  background: var(--hc-success);
  color: var(--hc-white);
}

.hc-progress-step.completed .hc-step-label {
  color: var(--hc-success);
}

.hc-progress-line {
  width: 50px;
  height: 2px;
  background: var(--hc-gray-200);
  margin: 0 8px 24px;
  transition: var(--hc-transition);
}

.hc-progress-line.completed {
  background: var(--hc-success);
}

/* ============================================
   Step Content - Scrollable
   ============================================ */
.hc-step {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  min-height: 0;
}

.hc-step-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--hc-gray-900);
}

.hc-step-description {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--hc-gray-500);
}

/* ============================================
   Dimensions Form (Step 1)
   ============================================ */
.hc-dimensions-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.hc-dimension-input label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hc-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hc-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.hc-input-group input {
  width: 100%;
  padding: 14px 50px 14px 16px;
  border: 2px solid var(--hc-gray-200);
  border-radius: var(--hc-radius-sm);
  font-size: 18px;
  font-weight: 600;
  color: var(--hc-gray-800);
  transition: var(--hc-transition);
  -moz-appearance: textfield;
}

.hc-input-group input::-webkit-outer-spin-button,
.hc-input-group input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hc-input-group input:focus {
  outline: none;
  border-color: var(--hc-primary);
  box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
}

.hc-input-unit {
  position: absolute;
  right: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hc-gray-400);
}

.hc-input-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--hc-gray-400);
}

/* Area Display */
.hc-area-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: linear-gradient(
    135deg,
    var(--hc-primary) 0%,
    var(--hc-primary-light) 100%
  );
  border-radius: var(--hc-radius);
  color: var(--hc-white);
}

.hc-area-label {
  font-size: 14px;
  opacity: 0.8;
}

.hc-area-value {
  font-size: 28px;
  font-weight: 700;
}

.hc-area-unit {
  font-size: 14px;
  opacity: 0.8;
}

/* ============================================
   Tabs (Step 2)
   ============================================ */
.hc-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--hc-gray-100);
  border-radius: var(--hc-radius-sm);
}

.hc-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--hc-gray-500);
  cursor: pointer;
  transition: var(--hc-transition);
}

.hc-tab:hover {
  background: var(--hc-white);
  color: var(--hc-primary);
}

.hc-tab.active {
  background: var(--hc-white);
  color: var(--hc-primary);
  box-shadow: var(--hc-shadow);
}

.hc-tab-icon {
  font-size: 16px;
}

/* Tab Checkmark (completed indicator) */
.hc-tab-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--hc-success);
  color: var(--hc-white);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

/* ============================================
   Options Groups (Step 2)
   ============================================ */
.hc-options-container {
  flex: 1;
  overflow-y: auto;
}

.hc-option-group {
  margin-bottom: 0;
  border-bottom: 1px solid var(--hc-gray-200);
}

.hc-option-group:last-child {
  border-bottom: none;
}

/* Accordion Header */
.hc-accordion-header {
    display: flex;
    align-items: normal;
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    gap: 12px;
}

/* Group Completion Check Icon */
.hc-group-check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--hc-gray-300);
    transition: color 0.3s ease, transform 0.3s ease;
    margin-top: 1px;
}

.hc-group-check-icon svg {
  width: 20px;
  height: 20px;
}

/* Completed state - highlighted icon */
.hc-accordion-header.hc-group-completed .hc-group-check-icon {
  color: var(--hc-primary);
}

/* Optional: add a subtle animation when completing */
.hc-accordion-header.hc-group-completed .hc-group-check-icon {
  animation: hc-check-pop 0.3s ease;
}

@keyframes hc-check-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.hc-accordion-title-wrap {
  flex: 1;
}

.hc-option-group-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--hc-gray-800);
  text-transform: none;
  letter-spacing: 0;
}

.hc-accordion-subtitle {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--hc-gray-500);
}

.hc-accordion-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--hc-gray-400);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s ease;
    margin-top: 1px;
}

.hc-accordion-header.hc-accordion-open .hc-accordion-arrow {
  transform: rotate(90deg);
  color: var(--hc-primary);
}

/* Accordion Content */
.hc-accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hc-accordion-content.hc-accordion-open {
  max-height: 2000px;
  padding-bottom: 20px;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
}

/* Animate choices appearing */
.hc-accordion-content .hc-option-choice {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.hc-accordion-content.hc-accordion-open .hc-option-choice {
  opacity: 1;
  transform: scale(1);
}

/* Staggered animation for choices */
.hc-accordion-content.hc-accordion-open .hc-option-choice:nth-child(1) {
  transition-delay: 0.05s;
}
.hc-accordion-content.hc-accordion-open .hc-option-choice:nth-child(2) {
  transition-delay: 0.1s;
}
.hc-accordion-content.hc-accordion-open .hc-option-choice:nth-child(3) {
  transition-delay: 0.15s;
}
.hc-accordion-content.hc-accordion-open .hc-option-choice:nth-child(4) {
  transition-delay: 0.2s;
}
.hc-accordion-content.hc-accordion-open .hc-option-choice:nth-child(5) {
  transition-delay: 0.25s;
}
.hc-accordion-content.hc-accordion-open .hc-option-choice:nth-child(6) {
  transition-delay: 0.3s;
}
.hc-accordion-content.hc-accordion-open .hc-option-choice:nth-child(7) {
  transition-delay: 0.35s;
}
.hc-accordion-content.hc-accordion-open .hc-option-choice:nth-child(8) {
  transition-delay: 0.4s;
}

.hc-required-mark {
  color: #dc3545;
  margin-left: 4px;
  font-weight: 700;
}

/* Choice Tooltip */
.hc-choice-tooltip {
  position: fixed;
  z-index: 99999;
  width: 220px;
  padding: 10px 14px;
  background: #333333;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: #ffffff;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s;
}

.hc-choice-tooltip.hc-tooltip-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Tooltip arrow indicator */
.hc-choice-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333333;
}

/* Move arrow to left for first item tooltip */
.hc-choice-tooltip.hc-tooltip-first-item::after {
  left: 35px;
  transform: translateX(0);
}

.hc-option-choices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

/* Subgroup Header */
.hc-subgroup-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--hc-gray-500);
  text-transform: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
  grid-column: 1 / -1;
}

.hc-subgroup-header:first-child {
  margin-top: 0;
}

/* Subgroup Choices Container */
.hc-subgroup-choices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

/* Dynamic column classes based on item count */
.hc-subgroup-choices.hc-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.hc-subgroup-choices.hc-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* Icon-only subgroup displays horizontally */
.hc-subgroup-choices.hc-has-icons {
  /* Inherits column count from hc-cols-4 or hc-cols-5 */
}

.hc-option-choice {
  position: relative;
}

.hc-option-choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hc-option-choice label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: var(--hc-transition);
  position: relative;
}

.hc-option-choice:hover label {
  border-color: var(--hc-gray-300);
}

.hc-option-choice input:checked + label {
  border-color: var(--hc-primary);
}

/* Checkmark for selected item */
.hc-option-choice input:checked + label::after {
    content: "✓";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: var(--hc-success);
    color: var(--hc-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Hide radio button and checkbox appearance */
.hc-choice-radio,
.hc-choice-checkbox {
  display: none;
}

.hc-choice-preview {
  width: 48px;
  height: 30px;
  border-radius: 0;
  overflow: hidden;
  background: var(--hc-gray-200);
  flex-shrink: 0;
}

.hc-choice-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Choice Icon (for custom icons) */
.hc-choice-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}

.hc-choice-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 50px;
  object-fit: contain;
}

/* Placeholder icon when no image is set */
.hc-placeholder-icon {
  width: 50px;
  height: 50px;
  background: var(--hc-gray-100);
  border: 1px dashed var(--hc-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-placeholder-icon svg {
  width: 24px;
  height: 24px;
  color: var(--hc-gray-400);
}

/* Icon-only choices (when label is hidden) */
.hc-icon-only label {
  padding: 2px;
}

.hc-choice-text {
  font-size: 10px;
  font-weight: 500;
  color: var(--hc-gray-700);
  text-align: center;
  word-break: break-word;
  width: 100%;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   Customer Form (Step 3)
   ============================================ */
.hc-customer-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hc-form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hc-gray-700);
}

.hc-form-row .required {
  color: var(--hc-error);
}

.hc-form-row input,
.hc-form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--hc-gray-200);
  border-radius: var(--hc-radius-sm);
  font-size: 15px;
  color: var(--hc-gray-800);
  transition: var(--hc-transition);
  font-family: inherit;
}

.hc-form-row input:focus,
.hc-form-row textarea:focus {
  outline: none;
  border-color: var(--hc-primary);
  box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
}

.hc-form-row input::placeholder,
.hc-form-row textarea::placeholder {
  color: var(--hc-gray-400);
}

.hc-form-row textarea {
  resize: vertical;
  min-height: 100px;
}

.hc-form-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ============================================
   Navigation Buttons
   ============================================ */
.hc-navigation {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--hc-gray-200);
  flex-shrink: 0;
  background: var(--hc-white);
}

.hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--hc-radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--hc-transition);
  font-family: inherit;
}

.hc-btn-primary {
  background: linear-gradient(
    135deg,
    var(--hc-primary) 0%,
    var(--hc-primary-light) 100%
  );
  color: var(--hc-white);
  flex: 1;
}
.hc-btn-primary:focus {
    color: #fff !important;
}
.hc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 54, 93, 0.3);
}

.hc-btn-primary:active {
  transform: translateY(0);
}

.hc-btn-secondary, .hc-btn-secondary:focus {
  background: var(--hc-gray-100);
  color: var(--hc-gray-700);
}

.hc-btn-secondary:hover {
  background: var(--hc-gray-200);
}

.hc-btn-submit {
  background: linear-gradient(135deg, var(--hc-success) 0%, #2f855a 100%);
}

.hc-btn-submit:hover {
  box-shadow: 0 4px 12px rgba(56, 161, 105, 0.3);
}

.hc-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.hc-btn-icon {
  font-size: 16px;
}

/* ============================================
   Success State
   ============================================ */
.hc-success {
  text-align: center;
  padding: 80px 40px;
  background: linear-gradient(
    135deg,
    var(--hc-gray-50) 0%,
    var(--hc-white) 100%
  );
  border-radius: var(--hc-radius-lg);
  box-shadow: var(--hc-shadow-xl);
}

.hc-success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, var(--hc-success) 0%, #2f855a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--hc-white);
  animation: hc-bounce 0.5s ease;
}

@keyframes hc-bounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.hc-success h2 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: var(--hc-gray-900);
}

.hc-success p {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--hc-gray-600);
}

.hc-reference {
  margin: 32px 0;
  padding: 24px;
  background: var(--hc-gray-100);
  border-radius: var(--hc-radius);
}

.hc-reference-label {
  display: block;
  font-size: 13px;
  color: var(--hc-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.hc-reference-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--hc-primary);
  letter-spacing: 2px;
}

/* ============================================
   Error Message
   ============================================ */
.hc-message {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 48px 14px 20px;
  border-radius: var(--hc-radius-sm);
  box-shadow: var(--hc-shadow-lg);
  z-index: 1000;
  animation: hc-slide-up 0.3s ease;
}

@keyframes hc-slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.hc-message-error {
  background: var(--hc-error);
  color: var(--hc-white);
}

.hc-message-text {
  font-size: 14px;
  font-weight: 500;
}

.hc-message-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.hc-message-close:hover {
  color: var(--hc-white);
}
.hc-step h2 {
    font-size: 18px;
}
/*end desktop*/
/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1200px) {
  #hc-main {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 80px);
    overflow: hidden;
  }

  .hc-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .hc-preview-panel {
    position: relative;
    height: 30vh;
    min-height: 180px;
    max-height: 280px;
    padding: 0;
    flex-shrink: 0;
  }

  .hc-options-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--hc-gray-200);
    overflow: hidden;
  }

  .hc-progress {
    display: none;
  }

  .hc-step {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
  }

  .hc-navigation {
    flex-shrink: 0;
    padding-top: 10px;
    background: var(--hc-white);
    border-top: 1px solid var(--hc-gray-200);
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .hc-preview-panel {
    height: 28vh;
    min-height: 160px;
    max-height: 220px;
  }

  /* Position image to show top part (roof) */
  .hc-base-layer,
  .hc-layers img {
    object-position: center top;
  }

  .hc-options-panel {
    padding: 16px;
  }

  /* 4 columns on mobile */
  .hc-option-choices,
  .hc-subgroup-choices,
  .hc-subgroup-choices.hc-cols-4,
  .hc-subgroup-choices.hc-cols-5 {
    grid-template-columns: repeat(4, 1fr);
  }

  .hc-dimensions-form {
    grid-template-columns: 1fr;
  }

  .hc-form-row-half {
    grid-template-columns: 1fr;
  }

  .hc-navigation {
    flex-direction: row-reverse;
    gap: 10px;
  }

  .hc-navigation .hc-btn {
    flex: 1;
  }

  /* Hide tooltip on mobile */
  .hc-choice-tooltip {
    display: none !important;
  }
}

/* ============================================
   Scrollbar Styling
   ============================================ */
.hc-step::-webkit-scrollbar,
.hc-options-container::-webkit-scrollbar {
  width: 6px;
}

.hc-step::-webkit-scrollbar-track,
.hc-options-container::-webkit-scrollbar-track {
  background: var(--hc-gray-100);
  border-radius: 0;
}

.hc-step::-webkit-scrollbar-thumb,
.hc-options-container::-webkit-scrollbar-thumb {
  background: var(--hc-gray-300);
  border-radius: 0;
}

.hc-step::-webkit-scrollbar-thumb:hover,
.hc-options-container::-webkit-scrollbar-thumb:hover {
  background: var(--hc-gray-400);
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .hc-configurator {
    box-shadow: none;
  }

  .hc-navigation,
  .hc-tabs,
  .hc-progress {
    display: none;
  }
}