/*
  Domaintico – Transfer (Pro)
  ---------------------------
  هدف الملف: واجهة /transfer تكون compact + واضحة + متناسقة مع domaintico-ui.
  ملاحظة: Scoped على .dm-transfer لتفادي أي تأثير على صفحات أخرى.
*/

/* Local text + field utilities (keep /transfer self-contained) */
.dm-transfer .dm-label{
  display:block;
  font-weight:700;
  font-size:15px;
  line-height:1.2;
  color: var(--dm-text, #0F172A);
  margin-bottom:6px;
}

.dm-transfer .dm-muted{
  color: var(--dm-muted, #64748B);
}

.dm-transfer .dm-input{
  width:100%;
  height:48px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(2,6,23,.12);
  background:#fff;
  color: var(--dm-text, #0F172A);
  font-size:16px;
  -webkit-appearance:none;
  appearance:none;
}

.dm-transfer .dm-input:focus{
  outline:none;
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.16);
}

.dm-transfer .dm-input-error{
  color: #b91c1c;
  font-weight: 700;
}

.dm-transfer .dm-transfer-hero{
  text-align:center;
}

.dm-transfer .dm-transfer-hero__cta{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Layout: wizard + side card */
.dm-transfer .dm-transfer-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items:start;
}

@media (max-width: 991.98px){
  .dm-transfer .dm-transfer-layout{
    grid-template-columns: 1fr;
  }
}

.dm-transfer .dm-transfer-aside{
  position: sticky;
  top: 92px;
}

@media (max-width: 991.98px){
  .dm-transfer .dm-transfer-aside{ position: static; }
}

/* Alerts */
.dm-transfer .dm-alert{
  border: 1px solid var(--dm-border-soft);
  background: var(--dm-surface-2);
  border-radius: var(--dm-radius);
  padding: 12px 14px;
  color: var(--dm-text);
}

.dm-transfer .dm-alert--success{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.10);
}

.dm-transfer .dm-alert--danger{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.10);
}

.dm-transfer .dm-alert--warning{
  border-color: rgba(245,158,11,.30);
  background: rgba(245,158,11,.12);
}

.dm-transfer .dm-alert--neutral{
  border-color: rgba(148,163,184,.35);
  background: rgba(148,163,184,.10);
}

/* Stepper (pill-style, consistent with checkout) */
.dm-transfer .dm-transfer-steps{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding: 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.04);
  border: 1px solid var(--dm-border-soft);
}

.dm-transfer .dm-step{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dm-muted);
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}

.dm-transfer .dm-step:hover{
  background: rgba(15,23,42,.05);
  color: var(--dm-text);
}

.dm-transfer .dm-step:active{
  transform: translateY(1px);
}

.dm-transfer .dm-step:focus-visible{
  outline: 3px solid rgba(37,99,235,.22);
  outline-offset: 2px;
}

.dm-transfer .dm-step__num{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--dm-border);
  background: var(--dm-surface);
  color: var(--dm-muted);
}

.dm-transfer .dm-step.is-active{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.25);
  color: var(--dm-primary-color);
}

.dm-transfer .dm-step.is-active .dm-step__num{
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.14);
  color: var(--dm-primary-color);
}

.dm-transfer .dm-step.is-done{
  color: var(--dm-text);
}

.dm-transfer .dm-step.is-done .dm-step__num{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.25);
  color: #166534;
}

/* Panels */
.dm-transfer .dm-transfer-panel{
  scroll-margin-top: 96px;
}

.dm-transfer .dm-transfer-panel[hidden]{
  display:none !important;
}

/* Domain searchbar */
.dm-transfer .dm-transfer-searchbar{
  display:flex;
  gap: 10px;
  align-items: stretch;
}

@media (max-width: 575.98px){
  .dm-transfer .dm-transfer-searchbar{
    flex-direction: column;
  }
  .dm-transfer .dm-transfer-searchbar .btn{
    width: 100%;
  }
}

/* Pricing box */
.dm-transfer .dm-transfer-pricing{
  border: 1px solid var(--dm-border-soft);
  background: var(--dm-surface-2);
  border-radius: var(--dm-radius);
  padding: 12px 14px;
}

