/* =========================================
     intl-tel-input integration
     ========================================= */
  .iti {
    width: 100%;
    display: block;
  }
  .iti input[type="tel"] {
    width: 100% !important;
  }
  .iti__country-list {
    z-index: 999999 !important;
  }

  .iti__flag-container {
    display: flex !important;
    align-items: center;
  }
  .iti__selected-country {
    padding: 0 12px !important;
    min-width: 92px;
  }
  /* Separate dial code: modest padding so digits are closer to the code */
  .iti--separate-dial-code input[type="tel"] {
    padding-left: 100px !important;
  }

  /* =========================================
     Form shell padding (applies to all steps)
     ========================================= */
  .pr-order-form {
    padding: 24px 40px 28px; /* wider left/right for the whole card */
  }

  /* =========================================
     CONTACT STEP (step 1) layout tweaks
     ========================================= */

  .pr-step-panel[data-step="1"][data-step-auth="guest"] .pr-grid {
    row-gap: 24px;
    column-gap: 80px; /* wide gap between columns */
  }

  .pr-step-panel[data-step="1"][data-step-auth="guest"] .pr-field.pr-field-full {
    grid-column: 1 / -1; /* mobile: full width */
  }

  

  .pr-step-panel[data-step="1"][data-step-auth="guest"] .pr-email-send-row {
    margin-top: 10px;
  }

  .pr-step-panel[data-step="1"][data-step-auth="guest"]
  .pr-email-send-row [data-send-email-code] {
    width: auto;
    padding-inline: 18px;
  }

  .pr-step-panel[data-step="1"][data-step-auth="guest"]
  [data-send-email-code] {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #ffffff;
    border: none;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(22, 163, 74, 0.35);
  }

  .pr-step-panel[data-step="1"][data-step-auth="guest"]
  [data-send-email-code]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.4);
  }

  .pr-step-panel[data-step="1"][data-step-auth="guest"]
  [data-send-email-code]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
  }

  .pr-step-panel[data-step="1"][data-step-auth="guest"] .pr-code-input-wrap {
    display: block;
    width: 100%;
  }

  .pr-step-panel[data-step="1"][data-step-auth="guest"]
  .pr-code-input-wrap input[name="email_code"] {
    width: 100%;
  }

  .pr-step-panel[data-step="1"][data-step-auth="guest"] .pr-code-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    justify-content: flex-start;
  }

  .pr-step-panel[data-step="1"][data-step-auth="guest"]
  .pr-code-actions [data-verify-email-code],
  .pr-step-panel[data-step="1"][data-step-auth="guest"]
  .pr-code-actions [data-resend-email-code] {
    width: auto;
  }

  /* Apply the same “subtle + professional” input styling to Contact + Phone + Requirements */
.pr-step-panel[data-step="1"] .pr-field input,
.pr-step-panel[data-step="1"] .pr-field select,
.pr-step-panel[data-step="1"] .pr-field textarea,
.pr-step-panel[data-step="2"] .pr-field input,
.pr-step-panel[data-step="2"] .pr-field select,
.pr-step-panel[data-step="2"] .pr-field textarea,
.pr-step-panel[data-step="3"] .pr-field input,
.pr-step-panel[data-step="3"] .pr-field select,
.pr-step-panel[data-step="3"] .pr-field textarea {
  border-width: 2px;
  border-color: rgba(15, 23, 42, 0.24);
  border-radius: 14px;               /* makes it match the “pill-ish” look */
  padding: 14px 16px;                /* consistent height */
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pr-step-panel[data-step="1"] .pr-field input:focus,
.pr-step-panel[data-step="1"] .pr-field select:focus,
.pr-step-panel[data-step="1"] .pr-field textarea:focus,
.pr-step-panel[data-step="2"] .pr-field input:focus,
.pr-step-panel[data-step="2"] .pr-field select:focus,
.pr-step-panel[data-step="2"] .pr-field textarea:focus,
.pr-step-panel[data-step="3"] .pr-field input:focus,
.pr-step-panel[data-step="3"] .pr-field select:focus,
.pr-step-panel[data-step="3"] .pr-field textarea:focus {
  border-color: rgba(2, 132, 199, 0.6);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.20);
  outline: none;
}
  /* name=assets/css/Resume/frontend/custom_order.css (or in the view <style>) */

/* Default: full width on mobile */
.pr-field-half-md { grid-column: 1 / -1; }

/* Desktop: 2-column grid => make it one column */
@media (min-width: 768px) {
  .pr-field-half-md { grid-column: auto; }
}
  
  /* =========================================
   Premium centering + tighter layout for guest steps (desktop)
   Applies only to Step 1 (Email) and Step 2 (Phone)
   ========================================= */

/* Center the whole step content and reduce width */
.pr-step-narrow {
  width: 100%;
}

@media (min-width: 1024px) {
  .pr-step-narrow {
    max-width: 720px;         /* reduced “card content” width */
    margin-inline: auto;      /* centers the content */
  }
}

/* Make step panels feel less stretched */
@media (min-width: 1024px) {
  .pr-step-panel[data-step="1"],
  .pr-step-panel[data-step="2"] {
    padding-top: 10px;
  }
}

/* On Step 1, your current pr-grid is using a big 80px column gap.
   For a single centered column design, reduce it. */
@media (min-width: 1024px) {
  .pr-step-panel[data-step="1"] .pr-grid,
  .pr-step-panel[data-step="2"] .pr-grid {
    column-gap: 28px;
  }
}

/* Make Email/Phone fields a clean single column in these steps (desktop) */
@media (min-width: 1024px) {
  .pr-step-panel[data-step="1"] .pr-grid,
  .pr-step-panel[data-step="2"] .pr-grid {
    grid-template-columns: 1fr; /* force one column */
  }
}

/* Buttons row: align nicely */
.pr-panel-actions-narrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 1024px) {
  .pr-panel-actions-narrow {
    max-width: 720px;
    margin-inline: auto;      /* align actions with the narrow content */
  }
}

/* Continue button: consistent position, premium sizing */
.pr-panel-actions-narrow .pr-btn.pr-btn-lg {
  min-width: 180px;
  border-radius: 999px;       /* pill */
  padding-inline: 26px;
}

/* Optional: make status text calmer */
.pr-panel-actions-narrow [data-save-status] {
  font-weight: 600;
  color: #475569; /* slate-ish */
}

/* Email send buttons row: left aligned, spaced */
@media (min-width: 1024px) {
  .pr-step-panel[data-step="1"] .pr-email-send-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
  }
}

/* Make the email input feel premium (like your screenshot) */
.pr-step-panel[data-step="1"] input[type="email"],
.pr-step-panel[data-step="2"] input[type="tel"] {
  background: rgba(241, 245, 249, 0.7); /* subtle fill */
}

/* Make the “Send code” button pill too (matches Continue) */
.pr-step-panel[data-step="1"] [data-send-email-code],
.pr-step-panel[data-step="1"] [data-send-email-link] {
  border-radius: 999px;
  padding: 12px 18px;
}