/**
 * BE Wedding Guests — Front-end styles
 *
 * Styled to match the Ben & Emma wedding design.
 *
 * @package BE_Wedding_Guests
 * @version 1.0.9
 */

/* =========================================================================
   Custom properties
   ========================================================================= */
:root {
	--be-wg-heading-font:   'Wedding AS Regular', Georgia, serif;
	--be-wg-body-font:      'Wedding AS Regular', Georgia, serif;
	--be-wg-pink:           #e8a0a8;
	--be-wg-green:          #c8d98a;
	--be-wg-green-hover:    #b8cc77;
	--be-wg-text:           #3d3428;
	--be-wg-muted:          #7a6e60;
	--be-wg-success-bg:     #eaf7ea;
	--be-wg-success-border: #6abf69;
	--be-wg-success-text:   #2e6b2e;
	--be-wg-error-bg:       #fdf2f2;
	--be-wg-error-border:   #d9534f;
	--be-wg-error-text:     #a02020;
	--be-wg-radius:         50px;
}

/* =========================================================================
   Font face
   ========================================================================= */
@font-face {
	font-family: 'Wedding AS Regular';
	src: url('/wp-content/themes/BenandEmma/fonts/Wedding_AS-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/* =========================================================================
   Wrapper
   ========================================================================= */
.be-wg-wrap,
#be-wg-welcome {
	max-width: 500px;
	margin: 0 auto;
	font-family: var(--be-wg-heading-font);
	color: var(--be-wg-text);
	text-align: center;
}

/* Remove panel box — no white card, just open layout */
.be-wg-panel {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* =========================================================================
   Heading / label above input
   ========================================================================= */
.be-wg-heading,
#be-wg-welcome h2,
#be-wg-welcome h3 {
	font-family: var(--be-wg-heading-font);
	font-size: 1.1rem;
	font-weight: normal;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--be-wg-text);
	margin: 0 0 14px;
}

.be-wg-subtext {
	display: none;
}

/* =========================================================================
   Fields — pink pill input
   ========================================================================= */
.be-wg-field {
	margin-bottom: 16px;
}

/* Inline field group — adults + children side by side */
.be-wg-field--inline {
	display: flex;
	gap: 16px;
}

.be-wg-field--inline .be-wg-field {
	flex: 1;
}

.be-wg-field--inline input[type="number"] {
	width: 100%;
}

.be-wg-field label {
	display: block;
	font-family: var(--be-wg-heading-font);
	font-size: 0.95rem;
	font-weight: normal;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--be-wg-text);
	margin-bottom: 10px;
}

.be-wg-field input[type="text"],
.be-wg-field input[type="url"],
.be-wg-field input[type="number"],
.be-wg-field textarea,
#be-wg-welcome input[type="text"] {
	width: 100%;
	padding: 14px 24px;
	border: none;
	border-radius: 50px;
	font-family: var(--be-wg-heading-font);
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--be-wg-text);
	background-color: var(--be-wg-pink);
	box-sizing: border-box;
	text-align: center;
	outline: none;
	box-shadow: none;
}

.be-wg-field input[type="text"]::placeholder,
#be-wg-welcome input[type="text"]::placeholder {
	color: var(--be-wg-text);
	opacity: 0.7;
}

.be-wg-field input:focus,
.be-wg-field textarea:focus,
#be-wg-welcome input[type="text"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(200,217,138,.4);
}

/* Radio / fieldset fields — keep readable */
.be-wg-fieldset {
	border: 1px solid #d9cfc5;
	border-radius: 12px;
	padding: .75rem 1rem;
	margin: 0;
	text-align: left;
}

.be-wg-fieldset legend {
	padding: 0 .4rem;
	font-weight: normal;
	font-size: .95rem;
}

.be-wg-radio-label {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .4rem 0;
	cursor: pointer;
	font-size: .95rem;
}

/* =========================================================================
   Age inputs
   ========================================================================= */
.be-wg-age-inputs {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
}

.be-wg-age-inputs label {
	margin-bottom: 0;
}

.be-wg-age-inputs input[type="number"] {
	width: 75px;
	border-radius: 12px;
	text-align: left;
}

/* =========================================================================
   Notices
   ========================================================================= */
