/* Form backgrounds */
.background-image-container {
	background: url("../images/background-image-1.png") center/cover no-repeat;
	height: 100%;                /* fill the rail/card height */
}

/* Ensure the form step occupies the full viewport inside the rail */
.ad[data-content-type="form"] { height: 100%; }
.background-image-container > section.ad { height: 100%; }

.form-card-body {
	display: flex;               /* enables flexbox layout */
	flex-direction: column;      /* stack children vertically */
	align-items: center;         /* center horizontally */
	justify-content: center;     /* center vertically */
	padding: 2rem;               /* spacing from edges */
	margin: 0 auto;              /* center horizontally, no vertical gap */
	min-height: 100%;            /* fill available height for vertical centering */
	max-width: 600px;            /* prevent stretching too wide */
	background-color: transparent; /* transparent background */
	text-align: center;          /* center text inside */
}

.display-4-forms {
	font-size: calc(1.475rem + 2.7vw);
	font-weight: 300;
	line-height: 1.2;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	color: var(--fg-on-surface, #fff);
}

/* Ad header: logo + name bar */
.ad-header {
	position: absolute;
	top: clamp(2rem, 8vh, 4rem);
	/* left: 1rem; */
	display: flex;
	align-items: center;
	z-index: 20;
}
.ad-header img.brand-logo {
	width: clamp(24px, 5vw, 36px);
	height: clamp(24px, 5vw, 36px);
	border-radius: 50%;
	object-fit: contain;           /* don’t crop brand marks */
	background: transparent;       /* avoid accidental fills */
}

/* When the header sits inside the caption, be extra conservative */
.ad-header--inline img.brand-logo{
	width: clamp(24px, 4.5vw, 32px);
	height: clamp(24px, 4.5vw, 32px);
}

.ad-header .advertiser-name {
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}

.ad-header--inline{
	position: static;              /* stack inside caption flow */
	top: auto; left: auto;
	z-index: auto;
	display: flex;                 /* block-level flex to create its own row */
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 0 auto 1rem;         /* center the group; add clear spacing below */
	padding: .25rem .5rem;
	border-radius: .75rem;
	/* background: rgba(0,0,0,.28);    */
	max-width: 90vw;               /* avoid edge collisions on small screens */
}

/* Ensure full-page reset */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}



/* Feed container scroll behavior */
#feed {
	height: 100vh;
	width: 100vw;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Individual ad snap point */
.ad {
	scroll-snap-align: start;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Position button group at bottom center */
.button-group {
	position: absolute;
	bottom: calc(env(safe-area-inset-bottom) + clamp(1rem, 4vh, 2rem));
	left: 50%;
	transform: translateX(-50%);
	z-index: 15;
	display: inline-flex;
	align-items: center;	/* vertically center icons and button */
	justify-content: center;
}

/* Full-viewport section */
section.ad {
	width: 100vw;
	padding: 0;
	margin: 0;
	position: relative;
}

/* Carousel dimensions */
.carousel,
.carousel-inner,
.carousel-item {
	height: 100vh;
	width: 100vw;
}
.carousel-item > img {
	object-fit: cover;
	height: 100vh;
	width: 100vw;
	display: block;
}

@supports (height: 100svh) {
	/* Feed container height based on the *visual* viewport */
	#feed {
		height: 100svh;			/* was 100vh */
	}

	/* Each card fills the visual viewport */
	.ad {
		height: 100svh;			/* was 100vh */
	}

	/* Carousel and slides also fill the visual viewport */
	.carousel,
	.carousel-inner,
	.carousel-item {
		height: 100svh;			/* was 100vh */
	}

	.carousel-item > img {
		height: 100svh;			/* was 100vh */
	}
}

@supports (height: 100dvh) {
	/* Prefer dynamic viewport when available (e.g., Safari toolbar hidden) */
	#feed {
		height: 100dvh;
	}
	.ad {
		height: 100dvh;
	}
	.carousel,
	.carousel-inner,
	.carousel-item {
		height: 100dvh;
	}
	.carousel-item > img {
		height: 100dvh;
	}
}

