/* =========================================================
   BoG2026 Registration — Subtle striped section backgrounds v3.6
   Inspired by the low-noise diagonal treatment of modern product sites.
   The pattern sits BEHIND opaque cards so content remains easy to read.
   ========================================================= */

.registration-band{
  position:relative;
  isolation:isolate;
  margin:34px 0;
  padding:30px;
  overflow:hidden;
  border:1px solid #dce7ed;
  border-radius:28px;
  background:
    radial-gradient(circle at 88% 10%, rgba(12,119,146,.09), transparent 24%),
    radial-gradient(circle at 5% 92%, rgba(239,127,26,.07), transparent 22%),
    repeating-linear-gradient(
      135deg,
      rgba(6,58,102,.034) 0,
      rgba(6,58,102,.034) 1px,
      transparent 1px,
      transparent 15px
    ),
    #f7fafc;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 18px 44px rgba(6,58,102,.055);
}

.registration-band::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-120px;
  right:-90px;
  width:340px;
  height:340px;
  border:1px solid rgba(6,58,102,.055);
  border-radius:50%;
  box-shadow:
    0 0 0 34px rgba(6,58,102,.018),
    0 0 0 72px rgba(6,58,102,.014);
  pointer-events:none;
}

.registration-band::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-70px;
  bottom:-85px;
  width:220px;
  height:220px;
  border:1px solid rgba(239,127,26,.055);
  border-radius:50%;
  pointer-events:none;
}

/* Small tonal variation helps visitors distinguish page sections. */
.registration-band-renewal{
  background:
    radial-gradient(circle at 88% 10%, rgba(13,128,111,.10), transparent 24%),
    radial-gradient(circle at 5% 92%, rgba(239,127,26,.055), transparent 22%),
    repeating-linear-gradient(
      135deg,
      rgba(13,128,111,.033) 0,
      rgba(13,128,111,.033) 1px,
      transparent 1px,
      transparent 15px
    ),
    #f7fbfa;
}

.registration-band-reinstatement{
  background:
    radial-gradient(circle at 88% 10%, rgba(239,127,26,.085), transparent 24%),
    radial-gradient(circle at 5% 92%, rgba(6,58,102,.055), transparent 22%),
    repeating-linear-gradient(
      135deg,
      rgba(128,82,30,.03) 0,
      rgba(128,82,30,.03) 1px,
      transparent 1px,
      transparent 15px
    ),
    #fcfaf7;
}

.registration-band-firm{
  background:
    radial-gradient(circle at 88% 10%, rgba(23,109,148,.09), transparent 24%),
    radial-gradient(circle at 5% 92%, rgba(13,128,111,.06), transparent 22%),
    repeating-linear-gradient(
      135deg,
      rgba(6,58,102,.032) 0,
      rgba(6,58,102,.032) 1px,
      transparent 1px,
      transparent 15px
    ),
    #f7fafc;
}

/* Cards remain fully opaque and readable above the pattern. */
.registration-band .info-card,
.registration-band .renewal-overview-card,
.registration-band .firm-registration-panel,
.registration-band .callout,
.registration-band .steps li,
.registration-band .actions{
  position:relative;
  z-index:1;
}

.registration-band .info-card,
.registration-band .renewal-overview-card,
.registration-band .firm-registration-panel{
  background:#fff;
  border-color:#d6e3e9;
  box-shadow:
    0 12px 28px rgba(6,58,102,.075),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.registration-band .info-card:hover{
  transform:translateY(-2px);
  border-color:#adcbd8;
  box-shadow:0 18px 34px rgba(6,58,102,.105);
}

/* Avoid a double panel around the firm-registration section. */
.registration-band-firm{
  padding:18px;
}
.registration-band-firm > .firm-registration-panel{
  margin:0;
}

/* Section headings receive a quiet white veil for maximum readability. */
.registration-band > .section-head{
  position:relative;
  z-index:1;
  margin-bottom:20px;
  padding:18px 20px;
  border:1px solid rgba(211,226,234,.9);
  border-radius:18px;
  background:rgba(255,255,255,.90);
  box-shadow:0 8px 20px rgba(6,58,102,.045);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.registration-band > .section-head.mt-3{
  margin-top:0!important;
}

/* Existing callout and process steps sit on white/light surfaces. */
.registration-band .callout{
  border-radius:15px;
  background:rgba(255,255,255,.94);
}

.registration-band .steps li{
  border:1px solid #d9e5eb;
  border-radius:14px;
  background:rgba(255,255,255,.95);
}

/* Native modal remains clean; the pattern is intentionally not used inside it. */
.registration-dialog{
  background:#fff;
}

@media(max-width:820px){
  .registration-band{
    margin:24px 0;
    padding:20px;
    border-radius:22px;
    background-size:auto, auto, auto, auto;
  }

  .registration-band > .section-head{
    padding:16px;
    border-radius:15px;
  }

  .registration-band::before{
    width:240px;
    height:240px;
  }
}

@media(max-width:560px){
  .registration-band{
    margin:18px -4px;
    padding:15px;
    border-radius:18px;
    background:
      repeating-linear-gradient(
        135deg,
        rgba(6,58,102,.03) 0,
        rgba(6,58,102,.03) 1px,
        transparent 1px,
        transparent 14px
      ),
      #f7fafc;
  }

  .registration-band-renewal{
    background:
      repeating-linear-gradient(
        135deg,
        rgba(13,128,111,.03) 0,
        rgba(13,128,111,.03) 1px,
        transparent 1px,
        transparent 14px
      ),
      #f7fbfa;
  }

  .registration-band-reinstatement{
    background:
      repeating-linear-gradient(
        135deg,
        rgba(128,82,30,.028) 0,
        rgba(128,82,30,.028) 1px,
        transparent 1px,
        transparent 14px
      ),
      #fcfaf7;
  }

  .registration-band::before,
  .registration-band::after{
    display:none;
  }

  .registration-band > .section-head{
    padding:14px;
  }

  .registration-band-firm{
    padding:10px;
  }
}