:root{
  --navy:#0f365b;
  --navy-deep:#082b4b;
  --gold:#e6bd5a;
  --gold-soft:#f3d88e;
  --cream:#f7f3eb;
  --white:#fff;
  --text:#25313b;
  --muted:#6b7379;
  --line:#ded8cd;
  --shadow:0 20px 50px rgba(7,35,60,.18)
}

*{
  box-sizing:border-box;
  font-family:"Times New Roman",Times,serif
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  line-height:1.55
}

a{
  text-decoration:none
}

.container{
  width:min(1160px,92%);
  margin:0 auto
}

.site-header{
  background:#fff;
  border-bottom:1px solid #e4dfd5
}

.nav{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand{
  display:inline-flex;
  align-items:center
}

.vrc-logo{
  height:68px;
  width:auto;
  display:block
}

.nav-link{
  color:var(--navy);
  font-weight:700;
  border-bottom:2px solid var(--gold);
  padding-bottom:4px
}


/* =========================================================
   TOP / RETREAT SECTION
   ========================================================= */

.hero{
  position:relative;
  overflow:hidden;
  background:var(--navy);
  color:#fff;
  padding:28px 0 28px!important;
  margin:0!important;
  min-height:0!important;
  height:auto!important
}

.hero:before{
  content:"";
  position:absolute;
  width:390px;
  height:390px;
  border:1px solid rgba(230,189,90,.55);
  border-radius:50%;
  right:-145px;
  top:-80px;
  pointer-events:none
}

.hero-grid{
  position:relative;
  z-index:1;
  width:min(1160px,92%);
  max-width:1160px;
  margin:0 auto!important;
  padding:0!important;
  display:block;
  min-height:0!important;
  height:auto!important
}

.hero-copy{
  display:none!important
}


/* =========================================================
   RETREAT CARD
   ========================================================= */

.event-card{
  position:relative;
  z-index:2;
  width:100%;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:12px 20px 10px!important;
  background:#fff;
  color:var(--navy);
  border:1px solid #e1d4bd;
  border-radius:13px;
  box-shadow:0 5px 18px rgba(0,0,0,.10);
  overflow:hidden
}

.event-card:after{
  content:"";
  position:absolute;
  width:370px;
  height:370px;
  right:-165px;
  top:-185px;
  border:1px solid rgba(231,184,75,.45);
  border-radius:50%;
  pointer-events:none
}


/* =========================================================
   DUPLICATE TOP RETREAT LABEL
   ========================================================= */

.card-top{
  display:none!important
}


/* =========================================================
   DYNAMIC RETREAT NAME
   ========================================================= */

.event-card h2{
  position:relative;
  z-index:2;
  margin:0 0 5px!important;
  color:var(--navy);
  font-size:29px;
  line-height:1
}


/* =========================================================
   THREE DETAILS IN ONE ROW
   ========================================================= */

.event-details-row{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  width:100%;
  margin:0;
  border-top:0!important;
  border-bottom:0!important
}


/* =========================================================
   DATE / VENUE / FEE DETAILS
   ========================================================= */

.event-detail{
  position:relative;
  z-index:2;
  min-width:0;
  min-height:42px;

  display:flex;
  align-items:center;
  gap:12px;

  margin:0!important;

  padding:0 45px 0 0!important;

  border-top:0!important;
  border-bottom:0!important;
  border-left:0!important;

  border-right:1px solid #e1d4bd!important;

  color:var(--navy)
}

.event-detail:first-child{
  padding-left:0!important
}

.event-detail+.event-detail{
  padding-left:35px!important
}

.event-detail:last-child{
  border-right:0!important;
  padding-right:0!important
}

.event-detail strong{
  display:block;
  margin:0;
  color:var(--navy);
  font-size:14px;
  line-height:1.1;
  white-space:nowrap
}

.event-detail span{
  display:block;
  margin-top:3px;
  color:var(--navy);
  font-size:15px;
  font-weight:700;
  white-space:nowrap
}

.detail-icon{
  width:36px;
  height:36px;
  min-width:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff3d6;
  border-radius:50%;
  font-size:17px;
  line-height:1
}


/* =========================================================
   REGISTER BUTTON
   ========================================================= */

.card-link{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:39px;
  height:39px;
  margin:8px 0 0!important;
  padding:0 16px;
  background:#f5c95e;
  color:var(--navy);
  border-radius:6px;
  font-size:15px;
  font-weight:700;
  transition:.18s ease
}

.card-link:hover{
  transform:translateY(-1px);
  background:#ffda7e
}


/* =========================================================
   REGISTRATION SECTION
   ========================================================= */

.section{
  padding:0 0 30px!important;
  margin:0!important;
  background:var(--cream)
}

#register{
  margin:0!important;
  padding:0 0 30px!important
}

