/* ============================================================
   join.shared.css — Shared styles across all registration steps
   ============================================================ */
:root {
    --night-1:#1a0f2b;
    --night-2:#2c1a3f;
}

/* Age verification card */
.ageVerifyCard {
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 40px !important;
    
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    text-align: center !important;

     background:linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    
    
    
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
    position:relative;
    overflow:hidden;
}
 .cardHolder {
    background:linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
    position:relative;
    overflow:hidden;
    padding: 30px; 
    border-radius: 10px; 
    box-sizing: border-box;
} 
 
.ageVerifyIcon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: rgba(195, 62, 47, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}
.ageVerifyIcon .material-icons {
    color: #e8c468 !important;
    font-size: 26px !important;
}

.ageVerifyEyebrow {
    color: #e8c468 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 0 5px !important;
}

.ageVerifyHeading {
    color: #ffffff !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 32px !important;
    margin: 0 0 10px !important;
}

.ageVerifySubtext {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 0 15px !important;
}

.ageVerifyCard .openingText {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    margin-bottom: 15px !important;
}

/* Primary "Yes" button — gold gradient pill */
.ageVerifyCard #userIsEighteen {
    background: linear-gradient(to bottom, #e8c468, #d4a94a) !important;
    color: #1c1a24 !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    border: none !important;
}

/* Secondary "No" button — outlined pill */
.ageVerifyCard .secondaryButton {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
}

.ageVerifyAgreeText {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    text-align: left !important;
    line-height: 1.5 !important;
}
.ageVerifyAgreeText a {
    color: #e8c468 !important;
    text-decoration: underline !important;
}

.ageVerifyFooter {
    text-align: center !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 12px !important;
    margin-top: 20px !important;
}

/* Details card (join1 redesign) */
.detailsIcon {
    display: flex; 
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #EDE7F6;
    color: var(--primaryColor, #6A1B9A);
    flex-shrink: 0;
}
.detailsIcon .material-icons { font-size: 22px; }

.sectionDivider {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

.fieldLabel {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 8px;
    display: block;
}

.fullWidth { width: 100%; }

.newInputs input.fullWidth,
.newInputs select.fullWidth {
    width: 100%;
    border: 1px solid #e2e2e2 !important;
    box-shadow: none;

}

.storyStyleCard {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e2e2e2;
    border-radius: var(--borderRadius);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.storyStyleCard:hover { border-color: var(--primaryColor); }
.storyStyleCard.active {
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 1px var(--primaryColor);
}
.storyStyleCard .titleText h3 { font-size: 15px; font-weight: 600; margin: 0; color: ;}
.storyStyleCard .titleText p  { font-size: 13px; margin: 2px 0 0; }

.radioDot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    flex-shrink: 0;
    position: relative;
}
.storyStyleCard.active .radioDot { border-color: var(--primaryColor); }
.storyStyleCard.active .radioDot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--primaryColor);
}

.captchaBox {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: var(--borderRadius);
    padding: 12px 16px;
    margin: 20px 0;
}

.ctaButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 999px;
    font-weight: 600;
    margin-bottom: 10px;
}

.fineprint {
    font-size: 12px;
    color: #fff;
    margin-top: 10px;
    width: 100%;
}


body { overflow-x: hidden; }
.regLogo { width: 250px; cursor: pointer; }
.headingJoin { margin-top: 20px !important; }
.flavorHeading { margin-top: 15px !important; color: var(--white); }

.newInputs input,
.newInputs select {
    padding: 10px;
    border-radius: var(--borderRadius);
    box-sizing: border-box;
    margin: 0 0;
    border: 1px solid #ddd !important;

}

.inputContain    { margin: 20px 0; gap: 20px; }
.noMargin p      { margin: 0 0; }
.titleText h3,
.titleText p     { margin: 0 0; }
.titleText h3    { font-weight: 500; color: #e8c98a;}

/* Sample story panel (join2) */
.sampleStory {
    min-height: 300px;
    background: var(--backgroundLayer1);
    padding: 20px;
    box-sizing: border-box;
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    font-family: var(--storyFont);
}
.sampleStoryText           { margin: 0 0; }
.sampleStoryText p,
.sampleStoryText span      { font-family: var(--storyFont); }
#sampleStoryText span,
#sampleStoryText p         { background: none !important; text-align: left; }

/* Step wrapper */
.joinDivs {
    box-sizing: border-box;
    padding: 40px 0;
    min-height: 100vh;
    align-items: center;
    flex-direction: column;
}
.rowOverride {gap: 20px !important;}
/* Flavor picker (join1) */
.flavorPicker {
    background: linear-gradient(to bottom, #C33E2F 60%, #fdf8f3 40%);
    border-radius: var(--borderRadius);
}

/* Story-type icon cards (join2) */
.storyAppIcon {
    width: 100%;
    height: 150px;
    border-radius: var(--borderRadius);
    background-image: url('../images/SuperSpicyCard.png');
    background-position: -58px -57px;
    background-repeat: no-repeat;
}
.storyAppIcon p                  { color: #fff; user-select: none; }
.storyAppIcon.activeStoryIcon p  { color: var(--gold); box-shadow: 17px 122px 9px rgba(70, 21, 21, 0.8) inset; }

/* Autofill colour override */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

/* Password-hint box (join3) */
#message {
    display: flex;
    background: #fff;
    color: #000;
    position: relative;
    padding: 20px;
    margin-top: 10px;
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
}
#message p { padding: 10px 15px; }

.valid        { color: green; }
.valid:before { position: relative; left: -15px; content: "check"; font-family: 'Material Icons'; }
.invalid        { color: red; }
.invalid:before { position: relative; left: -15px; content: "close"; font-family: 'Material Icons'; }

/* Pricing boxes (join4) */
.priceBox {
    width: 100%;
    border-radius: var(--borderRadius);
    transition: .2s all;
    background: var(--white);
    box-sizing: border-box;
    border: 5px solid transparent;
}
.priceBox.active {
    border-color: var(--primaryColorDark) !important;
    transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
    animation-name: scalePulse;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.priceBox.active .topRow { background: var(--primaryColor); color: var(--white); }

@keyframes scalePulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.priceBox:nth-child(2)::before {
    content: "Most Recommended";
    display: block;
    text-align: center;
    font-weight: bold;
    background-color: var(--primaryColor);
    padding: 5px 10px;
    color: #fff;
}

.flex.row.align.topRow { border-bottom: 1px solid var(--primaryColor); }
.sampleButtonText      { color: var(--primaryColor); }

/* White card wrapper */
.whiteBg {
    background: #fff;
    box-sizing: border-box;
    padding: 40px;
    border: 1px solid #ddd;
    border-radius: var(--borderRadius);
}
.openingText { font-size: 21px; margin-bottom: 5px; }

/* Misc colour helpers */
.grayText             { color: #C9CAC9; }
.grayFont::placeholder { color: #333; }
.blackC               { color: #333; }

@keyframes borderFlash {
    0%   { border-color: white; }
    100% { border-color: var(--primaryColor); }
}

/* ── Responsive ─────────────────────────────────────────── */
@media only screen and (min-width: 1000px) {
    .spicyCard       { padding: 15px !important; font-size: 29px !important; margin-top: -52px !important; }
    .regLogo         { width: 55%; }
    .innerDiv        { width: 500px; }
    .joinDivs        { align-items: center; justify-content: center; }
    #storySamplesIconDiv { align-items: flex-start !important; }
    .widthOverride   { width: 1000px; }
}
@media only screen and (max-width: 1000px) {
    .rowOverride { flex-direction: column !important; }
}