/* ==========================================================================
   تواصل معنا — node 7741:1690

   One centred card on the cream ground: a 608-wide panel at 32/24 padding
   holding the heading, five fields, the submit and three social chips.
   ========================================================================== */

.v3-contact {
	padding: 64px var(--v3-space-5) 96px;
	background: var(--v3-bg-page);
}

/* The panel and its heading are .v3-formcard / .v3-formcard__head now — see
   components.css. Only the gap below the heading is this page's, because the
   contact card runs 950 tall against the login card's 558. */
.v3-contact__head {
	margin-bottom: 56px;                 /* 158 - 102, node 7741:1699 */
}

/* Fields are 88 tall on a 104 pitch: a 16px label, 16 of gap, a 56 control. */
.v3-contact__form {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-4);              /* 16px */
}

.v3-contact__form .v3-field {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-4);              /* 16px, label to control */
}

.v3-contact__form .v3-field__label {
	color: var(--v3-green-900);
	font-size: var(--v3-fs-caption);     /* 14px */
	font-weight: var(--v3-fw-medium);
	line-height: var(--v3-lh-auto);
	text-align: right;
}

/* The select and the textarea are the input at other heights — v3 has no
   primitive for either, so they borrow .v3-input and only differ here. */
.v3-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("/img/v3/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: left var(--v3-space-5) center;
	background-size: 16px 16px;
	padding-inline-end: 48px;
	cursor: pointer;
}

.v3-textarea {
	height: 136px;                       /* node 7747:1883 */
	padding: var(--v3-space-4) var(--v3-space-5);
	border-radius: 24px;                 /* a pill would look wrong this tall */
	resize: vertical;
	line-height: 1.6;
}

/* Node 7745:9137 — a 300 x 48 submit, then the chips 32 below it. */
.v3-contact__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--v3-space-6);              /* 32px */
	margin-top: var(--v3-space-6);
}

.v3-contact__submit { width: 300px; max-width: 100%; }

.v3-contact__socials {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* The chip is .v3-social-chip now — see components.css. It is on the account
   page too, so it cannot live in a page stylesheet. */

/* Result of the send, in place of a toast — the v3 pages do not load one. */
.v3-contact__note {
	margin: 0;
	padding: 12px 16px;
	border-radius: 16px;
	font-size: var(--v3-fs-caption);
	font-weight: var(--v3-fw-medium);
	line-height: 1.6;
	text-align: center;
}

.v3-contact__note[hidden] { display: none; }

.v3-contact__note--error {
	border: 1px solid var(--v3-error-500);
	background: var(--v3-error-050);
	color: var(--v3-error-700);
}

.v3-contact__note--ok {
	border: 1px solid var(--v3-success-500);
	background: var(--v3-green-050);
	color: var(--v3-green-800);
}

/* intl-tel-input renders its own wrapper around the phone field; it has to
   stretch, and its dial-code chip sits inside the control. */
/* .iti is styled on .v3-formcard now — see components.css. */

/* ==========================================================================
   RESPONSIVE — DERIVED
   ========================================================================== */

@media (max-width: 700px) {
	.v3-contact { padding: 40px var(--v3-space-4) 64px; }
	.v3-contact__card { padding: var(--v3-space-5) var(--v3-space-5); border-radius: 20px; }
	.v3-contact__head { margin-bottom: var(--v3-space-7); }
	.v3-contact__head h1 { font-size: var(--v3-fs-h4); }
	.v3-contact__head p { font-size: var(--v3-fs-body); }
	.v3-contact__submit { width: 100%; }
}