.form-wrap{
  max-width:960px;
  margin:0 auto
}

.section-heading{
  margin:0 0 28px;
  padding-top:7px
}

.section-heading .eyebrow{
  margin:0 0 14px;
  color:#b87916;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase
}

.section-heading h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(2.2rem,4vw,3.2rem);
  line-height:1.1
}

.section-heading p:not(.eyebrow){
  margin:10px 0 0
}

#formTitle{
  font-size:1.7rem;
  text-align:center
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px
}

.progress span{
  text-align:center;
  padding:12px 10px;
  border:1px solid #d8d1c6;
  border-radius:6px;
  background:#fff;
  color:#58616a;
  font-weight:700;
  cursor:pointer
}

.progress .current{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff
}

.step{
  display:block
}

.step:not(.active){
  display:none
}


/* =========================================================
   FORM CARDS
   ========================================================= */

.form-card,
.review-card,
.success{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  box-shadow:0 12px 35px rgba(10,37,61,.07)
}

.form-card h2,
.review-card h2{
  color:var(--navy);
  margin:0 0 12px!important;
  font-size:2rem;
}

.form-card h2 + p,
.review-card h2 + p{
  margin-top:0!important;
}

.grid{
  display:grid;
  gap:18px;
  margin-bottom:18px
}

.grid.two{
  grid-template-columns:1fr 1fr
}

label{
  display:block;
  font-weight:700;
  margin-bottom:3px;
}

input,
select{
  width:100%;
  margin-top:0;
  padding:12px 13px;
  border:1px solid #c9c3b8;
  border-radius:5px;
  background:#fff;
  color:var(--text);
  font:inherit;
}

input:focus,
select:focus{
  outline:2px solid rgba(230,189,90,.4);
  border-color:#c49a3d
}

.required{
  color:#b3261e
}

.muted{
  color:var(--muted)
}


/* =========================================================
   PHONE
   ========================================================= */

.phone-group{
  display:flex;
  gap:8px
}

.phone-group select{
  flex:0 0 185px
}

.phone-group input{
  flex:1;
  min-width:0
}


/* =========================================================
   TERMS ACCEPTANCE CHECKBOX
   ========================================================= */

.terms-acceptance{
  margin-top:20px;
}

.terms-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  font-weight:700;
  cursor:pointer;
}

.terms-checkbox input[type="checkbox"]{
  width:18px;
  height:18px;
  min-width:18px;
  margin:3px 0 0 0;
  padding:0;
  cursor:pointer;
}

.terms-checkbox span{
  display:block;
  margin:0;
  line-height:1.5;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button-row{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px
}

.button{
  border:0;
  border-radius:5px;
  padding:12px 20px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  text-decoration:none
}

.primary{
  background:var(--navy);
  color:#fff
}

.secondary{
  background:#eee9df;
  color:var(--navy)
}

.button:hover{
  transform:translateY(-1px)
}


/* =========================================================
   REVIEW / SUCCESS
   ========================================================= */

.review-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid #eee8df
}

.review-row strong:last-child{
  text-align:right
}

.fee-row{
  margin-top:4px
}

.error{
  color:#b3261e
}

.success{
  text-align:center
}

.hidden{
  display:none!important
}

.success-icon{
  font-size:2.6rem;
  color:#27723b
}

.success h2{
  color:var(--navy)
}

.payment-note{
  font-size:1.08rem
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  background:var(--navy-deep);
  color:#fff;
  text-align:center;
  padding:24px 0
}


/* =========================================================
   TABLET
   Desktop/tablet styling preserved
   ========================================================= */

@media(max-width:800px){

  .hero{
    padding:20px 0!important
  }

  .hero-grid{
    width:calc(100% - 20px);
    min-height:0!important;
    padding:0!important
  }

  .event-card{
    width:100%;
    padding:12px 15px!important
  }

  .event-details-row{
    grid-template-columns:repeat(3,1fr)
  }

  .event-detail{
    min-height:40px;
    padding:4px 25px 4px 0!important;
    gap:8px
  }

  .event-detail:first-child{
    padding-left:0!important
  }

  .event-detail+.event-detail{
    padding-left:20px!important
  }

  .event-detail:last-child{
    padding-right:0!important
  }

  .detail-icon{
    width:31px;
    height:31px;
    min-width:31px;
    font-size:15px
  }

  .event-detail span{
    font-size:14px
  }

  .event-detail strong{
    font-size:13px
  }

  .grid.two{
    grid-template-columns:1fr
  }
}


