#order-confirmation-view-scoped {
  /* Scope Variables */
  --co-bg: #f6f9f8;
  --co-card-bg: #ffffff;
  --co-text-main: #1a1d20;
  --co-text-muted: #8a94a0;
  --co-border: #e5e7eb;
  --co-btn-dark: #1e293b;
  --co-btn-blue: #2563eb;
  --co-success: #10b981;
  --co-success-bg: #f0fdf4;

  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--co-bg);
  color: var(--co-text-main);
  min-height: 100vh;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;

  /* Nested Box Sizing Reset */
  & *, & *::before, & *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .confirmation-container {
    width: 100%;
    max-width: 1100px;
  }

  /* --- Progress Stepper --- */
  .stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
  }

  .step {
    display: flex;
    align-items: center;
    gap: 8px;

    .step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--co-text-muted);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
    }

    .step-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--co-text-muted);
    }

    &.completed {
      .step-num {
        background: #e2e8f0;
        color: #475569;
      }
      .step-label {
        color: var(--co-text-main);
      }
    }
  }

  .step-line {
    height: 2px;
    width: 50px;
    background: var(--co-border);
    margin: 0 10px;

    &.active {
      background: #cbd5e1;
    }
  }

  /* --- Success Banner Header --- */
  .success-banner-card {
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .success-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--co-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--co-text-main);
  }

  .main-title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
  }

  .subtitle {
    font-size: 14px;
    color: var(--co-text-muted);
    margin-bottom: 24px;
  }

  .order-id-badge {
    background: var(--co-btn-dark);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 30px;
    letter-spacing: 0.5px;
    margin-bottom: 16px;

    .order-id-text {
      color: #ffffff;
    }
  }

  .email-notice {
    font-size: 11px;
    color: var(--co-text-muted);

    .email-highlight {
      color: #64748b;
      font-weight: 500;
    }
  }

  /* --- Layout Split Columns --- */
  .main-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
    align-items: start;
  }

  .card {
    background: var(--co-card-bg);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.01);
    margin-bottom: 24px;
  }

  .card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--co-text-main);
  }

  /* --- Left Column: Ordered Items List --- */
  .items-list {
    display: flex;
    flex-direction: column;
  }

  .item-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
  }

  .item-divider {
    border: none;
    border-top: 1px solid var(--co-border);
    margin: 10px 0;
  }

  .item-img-wrapper {
    width: 60px;
    height: 60px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .item-image {
    max-width: 85%;
    object-fit: contain;
  }

  .item-info {
    flex-grow: 1;

    .item-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--co-text-main);
      margin-bottom: 4px;
    }

    .item-ref {
      font-size: 11px;
      color: var(--co-text-muted);
      letter-spacing: 0.3px;
    }
  }

  .item-qty-price {
    display: flex;
    align-items: center;
    gap: 30px;

    .item-qty {
      font-size: 12px;
      color: var(--co-text-muted);
      strong { color: var(--co-text-main); }
    }

    .item-price {
      font-size: 14px;
      font-weight: 700;
      min-width: 60px;
      text-align: right;
    }
  }

  /* --- Left Column: Info Grid Module --- */
  .info-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
  }

  .info-block {
    h3 {
      font-size: 11px;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
    }

    p {
      font-size: 13px;
      color: var(--co-text-muted);
      line-height: 1.6;
    }

    .user-name {
      font-weight: 700;
      color: var(--co-text-main);
      margin-bottom: 2px;
    }

    .phone-number {
      margin-top: 8px;
    }
  }

  .gap-blocks {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .icon-text-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;

    svg {
      color: var(--co-text-main);
      flex-shrink: 0;
    }

    .delivery-date {
      color: #334155;
    }
  }

  /* --- Right Column: Financial Block --- */
  .price-breakdown {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-bottom: 1px solid var(--co-border);
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .price-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    color:#777e8f;
  }

  .free-text {
    color: #334155;
    font-weight: 600;
  }

  .total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    span:first-child {
      font-size: 14px;
      font-weight: 600;
      color: #202224; /* Soft contrast style mimic */
    }
  }

  .total-price {
    font-size: 22px;
    font-weight: 800;
  }

  /* --- Actions Panel --- */
  .action-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--co-border);
    padding-bottom: 24px;
    margin-bottom: 20px;
  }

  .btn-track-order {
    width: 100%;
    background: var(--co-btn-blue);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    padding: 15px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s;

    &:hover { background: #1d4ed8; }
  }

  .btn-continue-shopping {
    width: 100%;
    background: var(--co-btn-dark);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s;

    &:hover { background: #0f172a; }
  }

  /* --- Support Segment Footer --- */
  .support-footer {
    text-align: center;
    
    p {
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .support-link {
      font-size: 12px;
      font-weight: 700;
      color: var(--co-text-main);
      text-decoration: none;
    }
  }

  /* --- Responsive Viewports --- */
  @media (max-width: 850px) {
    .main-layout {
      grid-template-columns: 1fr;
    }
    .info-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
  }
}

/* ==========================================================================
   📱 COMPACT & RESPONSIVE MEDIA QUERIES FOR ORDER CONFIRMATION VIEW
   ========================================================================== */

#order-confirmation-view-scoped {
    /* Tablet & Smaller Laptops (Max Width: 968px) */
    @media screen and (max-width: 968px) {
        padding: 20px 15px;

        .main-layout {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .card {
            padding: 20px;
            border-radius: 16px;
        }
    }

    /* Mobile Devices (Max Width: 768px) */
    @media screen and (max-width: 768px) {
        padding: 12px 8px;

        .stepper {
            margin-bottom: 20px;
            overflow-x: auto;
            justify-content: flex-start;
            padding-bottom: 4px;
        }

        .step-line {
            width: 25px;
            margin: 0 6px;
        }

        .success-banner-card {
            padding: 24px 14px;
        }

        .success-icon-wrapper {
            width: 48px;
            height: 48px;
            margin-bottom: 14px;
        }

        .main-title {
            font-size: 20px;
            margin-bottom: 6px;
        }

        .subtitle {
            font-size: 13px;
            margin-bottom: 16px;
        }

        .order-id-badge {
            font-size: 11px;
            padding: 8px 16px;
            margin-bottom: 12px;
        }

        .card {
            padding: 14px;
            border-radius: 12px;
            margin-bottom: 16px;
        }

        .card-title {
            font-size: 15px;
            margin-bottom: 14px;
        }

        .item-row {
            gap: 12px;
            padding: 8px 0;
        }

        .item-img-wrapper {
            width: 50px;
            height: 50px;
            border-radius: 10px;
        }

        .item-info .item-name {
            font-size: 13px;
        }

        .item-qty-price {
            gap: 16px;
        }

        .item-qty-price .item-price {
            font-size: 13px;
            min-width: 50px;
        }

        .info-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .gap-blocks {
            gap: 16px;
        }

        .price-breakdown {
            gap: 10px;
            padding-bottom: 14px;
            margin-bottom: 14px;
        }

        .price-row, .total-row span:first-child {
            font-size: 12px;
        }

        .total-row {
            margin-bottom: 20px;
        }

        .total-price {
            font-size: 18px;
        }

        .action-group {
            gap: 10px;
            padding-bottom: 16px;
            margin-bottom: 16px;
        }

        .btn-track-order, 
        .btn-continue-shopping {
            padding: 12px;
            font-size: 13px;
            border-radius: 10px;
        }
    }

    /* Extra Small Mobile Devices (Max Width: 480px) */
    @media screen and (max-width: 480px) {
        padding: 8px 4px;

        .success-banner-card {
            padding: 18px 10px;
        }

        .success-icon-wrapper {
            width: 40px;
            height: 40px;
            border-width: 2px;
            margin-bottom: 10px;
        }

        .main-title {
            font-size: 18px;
        }

        .subtitle {
            font-size: 12px;
            margin-bottom: 12px;
        }

        .card {
            padding: 12px;
            border-radius: 10px;
        }

        .step-label {
            font-size: 10px;
        }

        .step-num {
            width: 20px;
            height: 20px;
            font-size: 9px;
        }

        .item-img-wrapper {
            width: 42px;
            height: 42px;
            border-radius: 8px;
        }

        .item-info .item-name {
            font-size: 12px;
        }

        .item-info .item-ref {
            font-size: 10px;
        }

        .total-price {
            font-size: 16px;
        }
    }
}