/* Vertically center carousel captions */
.carousel-caption {
	position: absolute;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	z-index: 10;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.carousel-caption .display-4,
.carousel-caption .lead {
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Navbar styling */
.navbar {
	padding: 1rem 1.5rem;
	/* box-shadow: 0 2px 6px rgba(0,0,0,0.15); */
}
.navbar-brand {
	font-weight: 700;
	font-size: 1.25rem;
}
/* Match profile icon size to navbar-brand */
.navbar .btn-icon i {
	font-size: 1.25rem;
}
.navbar-text {
	font-weight: 600;
	font-size: 1.1rem;
}

/* Button outline dark modifications */
.btn-outline-dark {
	border-width: 2px !important;
	font-weight: 600;
}
.btn-outline-dark .bi {
	font-size: 1.5rem;
}

/* Icon button: transparent background with generous touch padding */
.btn-icon {
	background: transparent;
	border: none;
	padding: 0.5rem; /* ~8px around glyph for easy taps */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	opacity: 1;
	transition: opacity 0.2s ease, transform 0.1s ease;
}
.btn-icon i,
.btn-icon svg {
	font-size: 1.5em;
	line-height: 1;
}
.btn-icon:hover,
.btn-icon:focus {
	opacity: 0.85; /* slight fade on hover/tap */
	outline: none;
}
.btn-icon:active {
	transform: scale(0.95); /* subtle “press” shrink */
}

/* Normalize line-height for perfect vertical centering */
.btn-icon,
.btn-primary.btn-md {
	line-height: 1;
}

/* Gloss effect for primary button */
.btn-primary {
	background: rgba(255, 255, 255, 0.1); /* transparent glossy background */
	border: 1px solid rgba(255, 255, 255, 0.8); /* clear white border */
	border-radius: 26px; /* rounded corners */
	color: #fff; /* white text */
	font-weight: 600;
	/* padding: 0.6rem 1.4rem; */
	font-size: 1.05rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem; /* spacing between icon and text */
	transition: all 0.25s ease-in-out;
	backdrop-filter: blur(6px); /* frosted glass effect */
	-webkit-backdrop-filter: blur(6px);
}

.btn-primary:hover {
	background:#212438;  /* slightly frosted */
	box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3); /* soft glow */
	transform: scale(1.05);  /* gentle size bump */
	border-color: #212438;  /* pure white border on hover */
}

.btn-primary.btn-md.cta-btn{
	border-radius: 26px;
	font-weight: 600;
	font-size: clamp(.95rem, .9rem + .4vw, 1.05rem);
	padding: clamp(.5rem, 1.2vh, .75rem) clamp(1rem, 3vw, 1.5rem);
	min-height: var(--tap);
	min-width: clamp(8rem, 35vw, 13rem);
	box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.18);
}
.btn-primary.btn-md.cta-btn:hover{
	box-shadow: 0 12px 28px rgba(0,0,0,.26), 0 3px 10px rgba(0,0,0,.20);
}
.btn-primary.btn-md.cta-btn:active{
	box-shadow: 0 6px 16px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.18);
}
.btn-primary.btn-md.cta-btn:focus-visible{
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(255,255,255,.25), 0 10px 24px rgba(0,0,0,.22);
}

.btn-primary.btn-md.cta-btn .bi{
	margin-right: .5rem; /* spacing between icon and label */
}

.btn-outline-light {
	outline:1px solid #fff;
	outline-offset:-2px;
	border-radius: var(--radius-cta);
}

/* Auth Modal — glassy */
#authModal .modal-dialog {
	max-width: 420px;
	margin: 1.25rem auto; /* breathing room on small screens */
  }
  
  #authModal .modal-content {
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,.22);
	background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--fg-on-surface, #fff);
	overflow: hidden;
	box-shadow: 0 20px 48px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.25);
  }
  
  #authModal .modal-header,
  #authModal .modal-footer {
	border: 0;
	background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  }
  
  #authModal .modal-title {
	font-weight: 700;
	font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
	color: var(--fg-on-surface, #fff);
  }
  
  #authModal .modal-body {
	color: var(--fg-muted, rgba(255,255,255,.8));
	font-size: var(--fs-1, 1rem);
  }
  
  /* Close button visibility on glass */
  #authModal .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
	opacity: .9;
  }
  
  /* Primary action adopts your glossy button style */
  #authModalLoginBtn.btn.btn-primary {
	width: 100%;
	border-radius: 24px;
	/* padding: .9rem 1.25rem; */
	font-weight: 700;
  }
  
  /* Mobile comfort + safe-area */
  @media (max-width: 420px) {
	#authModal .modal-dialog {
	  margin: max(1rem, env(safe-area-inset-top)) auto max(1rem, env(safe-area-inset-bottom));
	}
  }

/* Ensure modal side gutters on very small screens (respect safe areas)
   Bootstrap normally provides padding on .modal, but our full-viewport layout can make it
   feel edge-to-edge. Add explicit side padding so the glass panel never touches the edges. */
