.calc-wrap {
        margin: 40px auto 80px;
        padding:  16px;
        background-color: #ffff;
      }

      .page-title {
        text-align: center;
        font-weight: 700;
        margin-bottom: 20px;
        color: #111827;
      }
      .page-sub {
        text-align: center;
        color: #6b7280;
        margin-bottom: 32px;
        font-weight: 600;
      }

      /* Stepper */
      .stepper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 20px 0 30px;
        position: relative;
        overflow-x: auto;
      }
      .stepper .line {
        flex: 1;
        height: 3px;
        background: #e5e7eb;
        position: relative;
        top: 0;
      }
      .stepper .line .line-fill {
        position: absolute;
        inset: 0;
        width: 0%;
        background: #d3a74e;
        transition: width 0.3s ease;
      }
      .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 120px;
      }
      .step .dot {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 2px solid #e5e7eb;
        background: #fff;
        display: grid;
        place-items: center;
        font-weight: 700;
        color: #111827;
        position: relative;
        transition: all 0.2s ease;
      }
      .step.active .dot {
        border-color: #d3a74e;
        box-shadow: 0 0 0 3px rgba(211, 167, 78, 0.15);
      }
      .step.done .dot {
        border-color: #10b981;
        background: #ecfdf5;
        color: #10b981;
      }
      .step .label {
        margin-top: 8px;
        font-weight: 700;
        color: #111827;
        font-size: 14px;
      }
      .step.done .label {
        color: #10b981;
      }
      .step.active .label {
        color: #d3a74e;
      }

      /* الخطوات */
      .panel {
        padding: 28px;
        display: none;
      }
      .panel.show {
        display: block;
      }

      /* خيارات التصميم: دوائر كبيرة */
      .design-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
      }
      @media (max-width: 992px) {
        .design-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 576px) {
        .design-grid {
          grid-template-columns: 1fr;
        }
      }
      .design-option {
        position: relative;
        aspect-ratio: 1/1;
        border-radius: 999px;
        background: #f3f4f6;
        border: 2px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
      }
      .design-option i {
        font-size: 52px;
        color: #111827;
      }
      .design-option .title {
        font-weight: 700;
        color: #111827;
      }
      .design-option .hint {
        font-weight: 600;
        color: #6b7280;
        text-align: center;
        font-size: 14px;
      }
      .design-option:hover {
        transform: translateY(-2px);
      }
      .design-option.active {
        background: #ece6d6; /* ذهبي باهت */
        border-color: #111827;
      }
      .design-option .tick {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: #111827;
        color: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }
      .design-option.active .tick {
        display: flex;
      }

      /* خيارات المشروع */
      .project-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      @media (max-width: 768px) {
        .project-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .design-option {
        aspect-ratio: 2/1;
                  
              }
      }
      @media (max-width: 576px) {
        .project-grid {
          grid-template-columns: 1fr;
        }
      }
      .project-option {
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 16px;
        background: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.2s ease;
      }
      .project-option i {
        font-size: 22px;
        color: #111827;
      }
      .project-option.active {
        border-color: #d3a74e;
        box-shadow: 0 6px 14px rgba(211, 167, 78, 0.18);
      }
      .project-option .title-calc {
        font-weight: 700;
      }
      .project-option .price {
        font-size: 13px;
        color: #6b7280;
      }

      /* أزرار اختيار المساحة */
      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }
      .chip {
        border: 1px solid #e5e7eb;
        background: #fff;
        color: #111827;
        padding: 10px 16px;
        border-radius: 999px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .chip:hover {
        transform: translateY(-1px);
      }
      .chip.active {
        background: #d3a74e ;
        color: #fff;
        border-color: #d3a74e;
        box-shadow: 0 6px 14px rgba(211, 167, 78, 0.25);
      }
      .custom-area {
        max-width: 220px;
        margin-top: 20px;
      }

      /* النتائج */
      .summary {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 16px;
      }
      .summary .row + .row {
        border-top: 1px dashed #e5e7eb;
        margin-top: 10px;
        padding-top: 10px;
      }
      .summary .total {
        font-size: 22px;
        font-weight: 800;
        color: #111827;
      }

      /* أزرار التحكم */
      .actions {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-top: 22px;
      }
      .btn-brand {
        background: #d3a74e;
        color: #fff;
        border: none;
        font-weight: 700;
      }
      .btn-brand:hover {
        background: #d3a74e;
        color: #fff;
      }
      .btn-ghost {
        background: #111827;
        color: #fff;
        border: none;
        font-weight: 700;
      }
      .btn-ghost:hover {
        background: #000;
        color: #fff;
      }
      .btn[disabled] {
        opacity: 0.4;
        pointer-events: none;
      }