/* =========================================================
   SMALL PHONES
   ALL MOBILE ADJUSTMENTS ARE HERE
   ========================================================= */

@media(max-width:600px){

  /* -----------------------------------------
     HEADER
     ----------------------------------------- */

  .nav{
    min-height:68px;
    padding:4px 0;
  }

  .vrc-logo{
    height:52px;
  }

  .nav-link{
    font-size:16px;
    padding-bottom:3px;
    white-space:nowrap;
  }


  /* -----------------------------------------
     RETREAT HERO
     ----------------------------------------- */

  .hero{
    padding:14px 0!important;
  }

  .hero-grid{
    width:calc(100% - 20px);
  }

  .event-card{
    padding:10px 12px!important;
    border-radius:13px;
  }

  .event-card h2{
    font-size:25px;
    line-height:1.05;
    margin-bottom:5px!important;
  }


  /* -----------------------------------------
     RETREAT DETAILS
     DATE | VENUE | FEE
     Remain on ONE horizontal line
     ----------------------------------------- */

  .event-details-row{
    display:grid!important;
    grid-template-columns:1.6fr 1fr .7fr!important;
    width:100%;
    align-items:stretch;
  }

  .event-detail,
  .event-detail:first-child,
  .event-detail+.event-detail{
    display:flex!important;
    width:auto!important;
    min-width:0!important;
    min-height:40px!important;
    height:40px!important;

    align-items:center;
    gap:5px;

    padding:3px 7px!important;

    border-top:0!important;
    border-bottom:0!important;
    border-left:0!important;
    border-right:1px solid #e1d4bd!important;
  }

  .event-detail:first-child{
    padding-left:0!important;
  }

  .event-detail:last-child{
    border-right:0!important;
    padding-right:0!important;
  }

  .detail-icon{
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
    font-size:13px!important;
  }

  .event-detail strong{
    font-size:10px!important;
    line-height:1.05!important;
    white-space:nowrap;
  }

  .event-detail span{
    font-size:10px!important;
    line-height:1.05!important;
    margin-top:2px!important;
    white-space:nowrap;
  }


  /* -----------------------------------------
     REGISTRATION SECTION
     ----------------------------------------- */

  .section{
    padding:0 0 20px!important;
  }

  #register{
    padding:0 0 20px!important;
  }

  .form-wrap{
    width:100%;
    max-width:none;
  }

  .section-heading{
    margin:0 0 14px!important;
    padding:5px 10px 0!important;
  }

  .section-heading .eyebrow{
    margin:0 0 6px!important;
    font-size:.76rem;
    letter-spacing:.09em;
  }

  .section-heading h2,
  #formTitle{
    font-size:1.5rem!important;
    line-height:1.12!important;
    text-align:center;
    margin:0!important;
  }

  .section-heading p:not(.eyebrow){
    margin:6px 0 0!important;
    font-size:.98rem;
    line-height:1.3;
  }


  /* -----------------------------------------
     HIDE PROGRESS BUTTONS ON MOBILE
     ----------------------------------------- */

  .progress{
    display:none!important;
  }


  /* -----------------------------------------
     FORM CARDS
     ----------------------------------------- */

  .form-card,
  .review-card,
  .success{
    padding:18px!important;
    border-radius:14px;
  }

  .form-card h2,
  .review-card h2{
    margin:0 0 6px!important;
    font-size:1.8rem!important;
    line-height:1.15;
  }

  .form-card h2 + p,
  .review-card h2 + p{
    margin-top:0!important;
    margin-bottom:10px!important;
    line-height:1.3;
  }


  /* -----------------------------------------
     COMPACT FIELD SPACING
     Approximately 50% less space
     ----------------------------------------- */

  .grid{
    gap:5px!important;
    margin-bottom:5px!important;
  }

  label{
    margin-bottom:6px!important;
  }

  input,
  select{
    margin-top:4px;
    padding:10px 12px;
  }


  /* -----------------------------------------
     EMERGENCY PHONE
     COUNTRY CODE + NUMBER ON ONE LINE
     ----------------------------------------- */

  .phone-group{
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch;
    gap:6px;
    width:100%;
  }

  .phone-group select{
    flex:0 0 105px!important;
    width:105px!important;
    min-width:105px!important;
    margin-top:4px;
  }

  .phone-group input{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    margin-top:4px;
  }


  /* -----------------------------------------
     TERMS
     ----------------------------------------- */

  .terms-acceptance{
    margin-top:14px;
  }

  .terms-checkbox{
    gap:8px;
    line-height:1.4;
  }


  /* -----------------------------------------
     BUTTONS
     ----------------------------------------- */

  .button-row{
    justify-content:stretch;
    margin-top:12px;
    gap:8px;
  }

  .button-row .button{
    width:100%;
    text-align:center;
  }

  .button{
    padding:11px 16px;
  }


  /* -----------------------------------------
     SUCCESS BUTTONS
     ----------------------------------------- */

  #newRegistration,
  #finishedRegistration{
    width:100%;
    min-width:0;
    height:44px;
  }
}