@media (max-width: 420px) {
	.modal {
		padding-left: max(1rem, env(safe-area-inset-left));
		padding-right: max(1rem, env(safe-area-inset-right));
	}
	#authModal .modal-dialog {
		margin-top: max(1rem, env(safe-area-inset-top));
		margin-bottom: max(1rem, env(safe-area-inset-bottom));
	}
}

  .ad.end-of-feed h1 { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
	.ad.end-of-feed p  { color: rgba(255,255,255,.8); }


   .surface-card{
	border-radius: var(--radius-cta);
	overflow: hidden; /* ensure children respect curvature */
}

/* Interests and forms  */
/* Scope curvature to forms using this class */
.form-curved .form-control,
.form-curved .form-select,
.form-curved input[type="text"],
.form-curved input[type="email"],
.form-curved input[type="tel"],
.form-curved input[type="password"],
.form-curved input[type="number"],
.form-curved select,
.form-curved textarea{
	border-radius: var(--radius-cta);
}

/* Keep white surface + subtle border for inputs on white cards */
.form-curved .form-control,
.form-curved .form-select,
.form-curved input,
.form-curved select,
.form-curved textarea{
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.12);
}

/* Theme-aligned focus ring */
.form-curved .form-control:focus,
.form-curved .form-select:focus,
.form-curved input:focus,
.form-curved select:focus,
.form-curved textarea:focus{
	border-color: var(--accent-hover);
	box-shadow: 0 0 0 .2rem rgba(53,55,76,.15); /* subtle ring from accent family */
	outline: 0;
}

/* Ensure buttons in curved forms keep the shared radius */
.form-curved .btn{
	border-radius: var(--radius-cta);
}

/* EarnPlus Interest Toggle Buttons */
.btn-check + .btn-interest {
	display: inline-flex;
	align-items: center;       /* Centers text vertically */
	justify-content: center;   /* Centers text horizontally */
	padding: 0.5rem 1rem;       /* Balanced padding */
	font-size: 0.9rem;          /* Slightly smaller for tags */
	font-weight: 500;
	color: var(--accent);             /* Bootstrap primary tone */
	background-color: var(--brand-50);  /* Light neutral background */
	border: 1px solid var(--brand-50);  /* Primary border */
	border-radius: 20px;        /* Pill style for tags */
	transition: all 0.15s ease-in-out;
	cursor: pointer;
}

/* Hover state */
.btn-check + .btn-interest:hover {
	background-color: var(--surface-soft);  /* Subtle blue tint on hover */
}

/* Checked/Active state */
.btn-check:checked + .btn-interest {
	background-color: var(--accent);  /* Primary background */
	color: var(--fg-on-surface);                /* White text */
	box-shadow: none;
}

/* Focus outline */
.btn-check:focus + .btn-interest {
	outline: 2px solid var(--accent-hover);
	outline-offset: 2px;
}

/* ==============================================
   Guide-only headline/lead reveal (no JS)
   - Scope strictly to the guide card so _ad.html is unaffected
   - H1 slides up + fades in; lead text follows with a slight delay
   ============================================== */
.ad[data-content-type="guide"] .carousel-caption h1,
.ad[data-content-type="guide"] .carousel-caption p{
  opacity: 0;
  transform: translateY(20px);
  animation: ep-slideUp 1.8s cubic-bezier(.2,.8,.2,1) forwards;
}

/* Stagger the paragraph for a subtle sequence */
.ad[data-content-type="guide"] .carousel-caption p{
  animation-delay: 1.5s;
}

@keyframes ep-slideUp{
  to{ opacity:1; transform: none; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .ad[data-content-type="guide"] .carousel-caption h1,
  .ad[data-content-type="guide"] .carousel-caption p{
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
/* Desktop-only phone-rail effect */
@media (min-width: 992px) {
  body {
    overflow: hidden; /* lock the full page */
    background: #111; /* optional: dark backdrop */
  }

  .phone-rail {
    max-width: 430px;             /* typical phone width */
    height: 100vh;                /* full height viewport */
    margin: 0 auto;                /* center horizontally */
    overflow-y: auto;              /* only this area scrolls */
    overflow-x: hidden;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    background: #000;              /* fallback background */
    scroll-snap-type: y mandatory; /* keep existing snap */
  }

  .phone-rail::-webkit-scrollbar {
    display: none; /* hide scrollbars for cleaner look */
  }

  /* Desktop rail overrides: size everything to the rail, not the window */
  .phone-rail #feed{
    height: 100%;
    width: 100%;
  }

  .phone-rail section.ad,
  .phone-rail .ad{
    height: 100%;
    width: 100%;
  }

  .phone-rail .carousel,
  .phone-rail .carousel-inner,
  .phone-rail .carousel-item{
    height: 100%;
    width: 100%;
  }

  .phone-rail .carousel-item > img{
    height: 100%;
    width: 100%;
    object-fit: cover;           /* keep phone-like cover */
    object-position: center;     /* center focal area */
  }
}