/*
  ior-onboarding.css
  Extracted from registration PHP.
  Use:
  <link rel="stylesheet" href="/css/ior-onboarding.css?v=1">
*/

/* ============================================================
   1) IoR onboarding success / payment CTA
   ============================================================ */
.ior-onboarding-wrap{
  max-width:1120px;
  margin:28px auto 70px;
  padding:0 18px;
  color:#111827;
}

.ior-onboarding-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.ior-onboarding-hero{
  background:#111827;
  padding:34px 38px;
}

.ior-onboarding-kicker{
  color:#f3136d;
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.ior-onboarding-hero h2{
  color:#ff2d7a!important;
  font-size:clamp(30px,4vw,48px);
  line-height:1.08;
  font-weight:950;
  margin:0 0 16px;
}

.ior-onboarding-hero p{
  color:#f3f4f6!important;
  font-size:16px;
  line-height:1.7;
  max-width:980px;
}

.ior-onboarding-body{
  padding:34px 38px 42px;
}

.ior-plan-box{
  display:grid;
  grid-template-columns:1.4fr .7fr;
  gap:18px;
  margin-bottom:22px;
}

.ior-plan-main,
.ior-plan-price,
.ior-fact,
.ior-stripe-box{
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#f9fafb;
  padding:22px;
}

.ior-plan-main h3{
  margin:0 0 10px;
  font-size:28px;
  font-weight:950;
  color:#111827!important;
}

.ior-plan-main p{
  color:#374151!important;
  line-height:1.65;
}

.ior-plan-price{
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  background:linear-gradient(135deg,#f3136d,#2563eb);
}

.ior-price-label{
  color:#ffffff!important;
  font-size:12px;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.1em;
}

.ior-price-value{
  color:#ffffff!important;
  font-size:32px;
  font-weight:950;
  margin-top:8px;
}

.ior-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:22px 0;
}

.ior-fact{
  text-align:center;
}

.ior-fact strong{
  display:block;
  color:#111827!important;
  font-size:30px;
  font-weight:950;
}

.ior-fact span{
  color:#6b7280!important;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
}

.ior-message{
  background:#fff7fb;
  border-left:5px solid #f3136d;
  border-radius:16px;
  padding:20px 22px;
  color:#111827!important;
  line-height:1.75;
  margin:24px 0;
}

.ior-message a,
.ior-learn,
.ior-legal-links a{
  color:#f3136d!important;
  font-weight:900;
}

.ior-learn{
  display:inline-flex;
  margin:4px 0 22px;
  text-decoration:none!important;
}

.ior-consent{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border:1px solid #d1d5db;
  border-radius:16px;
  background:#f9fafb;
  color:#111827!important;
}

.ior-consent input{
  margin-top:4px;
}

.ior-legal-copy,
.ior-legal-copy *{
  color:#111827!important;
}

.ior-legal-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.ior-legal-links a{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(243,19,109,.35);
  text-decoration:none!important;
  background:#fff;
}

.ior-stripe-box{
  margin-top:24px;
  text-align:center;
}

.ior-stripe-box h3{
  color:#111827!important;
  font-size:26px;
  font-weight:950;
  margin:0 0 8px;
}

.ior-stripe-box p{
  color:#4b5563!important;
}

.ior-stripe-disabled{
  margin-top:22px;
  padding:16px;
  border-radius:14px;
  background:#eff6ff;
  color:#1e3a8a!important;
  border:1px solid #bfdbfe;
  font-weight:800;
}

@media(max-width:760px){
  .ior-onboarding-wrap{
    margin:16px auto 40px;
    padding:0 12px;
  }

  .ior-onboarding-hero,
  .ior-onboarding-body{
    padding:24px 20px;
  }

  .ior-plan-box,
  .ior-facts{
    grid-template-columns:1fr;
  }

  .ior-consent{
    display:block;
  }

  .ior-legal-links{
    flex-direction:column;
  }

  .ior-legal-links a{
    justify-content:center;
  }
}

/* ============================================================
   2) FanWeb registration plan cards and modal
   ============================================================ */
.fanz-plan-wrap{max-width:1180px;margin:28px auto 40px;padding:0 16px;color:#fff}
.fanz-plan-title{color:#fff!important;font-size:clamp(28px,3vw,44px);font-weight:950;margin:0 0 18px}
.fanz-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fanz-plan-card{background:#fff;color:#111827!important;border-radius:18px;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column}
.fanz-plan-card,.fanz-plan-card *{color:#111827!important}
.fanz-plan-head{background:linear-gradient(135deg,#111,#210012);padding:22px 18px;text-align:center}
.fanz-plan-head h3{color:#fff!important;font-size:24px;font-weight:950;margin:0;line-height:1.15}
.fanz-plan-price{color:#ffc107!important;font-size:26px;font-weight:950;margin-top:12px}
.fanz-plan-body{padding:16px;flex:1}
.fanz-plan-row{border-bottom:1px solid #e5e7eb;padding:12px 0;text-align:center}
.fanz-plan-row strong{display:block;font-size:18px;margin-top:4px}
.fanz-plan-desc{min-height:78px;line-height:1.45;font-size:14px;color:#374151!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.fanz-plan-actions{padding:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fanz-plan-btn,.fanz-view-btn{border:0;border-radius:999px;padding:10px 18px;font-weight:900;text-decoration:none!important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fanz-plan-btn{background:#f3136d!important;color:#fff!important}
.fanz-view-btn{background:#111827!important;color:#fff!important}

.fanz-plan-modal{display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.72);padding:22px}
.fanz-plan-modal:target{display:flex;align-items:center;justify-content:center}
.fanz-plan-modal-box{max-width:620px;width:100%;background:#fff;color:#111827!important;border-radius:20px;padding:24px;box-shadow:0 25px 70px rgba(0,0,0,.45)}
.fanz-plan-modal-box,.fanz-plan-modal-box *{color:#111827!important}
.fanz-plan-modal-box h3{margin-top:0;font-size:26px;font-weight:950}
.fanz-plan-modal-text{line-height:1.65;max-height:50vh;overflow:auto}
.fanz-modal-close{margin-top:18px;display:inline-flex;background:#f3136d!important;color:#fff!important;padding:10px 18px;border-radius:999px;text-decoration:none!important;font-weight:900}

@media(max-width:991px){.fanz-plan-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .fanz-plan-grid{grid-template-columns:1fr}
  .fanz-plan-actions{flex-direction:column}
  .fanz-plan-btn,.fanz-view-btn{width:100%}
}
.registration-plan-page{
    margin:10px auto 40px !important;
    padding-top:0 !important;
}

/* ============================================================
   3) Selected package badge
   ============================================================ */
.ior-selected-package{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding:12px 18px;
  border-radius:12px;
  background:linear-gradient(135deg,#f3136d,#2563eb);
  color:#ffffff !important;
  font-size:20px;
  font-weight:900;
  line-height:1.35;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.ior-selected-package,
.ior-selected-package *{
  color:#ffffff !important;
}

.ior-selected-label{
  opacity:.88;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.08em;
}

.ior-selected-name{
  font-weight:950;
}

.ior-selected-price{
  padding-left:12px;
  border-left:1px solid rgba(255,255,255,.35);
}

@media(max-width:640px){
  .ior-selected-package{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    font-size:18px;
  }

  .ior-selected-price{
    padding-left:0;
    border-left:0;
  }
}

/* ============================================================
   4) Registration form focus
   ============================================================ */
form#main input:not([type=submit]):focus,
form#main textarea:focus
{
  background: #ffffff !important;
}

/* ============================================================
   5) Policy confirmation box and policy modal
   ============================================================ */
.fanz-register-policy-box{
  background:#fff!important;
  border:1px solid #d1d5db!important;
  border-radius:16px!important;
  padding:18px!important;
  margin-top:20px!important;
  color:#111827!important;
}

.fanz-register-policy-box *,
.fanz-register-policy-box label,
.fanz-register-policy-box span{
  color:#111827!important;
}

.fanz-policy-label{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0;
  font-size:16px;
  line-height:1.6;
}

.fanz-policy-label input[type=checkbox]{
  margin-top:4px;
  flex:0 0 auto;
}

.fanz-policy-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.fanz-policy-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(243,19,109,.35);
  color:#f3136d!important;
  font-weight:900!important;
  text-decoration:none!important;
}

.fanz-policy-links a:hover{
  background:#f3136d;
  color:#fff!important;
  border-color:#f3136d;
}

/* Policy modal */
.policy-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:999999;
}

.policy-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.82);
}

.policy-window{
  position:relative;
  width:min(980px,92vw);
  height:82vh;
  max-height:820px;

  margin:4vh auto;

  background:#ffffff;
  border-radius:18px;

  overflow:visible !important;

  box-shadow:0 24px 80px rgba(0,0,0,.55);
}

.policy-window iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  margin:0;
  padding:0;
  background:#ffffff;
  border-radius:18px;
}

.policy-close{
  position:absolute;
  top:-18px;
  right:-18px;
  z-index:99999;

  width:56px;
  height:56px;
  border:none;
  border-radius:50%;

  background:#f3136d;
  color:#ffffff;

  font-size:34px;
  line-height:56px;
  font-weight:900;

  cursor:pointer;
  box-shadow:0 10px 30px rgba(243,19,109,.55);
}

.policy-close:hover{
  background:#d90b5d;
  transform:scale(1.08);
}


@media(max-width:768px){

  .fanz-policy-label{
    display:block;
  }

  .fanz-policy-links{
    flex-direction:column;
    gap:8px;
  }

  .fanz-policy-links a{
    width:100%;
    text-align:center;
  }

  .policy-window{
    width:96vw;
    height:90vh;
    max-height:none;
    margin:2vh auto;
    border-radius:14px;
  }

  .policy-close{
    top:10px;
    right:10px;

    width:40px;
    height:40px;
    line-height:40px;
    font-size:24px;
  }
}