/* =========================================================
   Base Register Styles (your original)
   ========================================================= */

.register-section{
  background:#fff;
  padding:2.5rem;
  border-radius:10px;
  box-shadow:0 2px 10px rgb(0 0 0 / .08);
  max-width:600px;
  margin:2rem auto;
  transition:box-shadow .2s ease;
}

.register-section h1{
  font-size:2rem;
  margin-bottom:1.5rem;
  text-align:center;
  color:#222;
}

.form-layout{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.form-layout label{
  font-weight:600;
  color:#333;
  margin-bottom:.25rem;
  display:block;
}

.form-layout input:not([type="checkbox"]):not([type="radio"]){
  padding:.75rem;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:1rem;
  transition:border-color .2s ease, box-shadow .2s ease;
  width:100%;
}

.form-layout input:focus{
  border-color:#07c;
  box-shadow:0 0 0 2px rgb(0 119 204 / .2);
  outline:none;
}

.form-layout .button{
  background:#ffb800;
  color:#000;
  padding:.75rem 1.5rem;
  border-radius:6px;
  font-weight:700;
  font-size:1.1rem;
  border:none;
  cursor:pointer;
  transition:background-color .2s ease, box-shadow .2s ease;
}

.form-layout .button:hover{
  background:#fa0;
  box-shadow:0 2px 6px rgb(0 0 0 / .15);
}

.form-layout .button:focus,
.form-layout .button:active{
  outline:none;
  background-color:#ff9c00;
}

.form-alert{
  padding:1rem;
  border-radius:6px;
  font-size:1rem;
  margin:1rem 0;
  text-align:center;
  font-weight:700;
  line-height:1.5;
  min-height:3.5em;
}

.form-alert.success{
  background:#e1fbe1;
  color:#196b19;
  border:1px solid #6ad66a;
}

.form-alert.error{
  background:#ffe5e5;
  color:#a00;
  border:1px solid #d33;
}

.form-success a{
  color:#07c;
  text-decoration:underline;
  font-weight:400;
}

.form-check{
  display:flex;
  align-items:center;
  gap:10px;
  margin:1.2rem 0;
  font-size:.95rem;
  color:#555;
  flex-wrap:wrap;
}

.form-check input[type="checkbox"]{
  margin:0 8px 0 0;
  transform:scale(1.2);
  accent-color:#ffb800;
  cursor:pointer;
  flex-shrink:0;
}

.form-check label{
  font-weight:400;
  margin:0;
  display:inline;
  cursor:pointer;
  line-height:1.5;
  background:none;
  box-shadow:none;
  flex:1 1 0%;
  min-width:0;
}

.form-check a{
  color:#1e90ff;
  text-decoration:underline;
  margin-left:3px;
  transition:color .2s;
}

.form-check a:hover{
  color:#0056b3;
}

.form-links{
  margin-top:2rem;
  font-size:.95rem;
  color:#444;
  text-align:center;
}

.form-links p{ margin:.5rem 0; }

.form-links a{
  color:#1e90ff;
  text-decoration:underline;
  transition:color .2s ease;
}

.form-links a:hover{ color:#0056b3; }

.no-results-wrapper{
  background:#fff;
  padding:2rem;
  border-radius:8px;
  text-align:center;
}

.no-results{
  font-size:1.1rem;
  color:#666;
  font-weight:500;
}

#tab-intro{ opacity:1; transition:opacity .3s ease; }
#tab-intro.fade-out{ opacity:.3; }

@media (max-width:600px){
  .register-section{
    padding:1rem;
    border-radius:0;
    box-shadow:none;
    margin:0;
  }
  .form-layout{ gap:.7rem; }
  .form-check{ font-size:.98rem; gap:7px; }
}

/* =========================================================
   3-Column Register Layout (Desktop)
   ========================================================= */

.register-intro{
  margin-bottom:1.5rem;
  font-size:1.1rem;
  color:#444;
}

/* Wider single-column card too */
.register-section{
  max-width:760px;
}

/* Wider container only on register page */
.register-page.container{
  max-width:1600px;
}

/* Desktop grid */
.register-layout{
  display:grid;
  grid-template-columns:minmax(240px,340px) minmax(640px,820px) minmax(240px,340px);
  gap:2rem;
  align-items:start;
  margin:2rem auto;
}

/* Sidebars hidden unless large desktop */
.register-side{ display:none; }

@media (min-width:1200px){
  .register-side{ display:block; }

  /* In grid, center must fill its column */
  .register-layout .register-section{
    max-width:100%;
    margin:0;
  }
}

/* Collapse under desktop */
@media (max-width:1199px){
  .register-layout{
    grid-template-columns:1fr;
    gap:0;
    margin:2rem auto;
  }
}

/* =========================================================
   BLUE side panels + better visuals (matches site background)
   ========================================================= */

.register-page .register-side__panel{
  background: linear-gradient(
    180deg,
    rgba(195, 230, 255, .92) 0%,
    rgba(215, 242, 255, .90) 55%,
    rgba(245, 252, 255, .88) 100%
  );
  border: 1px solid rgba(30, 144, 255, .22);
  border-radius:12px;
  box-shadow:
    0 16px 40px rgba(0, 90, 180, .10),
    0 2px 10px rgba(0,0,0,.06);
  padding:1.25rem;
  position:sticky;
  top:1.25rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.register-page .register-side__title{
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: rgba(10, 35, 65, .95);
  margin:0 0 .35rem 0;
}

.register-page .register-side__kicker{
  margin:0 0 1rem 0;
  font-size:.95rem;
  line-height:1.35;
  color: rgba(10, 35, 65, .75);
}

.register-page .register-side__grid{
  display:grid;
  gap:1rem;
}

/* Side cards look crisp */
.register-page .register-side .media-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(30, 144, 255, .12);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* FIX: consistent thumb height (prevents huge tall image)
   Full image still opens in lightbox via data-full */
.register-page .register-side .media-thumb-wrap{
  border-radius:10px;
  overflow:hidden;
  aspect-ratio: 16 / 9;
}

.register-page .register-side .media-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Hide long descriptions in sidebars (cleaner) */
.register-page .register-side .media-desc{ display:none; }

.register-page .register-side .media-title{
  font-size:.98rem;
  line-height:1.25;
}

/* Make badge/overlay themed blue */
.register-page .register-side .media-type{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(30, 144, 255, .20);
  color: rgba(10, 35, 65, .92);
  font-weight: 800;
  letter-spacing: .04em;
}

.register-page .register-side .media-overlay-pill{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(30, 144, 255, .20);
  color: rgba(10, 35, 65, .92);
  font-weight: 700;
}

/* Resend box spacing */
.register-resend{ margin-top:1.25rem; }
.register-resend__title{ margin:0 0 .75rem; }
.register-resend__form{ max-width:420px; }
.register-resend__note{
  margin-top:.6rem;
  font-size:.9rem;
  color:#666;
}