/**
 * Blue Frame Films: contact.css
 *
 * Purpose:  Contact page (#contact): email, phone buttons, status notices, the inquiry form
 *           and the "I want to" choice. Selected-packages block: selection.css.
 * Used by:  template-parts/contact/contact.php; notices come from blueframe_form_notice().
 * To edit:  Field look: input/select/textarea. Success/error colors: .bf-notice-ok / -err.
 */

/* ==========================================================================
   Contact layout and details
   ========================================================================== */
.contact {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 48px;
	align-items: start;
}

.mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--elec2);
}

.phone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.phone .pnum {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--text);
	margin-right: 4px;
}

.phone .btn {
	padding: .6rem 1.2rem;
	font-size: .9rem;
}

/* Social links under the phone row (base styles in components.css) */
.bf-social-contact {
	margin-top: 16px;
}

.bf-social-contact a {
	padding: .55rem 1rem .55rem .85rem;
	font-size: .9rem;
}

/* ==========================================================================
   Inquiry form
   ========================================================================== */
.bf-form {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	display: grid;
	gap: 14px;
}

.row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

label {
	font-size: .78rem;
	font-weight: 600;
	color: #c9d6f5;
	letter-spacing: .04em;
}

input,
select,
textarea {
	width: 100%;
	margin-top: 6px;
	padding: 11px 13px;
	border-radius: 8px;
	border: 1px solid rgba(148,163,196,.25);
	background: #070b15;
	color: var(--text);
	font: inherit;
	font-size: .93rem;
}

textarea {
	min-height: 110px;
	resize: vertical;
}

.bf-form .req {
	color: var(--elec2);
}

.bf-form .hint {
	font-size: .75rem;
	color: var(--muted);
	margin-top: -4px;
}

/* Honeypot field: off-screen for people, visible to bots */
.bf-hp {
	position: absolute!important;
	left: -10000px!important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Status notices (after submitting)
   ========================================================================== */
.bf-notice {
	margin-top: 20px;
	font-size: .92rem;
	padding: 12px 14px;
	border-radius: 8px;
	font-weight: 600;
}

.bf-notice-ok {
	color: #3ee08f;
	border: 1px solid rgba(62,224,143,.5);
	background: rgba(62,224,143,.08);
}

.bf-notice-err {
	color: #ff8a96;
	border: 1px solid rgba(255,122,138,.55);
	background: rgba(255,122,138,.08);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px) {
	.contact {
		grid-template-columns: 1fr;
	}
}
@media (max-width:760px) {
	.row2 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   "I want to" choice (Ask a question / Request to book)
   ========================================================================== */
.intent {
	border: 0;
	padding: 0;
	margin: 0 0 4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.intent legend {
	font-size: .78rem;
	font-weight: 600;
	color: #c9d6f5;
	letter-spacing: .04em;
	margin-bottom: 8px;
	float: left;
	width: 100%;
}

.intent label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid rgba(148,163,196,.25);
	border-radius: 999px;
	background: #070b15;
	font-size: .88rem;
	color: var(--text);
	letter-spacing: 0;
	cursor: pointer;
}

.intent label:has(input:checked) {
	border-color: var(--elec2);
	background: rgba(0,194,255,.1);
}

.intent input {
	width: auto;
	margin: 0;
	padding: 0;
	accent-color: var(--elec2);
}

.contact h1 {
	font-size: clamp(2rem,4vw,2.9rem);
	margin: .5rem 0 .9rem;
}

/* Market Vendor Special hint (shown only while that item is selected; a hint, not validation) */
.bf-form .sel-market-hint {
	color: var(--elec2);
	font-size: .8rem;
}