.be-wg-notice {
	padding: .75rem 1.25rem;
	border-radius: 50px;
	margin-bottom: 1rem;
	font-size: .95rem;
	font-family: var(--be-wg-heading-font);
	letter-spacing: 0.05em;
}

.be-wg-success {
	background: var(--be-wg-success-bg);
	border: 1px solid var(--be-wg-success-border);
	color: var(--be-wg-success-text);
}

.be-wg-error {
	background: var(--be-wg-error-bg);
	border: 1px solid var(--be-wg-error-border);
	color: var(--be-wg-error-text);
}

/* =========================================================================
   Buttons — wavy blob shape, side by side
   ========================================================================= */
#be-wg-welcome .be-wg-actions,
.be-wg-actions {
	display: flex !important;
	flex-direction: row !important;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.be-wg-btn,
.be-wg-btn--primary,
.be-wg-btn--secondary,
.be-wg-btn--ghost {
	display: inline-block;
	background-color: var(--be-wg-green);
	color: var(--be-wg-text);
	border: none;
	/* Wavy blob shape — asymmetric rounded corners like the PDF design */
	border-radius: 30% 70% 65% 35% / 40% 35% 65% 60%;
	padding: 13px 26px;
	font-family: var(--be-wg-heading-font);
	font-size: 0.85rem;
	font-weight: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	min-width: 140px;
	text-align: center;
	box-shadow: none;
	transition: background .15s, border-radius .2s;
}

.be-wg-btn:hover,
.be-wg-btn--primary:hover,
.be-wg-btn--secondary:hover,
.be-wg-btn--ghost:hover {
	background-color: var(--be-wg-green-hover);
	color: var(--be-wg-text);
	text-decoration: none;
	opacity: 1;
	/* Subtly shift blob on hover for a lively feel */
	border-radius: 70% 30% 35% 65% / 60% 65% 35% 40%;
}

.be-wg-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* =========================================================================
   RSVP summary
   ========================================================================= */
.be-wg-rsvp-summary {
	background: transparent;
	border: 1px solid #d9cfc5;
	border-radius: 12px;
	padding: 1rem 1.5rem;
	margin-bottom: 1.5rem;
	text-align: left;
}

.be-wg-rsvp-summary h3 {
	margin: 0 0 .75rem;
	font-size: 1rem;
	color: var(--be-wg-muted);
	text-transform: uppercase;
	letter-spacing: .1em;
}

.be-wg-summary-table {
	width: 100%;
	border-collapse: collapse;
}

.be-wg-summary-table td {
	padding: .3rem 0;
	font-size: .95rem;
}

.be-wg-summary-table .be-wg-guest-status {
	text-align: right;
	font-weight: 500;
}

.be-wg-status--yes { color: var(--be-wg-success-text); }
.be-wg-status--no  { color: var(--be-wg-error-text); }

/* =========================================================================
   RSVP guest block
   ========================================================================= */
.be-wg-guest-block {
	padding: 1.5rem 0;
	text-align: left;
}

.be-wg-guest-block .be-wg-guest-name {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	color: var(--be-wg-text);
}

.be-wg-divider {
	border: none;
	border-top: 1px solid #d9cfc5;
	margin: 0;
}

.be-wg-attending-hidden .be-wg-attending-only {
	display: none;
}

/* =========================================================================
   RSVP complete
   ========================================================================= */
.be-wg-rsvp-complete {
	background: transparent;
	border: 1px solid #d9cfc5;
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	color: var(--be-wg-muted);
}

/* =========================================================================
   No-code step 2
   ========================================================================= */
.be-wg-subheading {
	font-size: 1.05rem;
	margin: 1.25rem 0 .75rem;
	color: var(--be-wg-text);
}

.be-wg-nc-added-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	text-align: left;
}

.be-wg-nc-added-list li {
	padding: .3rem 0 .3rem 1.4rem;
	position: relative;
	font-size: .95rem;
}

.be-wg-nc-added-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--be-wg-success-text);
	font-weight: 700;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 480px) {
	.be-wg-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.be-wg-btn,
	.be-wg-btn--primary,
	.be-wg-btn--ghost {
		width: 100%;
		min-width: 0;
	}
}