/* IASS Forms — registration page. Palette and type follow the site (donation page, home strips). */
.iass-form, .iass-opens { /* .iass-opens also sits on the home page, outside .iass-form */
	--iass-orange: #F77924;
	--iass-orange-dark: #e0661a;
	--iass-green: #33A541;
	--iass-navy: #1b2a5b;
	--iass-ink: #26282b;
	--iass-muted: #6b6f75;
	--iass-card: #f2f1f1;
	--iass-line: #dcdcdc;
	--iass-red: #c62828;
	color: var(--iass-ink);
	font-size: 16px;
	line-height: 1.55;
}
.iass-form [lang="hi"] { font-family: "Noto Sans Devanagari", "Kohinoor Devanagari", "Mukta", "Nirmala UI", sans-serif; }
.iass-form[data-lang="hi"] [lang="en"], .iass-form[data-lang="en"] [lang="hi"] { display: none; }
[hidden] { display: none !important; }

/* full-bleed page inside Astra's container */
.iass-main { width: 100vw; margin-left: calc(50% - 50vw); background: #fff; }

/* admin preview marker */
.iass-preview-bar { background: #fff4d6; color: #6b4a00; border: 1px solid #f0c75e; border-radius: 12px; font-size: 14px; font-weight: 600; padding: 10px 14px; margin: 0 0 20px; }

/* ---------- banner ---------- */
.iass-hero {
	position: relative;
	background: #0b0b0b linear-gradient(135deg, #111 0%, #1d2a1f 100%) center / cover no-repeat;
	color: #fff;
	text-align: center;
	padding: 120px 16px 40px; /* the site's nav floats over the first ~85px */
	border-bottom: 6px solid var(--iass-green);
	/* one height for every form: room for a two-line title, content centred inside */
	box-sizing: border-box;
	height: 440px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.iass-hero.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.65) 100%); }
.iass-hero-in { position: relative; max-width: 1100px; width: 100%; margin: 0 auto; }
.iass-hero h1 {
	font-family: "Raleway", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: clamp(22px, 4.4vw, 50px);
	line-height: 1.35; /* Devanagari vowel marks need more room than Latin, or the clamp clips them */
	color: #fff;
	margin: 18px 0 10px;
	text-shadow: 0 2px 12px rgba(0,0,0,.35);
	height: 2.7em; /* exactly two lines, whether the title has one or two */
	display: flex;
	align-items: center;
	justify-content: center;
}
/* longer titles stop at two lines with an ellipsis instead of growing the banner; the dates and venue
   below are never cut — on a phone the full venue is the information people need */