/* =========================================================
   SUCCESS PAGE BUTTONS
   ========================================================= */

#newRegistration,
#finishedRegistration{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:210px;
  min-width:210px;
  height:44px;
  padding:0 18px;
  background:#e3e3e3;
  color:var(--navy);
  border:1px solid #d0d0d0;
  border-radius:5px;
  font:inherit;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
}

#newRegistration:hover,
#finishedRegistration:hover{
  background:#d8d8d8;
  transform:translateY(-1px);
}

/* =========================================================
   RETREAT SELECTOR - CENTERED
   ========================================================= */

.retreat-selector{
  display:flex;
  align-items:center;
  justify-content:center;

  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

#retreatSelector{
  width:auto;
  min-width:273px;
  max-width:364px;
  height:42px;

  margin:0;
  padding:8px 12px;

  border:1px solid #c9c3b8;
  border-radius:5px;

  background:#fff;
  color:var(--text);

  font-family:"Times New Roman",Times,serif;
  font-size:16px;
  font-weight:700;
  line-height:1.2;

  cursor:pointer;
}

#retreatSelector:focus{
  outline:2px solid rgba(230,189,90,.4);
  border-color:#c49a3d;
}

#retreatSelector option{
  background:#fff;
  color:var(--text);
  font-family:"Times New Roman",Times,serif;
  font-size:16px;
}


/* =========================================================
   MOBILE - KEEP SELECTOR TO THE RIGHT
   ========================================================= */

@media(max-width:600px){

  .retreat-selector{
    position:absolute;
    left:auto;
    right:12px;
    transform:none;
    max-width:55%;
  }

  #retreatSelector{
    width:auto;
    min-width:0;
    max-width:100%;
    height:38px;

    padding:7px 9px;
    font-size:15px;
  }

}
/* =========================================================
   PERSONAL DETAILS - GENDER / YOB / MOBILE
   ========================================================= */

.three-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  align-items:start;
}

.three-columns .form-group{
  margin-bottom:0;
}

.three-columns .form-group label{
  margin-bottom:3px;
}

.three-columns .form-group input,
.three-columns .form-group select{
  margin-top:0;
}


/* MOBILE */
@media(max-width:768px){

  .three-columns{
    grid-template-columns:1fr;
    gap:8px;
  }

}
#newRegistration,
#finishedRegistration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  min-height: 44px;
  margin-top: 0;
  margin-bottom: 0;
  text-transform: none;
}

.button-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
#backPayment,
/* =========================================================
   SUCCESS / PAYMENT RESULT BUTTONS
   ========================================================= */

#backPayment,
#newRegistration,
#finishedRegistration{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;

  width:210px;
  min-width:210px;
  height:44px;
  min-height:44px;

  margin:5px;
  padding:0 18px;

  background:#e3e3e3;
  color:#333;

  border:1px solid #d0d0d0;
  border-radius:5px;

  font-family:"Times New Roman",Times,serif;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  text-transform:none;

  text-align:center;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
}

#backPayment:hover,
#newRegistration:hover,
#finishedRegistration:hover{
  background:#d8d8d8;
  color:#333;
  transform:translateY(-1px);
}


/* -----------------------------------------
   MOBILE SUCCESS BUTTONS
   ----------------------------------------- */

@media(max-width:600px){

  #backPayment,
  #newRegistration,
  #finishedRegistration{
    width:calc(100% - 8px);
    min-width:0;
    height:44px;
    margin:6px 4px;
    padding:0 10px;
    font-size:15px;
  }

}