/**
 * FloatConnect admin styles.
 *
 * @package Floatconnect
 */


/* ---------------------------------------------------------
 * Base
 * --------------------------------------------------------- */

.floatconnect-wrap {
	max-width: 1100px;
}

.floatconnect-wrap *,
.floatconnect-wrap *::before,
.floatconnect-wrap *::after {
	box-sizing: border-box;
}


/* ---------------------------------------------------------
 * Cards
 * --------------------------------------------------------- */

.floatconnect-card {
	margin-top: 20px;
	padding: 24px;

	background: #ffffff;

	border: 1px solid #dcdcde;
	border-radius: 8px;

	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.floatconnect-card h2 {
	margin: 0 0 20px;

	font-size: 20px;
	line-height: 1.3;
}

.floatconnect-card h3 {
	margin: 28px 0 16px;

	padding-bottom: 8px;

	border-bottom: 1px solid #dcdcde;

	font-size: 15px;
	line-height: 1.4;
}


/* ---------------------------------------------------------
 * Fields
 * --------------------------------------------------------- */

.floatconnect-field {
	margin-bottom: 18px;
}

.floatconnect-field:last-child {
	margin-bottom: 0;
}

.floatconnect-label {
	display: block;

	margin-bottom: 6px;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;

	color: #1d2327;
}

.floatconnect-input {
	width: 100%;
	max-width: 500px;
}

.floatconnect-field input[type="checkbox"],
.floatconnect-field input[type="radio"] {
	margin-right: 6px;
}

.floatconnect-field > label:not(.floatconnect-label) {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	line-height: 1.4;
}


/* ---------------------------------------------------------
 * Actions
 * --------------------------------------------------------- */

.floatconnect-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 10px;

	margin-top: 20px;
}


/* ---------------------------------------------------------
 * Settings notices
 * --------------------------------------------------------- */

.floatconnect-wrap .notice {
	margin-top: 20px;
}


/* ---------------------------------------------------------
 * Description
 * --------------------------------------------------------- */

.floatconnect-wrap .description {
	color: #646970;
}


/* ---------------------------------------------------------
 * Free contact
 * --------------------------------------------------------- */

.floatconnect-contact-row {
	display: grid;

	grid-template-columns:
		220px
		minmax(250px, 500px);

	gap: 18px 24px;

	align-items: center;

	margin-top: 20px;
	padding: 20px;

	background: #f8f9fa;

	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.floatconnect-contact-row .floatconnect-contact-field {
	min-width: 0;
}

.floatconnect-contact-row .floatconnect-label {
	display: block;

	margin-bottom: 8px;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.floatconnect-contact-row .floatconnect-input {
	width: 100%;
	max-width: 500px;
}


/* ---------------------------------------------------------
 * Reduced motion
 * --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.floatconnect-wrap *,
	.floatconnect-wrap *::before,
	.floatconnect-wrap *::after {
		transition-duration: 0.01ms !important;
	}
}