/*
 * SAIS HostShop.
 *
 * Every colour and radius here is a custom property with a fallback. A SAIS
 * theme defines --navy/--accent/--line/--ink and the shop inherits its look;
 * any other theme gets the fallbacks and still renders sensibly.
 *
 * The plugin deliberately does NOT ship a card design of its own. It shipped
 * one before and it fought the theme it was sitting in.
 */

/* ---- domain search ---- */
.sais-domain__row {
	display: flex;
	gap: 10px;
	background: var(--white, #fff);
	padding: 8px;
	border-radius: 14px;
	box-shadow: 0 2px 4px rgba(0, 44, 90, .08), 0 18px 48px rgba(0, 44, 90, .14);
}
.sais-domain__input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	padding: 14px 16px;
	font-size: 16.5px;
	font-family: inherit;
	color: var(--ink, #10232F);
	border-radius: 9px;
	background: transparent;
}
.sais-domain__input::placeholder { color: #9AAAB6; }
.sais-domain__go {
	border: 0;
	cursor: pointer;
	border-radius: 9px;
	padding: 12px 26px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--accent, #006EB5);
	transition: background .15s;
}
.sais-domain__go:hover { background: var(--navy, #003E68); }

.sais-domain__status { margin: 14px 0 0; font-size: 15px; min-height: 1.4em; }
.sais-domain__status.is-invalid { color: #FFD2CC; }

/* ---- results grid ---- */
.sais-domain__grid {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
	background: var(--white, #fff);
	border-radius: 14px;
	padding: 10px;
}
.sais-domain__row-item {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-radius: 9px;
	background: var(--mist, #F5F8FB);
}
.sais-domain__row-item.is-taken { opacity: .55; }
.sais-domain__name {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 15.5px;
	color: var(--navy, #003E68);
	overflow-wrap: anywhere;
}
.sais-domain__state { font-size: 13px; font-weight: 600; color: #12805C; }
.is-taken .sais-domain__state { color: #A3241C; font-weight: 500; }
.is-unknown .sais-domain__state { color: var(--ink-soft, #4A5C68); font-weight: 500; }
.sais-domain__price {
	font-size: 14px;
	color: var(--ink-soft, #4A5C68);
	min-width: 68px;
	text-align: right;
}
.sais-domain__add { padding: 8px 18px; font-size: 14px; }
.sais-domain__add-spacer { display: block; width: 74px; }

@media (max-width: 640px) {
	.sais-domain__row { flex-direction: column; }
	.sais-domain__row-item { grid-template-columns: 1fr auto; row-gap: 6px; }
	.sais-domain__add, .sais-domain__add-spacer { grid-column: 1 / -1; width: auto; text-align: center; }
}

/* ---- plans ----
 * Intentionally minimal. The theme supplies .card/.plan; the plugin only
 * supplies the spec rows, which no theme can know the shape of.
 */
.sais-plan__spec {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line, #D8E3ED);
	font-size: 14.5px;
}
.sais-plan__spec:last-of-type { border-bottom: 0; }
.sais-plan__spec span { color: var(--ink-soft, #4A5C68); }
.sais-plan__spec strong { color: var(--ink, #10232F); }