.iass-hero h1 > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.iass-hero-meta { margin: 0; font-size: 17px; color: rgba(255,255,255,.9); }
.iass-hero-meta > span { display: inline; }
.iass-dot { margin: 0 10px; color: var(--iass-orange); }
.iass-lang { display: inline-flex; background: #fff; border: 1px solid var(--iass-line); border-radius: 100px; padding: 3px; margin-bottom: 18px; }
.iass-lang button { border: 0; background: transparent; color: var(--iass-ink); font-size: 14px; font-weight: 600; padding: 6px 16px; border-radius: 100px; cursor: pointer; line-height: 1.2; }
.iass-lang button[aria-pressed="true"] { background: var(--iass-orange); color: #fff; }
.iass-lang button:focus-visible { outline: 2px solid var(--iass-navy); outline-offset: 2px; }
.iass-body > .iass-lang { grid-column: 1 / -1; justify-self: center; margin: 0 0 -12px; } /* its own row above both columns */

/* ---------- two columns ---------- */
.iass-body { /* the donation page's Elementor layout: 85% wide, two equal columns (its 10px paddings + 20px gap folded in) */
	width: 85%;
	box-sizing: border-box;
	margin: 44px auto 72px;
	padding: 0 30px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.iass-aside { position: sticky; top: 24px; margin: 0 -10px; } /* the donation page's text column runs 10px wider than its card column */
.iass-body.iass-body-solo { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.iass-aside-title, .iass-card-title {
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	color: var(--iass-navy);
	font-size: 24px;
	margin: 0 0 18px;
	padding-bottom: 12px;
	position: relative;
}
.iass-aside-title::after, .iass-card-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; background: var(--iass-green); }
.iass-facts { margin: 0 0 24px; display: grid; gap: 12px; }
.iass-fact { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; }
.iass-fact dt { color: var(--iass-navy); font-weight: 600; font-size: 14px; }
.iass-fact dd { margin: 0; }
.iass-pill { display: inline-block; background: #e8f5ea; color: #1e6b28; font-weight: 700; padding: 2px 12px; border-radius: 100px; font-size: 14px; }
.iass-pill-wait { background: #fff1e6; color: #9a4a0b; }

.iass-rules { border: 1px solid var(--iass-line); border-radius: 14px; background: #fafafa; }
.iass-rules summary { cursor: pointer; font-weight: 700; color: var(--iass-navy); padding: 14px 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.iass-rules summary::-webkit-details-marker { display: none; }
.iass-rules summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--iass-orange); }
.iass-rules[open] summary::after { content: "–"; }
.iass-rules > div { padding: 0 18px 12px; font-size: 15px; color: #3b3e42; }
.iass-rules ol { margin: 0 0 8px; padding-left: 20px; }
.iass-rules li { margin: 0 0 8px; }
.iass-rules li::marker { color: var(--iass-orange); font-weight: 700; }

/* ---------- card with the form ---------- */
.iass-card { background: var(--iass-card); border-radius: 20px; padding: 25px; max-width: 800px; box-sizing: border-box; scroll-margin-top: 24px; } /* the donation form's card */
.iass-card-sub { margin: -6px 0 18px; color: var(--iass-muted); font-size: 14px; }
.iass-banner { background: #fff1e6; border: 1px solid #f5b98b; color: #7a3b0a; padding: 12px 16px; border-radius: 12px; margin: 0 0 20px; }

.iass-h {
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--iass-navy);
	margin: 30px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--iass-line);
}
.iass-fields > .iass-h:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.iass-note { background: #fff; border-left: 3px solid var(--iass-orange); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 0 0 16px; font-size: 14px; color: #44474b; }
.iass-note p { margin: 0; }

.iass-f { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.iass-f > label, .iass-f legend { display: block; font-weight: 600; font-size: 14px; color: #333; margin: 0 0 6px; padding: 0; } /* as the donation form's labels */
.iass-req { color: inherit; } /* plain asterisk, as on the donation form */
.iass-f input[type=text], .iass-f input[type=tel], .iass-f input[type=email], .iass-f input[type=date], .iass-f select, .iass-f textarea {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--iass-line);
	border-radius: 50px;
	padding: 12px 18px;
	font-size: 14px; /* the donation form's size; iOS Safari zooms into a field under 16px, as it does there */
	color: var(--iass-ink);
	transition: border-color .15s, box-shadow .15s;
}
.iass-f input[type=file] { max-width: 100%; }
.iass-f input[type=date], .iass-f input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; }
/* iOS Safari gives date inputs a native min-width and ignores width:100%, pushing the page sideways */
.iass-f input[type=date] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; min-height: 46px; line-height: 1.3; text-align: left; }
.iass-f input[type=date]::-webkit-date-and-time-value { text-align: left; }
/* two half-width fields side by side; subgrid lines up their labels, inputs and errors */
/* the margin sits on the fields, not the row, so a row whose fields are all hidden takes no space */
.iass-row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: 14px; }
.iass-row > .iass-f { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.iass-row > .iass-f > label { align-self: end; }
.iass-row > .iass-f[hidden] { display: none; }
/* the theme's select { line-height: 1 } clips Devanagari matras above and below */
.iass-f select { height: auto; min-height: 46px; line-height: 1.4; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 15px center; background-size: 15px; padding-right: 40px; }
.iass-f textarea { border-radius: 15px; min-height: 100px; resize: vertical; }
.iass-f input::placeholder, .iass-f textarea::placeholder { color: #a3a6ab; }
.iass-f input:focus, .iass-f select:focus, .iass-f textarea:focus { outline: 0; border-color: var(--iass-orange); box-shadow: 0 0 0 3px rgba(247,121,36,.18); }
.iass-f input[type=file] { font-size: 15px; }

/* radio / checkbox options as tappable chips */
.iass-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.iass-choices label { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--iass-line); border-radius: 100px; padding: 9px 18px; cursor: pointer; font-weight: 500; margin: 0; }
.iass-choices label:has(input:checked) { border-color: var(--iass-orange); background: #fff5ee; color: #8a3d06; }
.iass-choices input, .iass-decl input { accent-color: var(--iass-orange); width: 18px; height: 18px; margin: 0; }

.iass-decl { background: #fff; border-radius: 14px; padding: 16px 18px; border: 1px solid var(--iass-line); }
.iass-decl p { margin: 0 0 12px; font-size: 15px; color: #3b3e42; }
.iass-decl label { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }

.iass-err { margin: 6px 0 0 6px; font-size: 14px; color: var(--iass-red); }
.iass-err:empty { display: none; }
.iass-bad input, .iass-bad textarea, .iass-bad select, .iass-bad .iass-choices label, .iass-bad.iass-decl { border-color: var(--iass-red); }
.iass-bad input:focus, .iass-bad textarea:focus { box-shadow: 0 0 0 3px rgba(198,40,40,.15); }

.iass-ts { display: flex; justify-content: center; margin: 8px 0 20px; }
/* the Turnstile plugin adds an inline margin-left:-15px and a <br> after the widget */
.iass-ts .cf-turnstile { margin: 0 !important; }
.iass-ts br { display: none; }
.iass-msg { margin: 0 0 14px; padding: 10px 16px; border-radius: 12px; background: #fdecea; color: #8e1c1c; font-size: 15px; }
.iass-msg:empty { display: none; }
.iass-btn {
	display: block;
	width: 100%;
	background: #ff6600; /* the donation form's Pay Now */
	color: #fff !important;
	border: 0;
	border-radius: 50px;
	padding: 14px 24px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background .15s, transform .05s;
}
.iass-btn:hover { background: #e65500; }
.iass-btn:active { transform: translateY(1px); }
.iass-btn:focus-visible { outline: 3px solid rgba(247,121,36,.45); outline-offset: 2px; }
.iass-btn[disabled] { opacity: .6; cursor: wait; }
.iass-btn + .iass-btn { margin-top: 10px; }
.iass-secure { text-align: center; color: var(--iass-muted); font-size: 13px; margin: 10px 0 0; }

/* result / status screens */
.iass-choices label.iass-full { color: #8a8a8a; }
/* Room inventory: a small pill at the row's end, never wrapping, text takes the rest of the width. */
.iass-choices label:has(.iass-left), .iass-choices label.iass-full { width: 100%; justify-content: flex-start; }
.iass-choices label > span[lang] { flex: 1 1 auto; }
.iass-choices .iass-left, .iass-choices label.iass-full em { flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 10px; border-radius: 100px; }
.iass-choices .iass-left { background: #e8f5ea; color: #1e6b28; }
.iass-choices label.iass-full em { background: #fdecea; color: #c0392b; }
.iass-opens { border: 0; border-radius: 16px; padding: 28px 24px 20px; width: min(420px, calc(100vw - 48px)); max-width: none; box-sizing: border-box; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.iass-opens::backdrop { background: rgba(20, 26, 92, .45); }
.iass-opens p { margin: 0 0 18px; font-size: 17px; line-height: 1.5; color: var(--iass-navy); }
.iass-status { text-align: center; padding: 24px 8px 8px; }
.iass-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #e3e5e8; color: #555; font-size: 30px; font-weight: 700; margin-bottom: 12px; }
.iass-status-ok .iass-status-icon { background: var(--iass-green); color: #fff; }
.iass-status-wait .iass-status-icon { background: #fff1e6; }
.iass-status h2 { font-family: "Raleway", sans-serif; color: var(--iass-navy); font-size: 24px; margin: 0 0 14px; }
.iass-status p { margin: 0 auto 12px; max-width: 460px; }
.iass-reg { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 2px dashed var(--iass-green); border-radius: 14px; padding: 14px; font-size: 14px; color: var(--iass-muted); }
.iass-reg strong { font-size: 26px; letter-spacing: 1px; color: var(--iass-ink); }
.iass-receipt { text-align: center; margin: 0 0 24px; }
.iass-receipt { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.iass-receipt .iass-btn { display: inline-block; width: auto; margin: 0; text-decoration: none; }
.iass-btn-ghost { background: #fff; color: var(--iass-orange) !important; border: 2px solid var(--iass-orange); }
.iass-btn-ghost:hover { background: #fff1e6; }
.iass-paybox .iass-facts { background: #fff; border-radius: 14px; padding: 16px 18px; }

/* ---------- Yes/No: the chips follow the question on its line; a long question wraps on the left ---------- */
fieldset.iass-f[data-type="yesno"] { display: flow-root; }
fieldset.iass-f[data-type="yesno"] > legend { float: left; width: auto; max-width: calc(100% - 170px); margin: 0; padding: 9px 16px 0 0; } /* only as wide as the question, so the chips follow it */
fieldset.iass-f[data-type="yesno"] .iass-choices { flex-wrap: nowrap; gap: 8px; }
fieldset.iass-f[data-type="yesno"] .iass-choices label { flex: 0 0 auto; padding: 8px 14px; }
fieldset.iass-f[data-type="yesno"] > .iass-err { clear: left; }

/* ---------- small screens ---------- */
@media (max-width: 1024px) { /* the donation page stacks at Elementor's tablet breakpoint, card centred */
	.iass-body { width: 100%; padding: 0 20px; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; }
	.iass-aside { margin: 0; }
	.iass-card { margin: 0 auto; width: calc(100% - 20px); } /* inset 10px, as the donation card */
	.iass-aside { position: static; }
}
@media (max-width: 767px) { /* Elementor's phone breakpoint: the donation page runs 10px from the edges */
	.iass-body { padding: 0 10px; }
	.iass-card { width: 100%; }
}
@media (max-width: 600px) {
	.iass-hero { padding: 96px 16px 24px; height: 340px; } /* nav is ~66px tall here */
	.iass-hero h1 { font-size: 22px; letter-spacing: 0; }
	.iass-hero-meta { font-size: 15px; }
	.iass-dot { display: block; height: 0; overflow: hidden; }
	.iass-card { padding: 15px; } /* as the donation form on phones */
	.iass-fact { grid-template-columns: 1fr; gap: 2px; }
	.iass-choices label { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 380px) {
	.iass-ts .cf-turnstile { transform: scale(.85); } /* the widget is a fixed 300px iframe; the card is ~256px wide here */
	.iass-hero h1 { font-size: 19px; } /* long English titles still fit two lines on small phones */
}

/* Home page strips: same look as the Elementor camp strips they replace */
.iass-strips { background: #000; border-top: .4em solid #33A541; }
.iass-strip { border-bottom: .4em solid #33A541; }
.iass-strip-in { max-width: 1140px; margin: 0 auto; padding: 10px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.iass-strip-title { margin: 0; font-family: "Raleway", sans-serif; font-size: 16px; font-weight: 500; text-transform: uppercase; color: #FFF8F8; flex: 1 1 280px; }
.iass-strip-tag { color: #F77924; font-size: 13px; }
.iass-strip-btn { border: 0; cursor: pointer; font-family: inherit; background: #F77924; color: #fff !important; border-radius: 100px; padding: 12px 24px; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; }
.iass-strip-btn:hover, .iass-strip-btn:focus { background: #e0661a; }

/* ---------- photo crop / rotate (photo.js) ---------- */
.iass-ph { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.iass-ph-box { background: #fff; border-radius: 16px; padding: 12px; width: 100%; max-width: 440px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.iass-ph-stage { display: block; width: 100%; height: min(58vh, 460px); border-radius: 10px; touch-action: none; cursor: move; }
.iass-ph-row { display: flex; gap: 8px; align-items: center; }
.iass-ph-row input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: var(--iass-orange); }
.iass-ph-row .iass-btn { flex: 1 1 0; width: auto; padding: 12px 10px; font-size: 15px; }
.iass-ph-b { background: #fff; color: var(--iass-ink); border: 1px solid var(--iass-line); border-radius: 100px; padding: 9px 12px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.2; }
.iass-ph-b:hover { border-color: var(--iass-orange); }
.iass-ph-b:focus-visible { outline: 3px solid rgba(247,121,36,.45); outline-offset: 2px; }
.iass-ph-row [data-x="cancel"] { flex: 1 1 0; padding: 12px 10px; }
.iass-ph-prev { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.iass-ph-prev img { width: 60px; height: 80px; object-fit: contain; background: #f4f4f4; border-radius: 8px; border: 1px solid var(--iass-line); }
@media (max-width: 380px) { .iass-ph { padding: 16px; } .iass-ph-box { padding: 10px; } .iass-ph-row { gap: 6px; } .iass-ph-b { padding: 9px 10px; } }