.dm-transfer .dm-transfer-pricing__row{
  display:flex;
  align-items:baseline;
  justify-content: space-between;
  gap: 14px;
}

.dm-transfer .dm-transfer-pricing__label{
  font-weight: 700;
}

.dm-transfer .dm-transfer-pricing__value{
  font-weight: 800;
  white-space: nowrap;
}

/* Actions */
.dm-transfer .dm-transfer-actions,
.dm-transfer .dm-panel-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.dm-transfer .dm-transfer-actions .btn,
.dm-transfer .dm-panel-actions .btn{
  min-width: 140px;
}

@media (max-width: 575.98px){
  .dm-transfer .dm-transfer-actions .btn,
  .dm-transfer .dm-panel-actions .btn{ width: 100%; min-width: 0; }
}

/* Checklist */
.dm-transfer .dm-transfer-checklist{
  display:grid;
  gap: 10px;
}

.dm-transfer .dm-check{
  display:grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border: 1px solid var(--dm-border-soft);
  border-radius: var(--dm-radius);
  background: var(--dm-surface);
}

.dm-transfer .dm-check:hover{
  background: rgba(2,6,23,.015);
}

.dm-transfer .dm-check .form-check-input{
  margin-top: 3px;
  grid-row: 1 / span 2;
}

.dm-transfer .dm-check__title{
  grid-column: 2 / -1;
  font-weight: 800;
  color: var(--dm-text);
  line-height: 1.25;
}

.dm-transfer .dm-check__desc{
  grid-column: 2 / -1;
  display:block;
  margin-top: 3px;
  font-size: .9rem;
  color: var(--dm-muted);
}

/* EPP input row */
.dm-transfer .dm-transfer-eppbar{
  display:flex;
  gap: 10px;
  align-items: stretch;
}

@media (max-width: 575.98px){
  .dm-transfer .dm-transfer-eppbar{
    flex-direction: column;
  }
  .dm-transfer .dm-transfer-eppbar .btn{ width: 100%; }
}

/* Summary box */
.dm-transfer .dm-transfer-summary,
.dm-transfer .dm-summary{
  border: 1px solid var(--dm-border-soft);
  background: var(--dm-surface-2);
  border-radius: var(--dm-radius);
  padding: 12px 14px;
  display:grid;
  gap: 10px;
}

.dm-transfer .dm-transfer-summary__row,
.dm-transfer .dm-summary__row{
  display:flex;
  align-items:baseline;
  justify-content: space-between;
  gap: 14px;
}

/* Side card */
.dm-transfer .dm-transfer-sidecard__rows{
  display:grid;
  gap: 10px;
}

.dm-transfer .dm-transfer-sidecard__row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
}

.dm-transfer .dm-transfer-help{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--dm-muted);
}

.dm-transfer .dm-transfer-help li{
  margin: 6px 0;
}

/* Compact tweaks on small screens */
@media (max-width: 575.98px){
  .dm-transfer .dm-section-title{ font-size: clamp(26px, 7vw, 34px); }
}

/* Inline spinner (used for "Checking…") */
.dm-transfer .dm-spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.18);
  border-top-color: rgba(37,99,235,.9);
  display: inline-block;
  vertical-align: -3px;
  animation: dmSpin 0.9s linear infinite;
}

@keyframes dmSpin{
  to { transform: rotate(360deg); }
}


/* Mobile: keep stepper on one row (scrollable) + slightly tighter checklist */
@media (max-width: 575.98px){
  .dm-transfer .dm-transfer-steps{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dm-transfer .dm-transfer-steps::-webkit-scrollbar{display:none;}
  .dm-transfer .dm-step{flex: 0 0 auto;}

  .dm-transfer .dm-transfer-checklist{gap: 8px;}
  .dm-transfer .dm-check{padding: 10px;}
  .dm-transfer .dm-check__desc{font-size: .875rem;}
}

/*
  Ensure the native [hidden] attribute always wins.
  (Some layout rules like .dm-transfer-actions use higher specificity and
  can accidentally override the browser's default [hidden]{display:none}.)
*/
.dm-transfer [hidden]{
  display: none !important;
}