/* Ankara Revolution - WhatsApp ordering UI */

/* Catalog mode is on: hide cart UI that no longer leads anywhere. */
.wd-header-cart,
.wd-dropdown-cart,
.widget_shopping_cart,
.wd-tools-element.cart-widget-opener,
.wd-nav-mobile .menu-item-cart,
.mobile-nav-cart {
	display: none !important;
}

.ankara-wa-order {
	margin: 22px 0 10px;
	max-width: 380px;
}

.ankara-wa-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.ankara-wa-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	flex: 1 1 140px;
}

.ankara-wa-field--qty {
	flex: 0 0 96px;
}

.ankara-wa-field--country,
.ankara-wa-field--toggle,
.ankara-wa-field--state-home,
.ankara-wa-field--state-other,
.ankara-wa-field--city {
	flex: 1 1 100%;
}

/* "Delivering outside Nigeria?" - positioning only; colour is shared above. */
.ankara-wa-field--toggle {
	margin-top: -6px;
}

.ankara-wa-outside-toggle {
	align-self: flex-start;
	cursor: pointer;
}

.ankara-wa-outside-toggle:hover,
.ankara-wa-outside-toggle:focus {
	color: #157a3c;
}

.ankara-wa-outside-toggle:focus-visible {
	outline: 2px solid #25d366;
	outline-offset: 2px;
}

.ankara-wa-order.is-missing-state .ankara-wa-state-other {
	border-color: #c0392b;
	outline: 2px solid rgba(192, 57, 43, .35);
	outline-offset: 1px;
}

.ankara-wa-field[hidden] {
	display: none;
}

.ankara-wa-field label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .8;
}

/* Size guide link and the "Delivering outside Nigeria?" link share one rule,
   so their colour and sizing can never drift apart. */
.ankara-wa-guide,
.ankara-wa-outside-toggle {
	font-size: 11px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	color: #1da851;
	white-space: nowrap;
}

/* Green, no underline in any state. Woodmart sets link decoration via
   --wd-link-decor / --wd-link-decor-hover, which beats a plain .class rule,
   so every link state is listed explicitly here. */
.ankara-wa-guide,
.ankara-wa-guide:link,
.ankara-wa-guide:visited,
.ankara-wa-guide:hover,
.ankara-wa-guide:focus,
.ankara-wa-guide:active,
.ankara-wa-outside-toggle,
.ankara-wa-outside-toggle:link,
.ankara-wa-outside-toggle:visited,
.ankara-wa-outside-toggle:hover,
.ankara-wa-outside-toggle:focus,
.ankara-wa-outside-toggle:active {
	text-decoration: none;
	-webkit-text-decoration: none;
	border-bottom: 0;
	background-image: none;
}

.ankara-wa-guide:hover,
.ankara-wa-guide:focus,
.ankara-wa-outside-toggle:hover,
.ankara-wa-outside-toggle:focus {
	color: #157a3c;
}

.ankara-wa-guide:focus-visible,
.ankara-wa-outside-toggle:focus-visible {
	outline: 2px solid #25d366;
	outline-offset: 2px;
}

.ankara-wa-hint {
	font-size: 12px;
	line-height: 1.4;
	opacity: .7;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.ankara-wa-order select,
.ankara-wa-order input[type="number"],
.ankara-wa-order input[type="text"] {
	width: 100%;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--brdcolor-gray-300, #d4d4d4);
	border-radius: 4px;
	background-color: var(--bgcolor-white, #fff);
	color: inherit;
	font-size: 14px;
	line-height: 44px;
	appearance: none;
	-webkit-appearance: none;
}

.ankara-wa-order select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	padding-inline-end: 34px;
}

.ankara-wa-order select:focus,
.ankara-wa-order input[type="number"]:focus,
.ankara-wa-order input[type="text"]:focus {
	outline: 2px solid #25d366;
	outline-offset: 1px;
	border-color: #25d366;
}

.ankara-wa-order.is-missing-size .ankara-wa-size,
.ankara-wa-order.is-missing-state .ankara-wa-state {
	border-color: #c0392b;
	outline: 2px solid rgba(192, 57, 43, .35);
	outline-offset: 1px;
}

.ankara-wa-error {
	display: none;
	margin: 0 0 12px;
	font-size: 13px;
	color: #c0392b;
}

.ankara-wa-order.has-error .ankara-wa-error {
	display: block;
}

.ankara-wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 24px;
	background-color: #25d366;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: .02em;
	border-radius: 4px;
	transition: background-color .2s ease, transform .1s ease;
}

/* Woodmart sets text-decoration on a:hover via --wd-link-decor-hover, which
   beats a plain .class rule. These states are specific enough to win, so the
   button never grows an underline. */
.ankara-wa-btn,
.ankara-wa-btn:link,
.ankara-wa-btn:visited,
.ankara-wa-btn:hover,
.ankara-wa-btn:focus,
.ankara-wa-btn:active,
.ankara-wa-btn span,
.ankara-wa-btn:hover span,
.ankara-wa-btn:focus span {
	text-decoration: none;
	-webkit-text-decoration: none;
	border-bottom: 0;
	background-image: none;
}

.ankara-wa-btn svg {
	flex: 0 0 auto;
}

.ankara-wa-btn:hover,
.ankara-wa-btn:focus {
	background-color: #1da851;
	color: #fff;
}

.ankara-wa-btn:active {
	transform: translateY(1px);
}

.ankara-wa-btn:focus-visible {
	outline: 3px solid #0b3d24;
	outline-offset: 2px;
}

.ankara-wa-btn--muted {
	background-color: #6b7671;
}

.ankara-wa-btn--muted:hover,
.ankara-wa-btn--muted:focus {
	background-color: #5a645f;
}

.ankara-wa-note {
	margin: 10px 0 0;
	font-size: 13px;
	opacity: .75;
}

@media (max-width: 768px) {
	.ankara-wa-order {
		max-width: 100%;
	}
}