/* Mobile first: one column, 16px inputs (no zoom on iPhone), big touch targets. The search, the result and the basket are styled
   by domains.css (the same classes as the domain search); this file holds what is only in the mail form. */
.wasfm { font-size: 16px; }
/* The domain sits inside the search box, to the right of the name. */
:is(.wasfm, .wasfs) .wasfd-search { align-items: center; }
.wasf-domain { display: flex; align-items: center; align-self: stretch; padding: 0 .7em; border-radius: 6px; background: #f0f0f1; font-weight: 600; white-space: nowrap; }
:is(.wasfm, .wasfs) .wasfd-search select { flex: 0 1 auto; width: auto; max-width: 45%; min-height: 48px; padding: 0 .6em; border: 0; border-radius: 6px; background-color: #f0f0f1; font-size: 16px; font-weight: 600; }
.wasf-ok { color: #1a7f37; }
.wasf-bad { color: #b32d2e; }
:is(.wasfm, .wasfs) .wasf-offers { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1em; list-style: none; margin: 0; padding: 0; }
@media (max-width: 480px) {
	:is(.wasfm, .wasfs) .wasf-offers { grid-template-columns: minmax( 0, 1fr ); }
}
:is(.wasfm, .wasfs) .wasf-offer { display: flex; flex-direction: column; align-items: stretch; gap: .6em; min-width: 0; margin: 0; }
:is(.wasfm, .wasfs) .wasf-offer .wasfd-name { flex: none; }
:is(.wasfm, .wasfs) .wasf-offer .wasfd-price { display: grid; grid-template-columns: auto minmax( 0, 1fr ); align-items: center; column-gap: .6em; text-align: left; font-variant-numeric: tabular-nums; }
:is(.wasfm, .wasfs) .wasf-offer .wasfd-price small { grid-column: 1 / -1; }
:is(.wasfm, .wasfs) .wasf-offer .wasfd-price strong { font-size: 1.4em; }
:is(.wasfm, .wasfs) .wasf-offer .wasfd-add { margin-top: auto; }
.wasf-best-price { align-self: flex-start; padding: .2em .6em; border-radius: 6px; background: var( --wasf-button-bg, #111 ); color: var( --wasf-button-text, #fff ); font-size: .8em; font-weight: 600; }
.wasf-saving-badge { color: #1a5f1a; font-size: .8em; font-weight: 600; }
.wasf-offer-monthly, .wasf-offer-saving { font-size: .85em; }
.wasf-offer-saving { font-weight: 600; }
.wasf-note { padding: .8em; background: #f6f7f7; border: 1px solid #dcdcde; }

/* The modal for payment and "order received". */
html.wasf-locked { overflow: hidden; }
.wasf-modal { border: 0; border-radius: 12px; padding: 0; width: calc( 100% - 24px ); max-width: 460px; box-shadow: 0 10px 40px rgba( 0, 0, 0, .35 ); color: inherit; }
.wasf-modal::backdrop { background: rgba( 0, 0, 0, .55 ); }
.wasf-modal.wasf-fallback[open] { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 100000; }
.wasf-modal-box { padding: 1.25em; font-size: 16px; line-height: 1.45; }
.wasf-modal-title { margin: 0 0 .6em; font-size: 1.35em; }
.wasf-modal-body p { margin: 0 0 .7em; }
.wasf-modal-address { font-size: 1.15em; font-weight: 700; word-break: break-all; }
.wasf-modal-test { padding: .5em .7em; background: #fcf0c0; border: 1px solid #dba617; }
.wasf-modal-pw { display: block; margin: 0 0 .7em; padding: .7em; font-size: 1.2em; background: #f0f0f1; word-break: break-all; user-select: all; }
.wasf-modal-wait { padding: 1em 0; }
.wasf-modal-actions { display: flex; flex-direction: column-reverse; gap: .6em; margin-top: 1.1em; }
.wasf-btn { min-height: 52px; padding: .6em 1.2em; font-size: 17px; cursor: pointer; }
.wasf-btn-primary { font-weight: 600; }
.has-wasf-button-colors .wasf-btn-primary { border-color: var( --wasf-button-bg ); background: var( --wasf-button-bg ); color: var( --wasf-button-text, #fff ); }
@media ( min-width: 560px ) {
	.wasf-modal-actions { flex-direction: row-reverse; justify-content: flex-start; }
	.wasf-btn { min-width: 9em; }
}