/**
 * The gift wrapping controls.
 *
 * Two ticks and a card. They sit inside WooCommerce's own basket table, so the
 * job here is to make them read as part of it rather than as something bolted
 * underneath.
 */

.diwan-wrap__item {
	align-items: flex-start;
	color: var(--diwan-text-soft, #444444);
	cursor: pointer;
	display: flex;
	font-size: 13px;
	gap: 8px;
	margin-block-start: 8px;
}

.diwan-wrap__price {
	color: var(--diwan-text-muted, #6e6e6e);
}

.diwan-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-weight: 400;
	padding-block: 6px;
}

.diwan-wrap.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.diwan-wrap__parcel {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	gap: 8px;
}

.diwan-wrap__note {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	gap: 6px;
}

.diwan-wrap__note textarea {
	border: 1px solid var(--diwan-border, #e6e6e6);
	font: inherit;
	inline-size: 100%;
	padding: 8px 10px;
	resize: vertical;
}

.diwan-wrap__note textarea:focus {
	border-color: var(--diwan-black, #000000);
	outline: none;
}

/* The button is only for a reader with no script, and the script says so by
   marking the page the moment it runs. */
.diwan-wrap__apply {
	align-self: flex-start;
	background: var(--diwan-black, #000000);
	border: 1px solid var(--diwan-black, #000000);
	color: var(--diwan-white, #ffffff);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 9px 14px;
	text-transform: uppercase;
}

.diwan-js .diwan-wrap__apply {
	display: none;
}

/* How much of the message is left, under the box. */
.diwan-wrap__count {
	color: var(--diwan-text-muted, #6e6e6e);
	display: block;
	font-size: 11px;
	letter-spacing: 0.02em;
	margin-block-start: 4px;
	text-align: end;
	text-transform: none;
}

.diwan-wrap__count.is-near {
	color: #c62828;
}