/* File: /assets/css/pages/domain-name-transfer.css
   Domain Market - Domain Transfer Page
   Requires: dm-contrast.css loaded AFTER base css.
*/

body.domain-page.dm-contrast{
  --dmWrap: 1200px;
  --dmRadius: 18px;
  --dmRadius2: 22px;
  --dmBorder: rgba(8,25,50,.14);
  --dmBorder2: rgba(8,25,50,.12);
  --dmInk: var(--ink);
  --dmMuted: var(--muted);
  --dmCard: rgba(255,255,255,.94);
  --dmGlass: rgba(255,255,255,.90);
  --dmShadow: var(--shadow);
  --dmShadow2: var(--shadow2);
}

/* Layout helpers */
.dmWrap{
  max-width: var(--dmWrap);
  margin: 0 auto;
  padding: 0 18px;
}

.dmBand{
  position: relative;
  width: 100%;
}

.dmBand.dmBand--hero{
  padding: 92px 0 34px;
}

.dmBand.dmBand--light{
  padding: 58px 0;
}

.dmBand.dmBand--white{
  padding: 58px 0;
  background: transparent;
}

.dmBand.dmBand--soft{
  padding: 58px 0;
}

.dmBand.dmBand--cta{
  padding: 58px 0;
}

.dmBand--hero{
  background:
    radial-gradient(1200px 650px at 12% 12%, rgba(34,197,94,.30), transparent 58%),
    radial-gradient(1100px 650px at 92% 18%, rgba(43,109,255,.34), transparent 58%),
    radial-gradient(900px 520px at 50% 0%, rgba(29,78,216,.14), transparent 64%),
    linear-gradient(180deg, #0b1834 0%, #06102a 100%);
  color: #fff;
}

.dmBand--soft{
  background:
    radial-gradient(1100px 650px at 10% 30%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(1000px 650px at 90% 30%, rgba(43,109,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(234,243,255,.55), rgba(255,255,255,0));
}

.dmBand--cta{
  background:
    radial-gradient(1100px 650px at 10% 30%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(1000px 650px at 90% 30%, rgba(43,109,255,.22), transparent 60%),
    linear-gradient(180deg, #0b1834 0%, #06102a 100%);
  color: #fff;
}

/* HERO */
.dmHeroGrid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 992px){
  .dmBand.dmBand--hero{ padding: 86px 0 26px; }
  .dmHeroGrid{ grid-template-columns: 1fr; }
}

.dmHeroTitle{
  margin: 0 0 10px 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: 42px;
  color: #fff;
}

@media (max-width: 768px){
  .dmHeroTitle{ font-size: 32px; }
}

.dmHeroLead{
  margin: 0 0 18px 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.86);
  max-width: 56ch;
}

.dmHeroPills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.dmHeroPill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  font-size: 13.5px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dmHeroPill i{ color: #7dd3fc; }

/* HERO search card */
.dmHeroCard{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: var(--dmRadius2);
  box-shadow: 0 30px 90px rgba(0,0,0,.22);
  overflow: hidden;
}

.dmHeroCardHead{
  padding: 18px 18px 10px 18px;
  border-bottom: 1px solid rgba(8,25,50,.10);
}

.dmHeroCardHead h3{
  margin: 0 0 6px 0;
  color: #0b1834;
  font-weight: 800;
  font-size: 18px;
}

.dmHeroCardHead p{
  margin: 0;
  color: rgba(8,25,50,.70);
  font-size: 14px;
  line-height: 1.5;
}

.dmHeroCardBody{
  padding: 16px 18px 18px 18px;
}

.dmBulkForm textarea{
  width: 100%;
  min-height: 156px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid rgba(8,25,50,.16);
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
}

.dmBulkForm textarea:focus{
  border-color: rgba(43,109,255,.55);
  box-shadow: 0 0 0 6px rgba(43,109,255,.18);
}

.dmErr{
  margin: 10px 0 0 0;
  color: #b42318;
  font-size: 14px;
}

.dmHint{
  margin-top: 10px;
  color: rgba(8,25,50,.62);
  font-size: 12.5px;
  line-height: 1.45;
}

.dmBtnPrimary{
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #2b6dff, #1746d1);
  box-shadow: 0 18px 46px rgba(29,78,216,.24);
}

.dmBtnPrimary:hover{ filter: brightness(1.05); }
.dmBtnPrimary:focus-visible{ outline: none; box-shadow: 0 0 0 6px rgba(43,109,255,.18), 0 18px 46px rgba(29,78,216,.24); }

/* Section titles */
.dmH2{
  margin: 0 0 10px 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--dmInk);
}

.dmLead{
  margin: 0;
  color: var(--dmMuted);
  line-height: 1.65;
  max-width: 70ch;
}

/* Steps */
.dmSteps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 22px;
}

@media (max-width: 992px){
  .dmSteps{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
  .dmSteps{ grid-template-columns: 1fr; }
}

.dmStep{
  background: var(--dmCard);
  border: 1px solid var(--dmBorder2);
  border-radius: var(--dmRadius);
  padding: 16px;
  box-shadow: var(--dmShadow2);
}

.dmStepTop{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.dmStepIcon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(43,109,255,.10);
  border: 1px solid rgba(43,109,255,.18);
}

.dmStepIcon i{
  font-size: 20px;
  color: #1d4ed8;
}

.dmStep h3{
  margin: 0;
  font-size: 15.5px;
  font-weight: 900;
  color: var(--dmInk);
}

.dmStep p{
  margin: 0;
  color: var(--dmMuted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Accordion (SiteGround-like) */
.dmAcc50{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
  margin-top: 22px;
}

@media (max-width: 992px){
  .dmAcc50{ grid-template-columns: 1fr; }
}

.dmAccLeft{
  background: var(--dmCard);
  border: 1px solid var(--dmBorder2);
  border-radius: var(--dmRadius2);
  box-shadow: var(--dmShadow2);
  overflow: hidden;
}

.dmAccItem{
  border-top: 1px solid rgba(8,25,50,.10);
}

.dmAccItem:first-child{ border-top: 0; }

.dmAccBtn{
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.dmAccBtn strong{
  font-weight: 900;
  color: var(--dmInk);
  font-size: 15px;
}

.dmAccBtn span{
  color: rgba(29,78,216,.92);
  font-size: 18px;
  transition: transform .2s ease;
}

.dmAccItem.is-open .dmAccBtn span{
  transform: rotate(90deg);
}

.dmAccPanel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}

.dmAccInner{
  padding: 0 16px 16px 16px;
  color: var(--dmMuted);
  font-size: 13.8px;
  line-height: 1.65;
}

.dmAccInner p{ margin: 0; }

.dmAccVisual{
  background: var(--dmGlass);
  border: 1px solid var(--dmBorder);
  border-radius: var(--dmRadius2);
  box-shadow: var(--dmShadow);
  overflow: hidden;
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 18px;
}

.dmAccVisual img{
  width: 100%;
  height: auto;
  max-width: 520px;
  border-radius: 16px;
}

/* FAQ */
.dmFaq{
  background: var(--dmCard);
  border: 1px solid var(--dmBorder2);
  border-radius: var(--dmRadius2);
  box-shadow: var(--dmShadow2);
  overflow: hidden;
  margin-top: 18px;
}

.dmFaqItem{ border-top: 1px solid rgba(8,25,50,.10); }
.dmFaqItem:first-child{ border-top: 0; }

.dmFaqQ{
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--dmInk);
  font-weight: 900;
  font-size: 14.8px;
}

.dmFaqQ span{
  color: rgba(43,109,255,.92);
  font-size: 18px;
  transition: transform .2s ease;
}

.dmFaqItem.is-open .dmFaqQ span{ transform: rotate(90deg); }

.dmFaqA{
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}

.dmFaqA > div{
  padding: 0 16px 16px 16px;
  color: var(--dmMuted);
  font-size: 13.8px;
  line-height: 1.65;
}

/* CTA */
.dmCtaGrid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: center;
}

@media (max-width: 992px){
  .dmCtaGrid{ grid-template-columns: 1fr; }
}

.dmCtaTitle{
  margin: 0 0 10px 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}

.dmCtaText{
  margin: 0;
  color: rgba(255,255,255,.86);
  line-height: 1.65;
}

.dmCtaBtn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  color: #0b1834;
  background: linear-gradient(180deg, #22c55e, #0f8a3c);
  box-shadow: 0 18px 46px rgba(34,197,94,.22);
}

.dmCtaBtn:hover{ filter: brightness(1.05); }

/* Ensure sections never collapse into each other */
.dmBand{ display: flow-root; }