.dc2 {
    --dc2-brand: var(--color-brand, #09757a);
    --dc2-danger: var(--color-danger, #db3232);
    --dc2-gold: var(--color-gold, #d9a400);
    --dc2-ink: #212529;
    --dc2-border: #d9dee3;
    background: linear-gradient(90deg, #fff 1%, rgba(236, 238, 239, .35) 50%, #fff 100%);
    color: var(--dc2-ink);
    box-sizing: border-box;
    padding: 2rem 1rem;
}

.dc2 *, .dc2 *::before, .dc2 *::after { box-sizing: border-box; }
.dc2__inner { width: min(100%, 860px); margin-inline: auto; }
.dc2__form { position: relative; }

.dc2__search {
    align-items: stretch;
    background: #fff;
    border: 1px solid #86b7fe;
    border-radius: .4rem;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .14);
    display: flex;
    min-height: 52px;
    overflow: hidden;
}

.dc2__www { align-items: center; background: #f5f6f7; display: flex; padding: .75rem; }
.dc2__name {
    border: 0 !important;
    box-shadow: none !important;
    color: var(--dc2-ink);
    flex: 1 1 auto;
    font: inherit;
    min-width: 0;
    outline: 0;
    padding: .75rem;
    text-align: center;
}
.dc2__toggle {
    align-items: center;
    background: #fff;
    border: 0;
    border-left: 1px solid var(--dc2-border);
    color: var(--dc2-ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: .5rem;
    padding: .6rem 1rem;
    white-space: nowrap;
}
.dc2__chevron { flex: 0 0 auto; transition: transform .2s ease; }
.dc2__toggle[aria-expanded="false"] .dc2__chevron { transform: rotate(180deg); }

.dc2__tlds {
    display: grid;
    gap: .25rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-height: 165px;
    overflow: auto;
    padding: .75rem .25rem;
}
.dc2__tlds[hidden] { display: none; }
.dc2__tld {
    align-items: center;
    cursor: pointer;
    direction: ltr;
    display: flex;
    font-size: .85rem;
    gap: .4rem;
    margin: 0;
    padding: .35rem .5rem;
    text-align: left;
}
.dc2__tld input { accent-color: var(--dc2-brand); margin: 0; }

.dc2__promo { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.5rem 0; }
.dc2__promo-item { display: inline-flex; direction: ltr; gap: .35rem; }
.dc2__promo-item b { color: var(--dc2-gold); }
.dc2__promo a { color: var(--dc2-brand); }

.dc2__actions { display: flex; gap: .5rem; justify-content: center; margin: 1rem 0; }
.dc2__submit, .dc2__clear, .dc2__retry, .dc2__order {
    border: 1px solid var(--dc2-brand);
    border-radius: .35rem;
    cursor: pointer;
    font: inherit;
    padding: .55rem 1rem;
    text-decoration: none !important;
}
.dc2__submit { background: transparent; color: var(--dc2-brand); min-width: 145px; }
.dc2__submit:hover, .dc2__submit:focus-visible { background: var(--dc2-brand); color: #fff; }
.dc2__submit:disabled { cursor: wait; opacity: .65; }
.dc2__submit.is-loading::after { animation: dc2-spin .7s linear infinite; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; content: ""; display: inline-block; height: 1em; margin-right: .5rem; vertical-align: -.15em; width: 1em; }
.dc2__clear { background: transparent; border-color: var(--dc2-danger); color: var(--dc2-danger); }
.dc2__clear[hidden] { display: none; }
.dc2__notice { color: var(--dc2-danger); direction: rtl; margin: .75rem 0; text-align: center; }
.dc2__notice[hidden] { display: none; }

.dc2__results { display: grid; gap: 1rem; margin-top: 1.25rem; }
.dc2__batch { display: grid; gap: .45rem; }
.dc2__result {
    align-items: center;
    background: #fff;
    border: 1px solid #eef0f2;
    border-left: 4px solid var(--dc2-gold);
    border-radius: .25rem;
    display: flex;
    min-height: 52px;
    padding: .4rem .7rem;
}
.dc2__result.is-available { background: #f2fbf8; border-color: #b9e4d6; border-left-color: var(--dc2-brand); }
.dc2__result.is-unavailable { background: #fff6f6; border-color: #f0caca; border-left-color: var(--dc2-danger); }
.dc2__result.is-unknown { background: #fffbef; border-color: #ead79a; border-left-color: var(--dc2-gold); }
.dc2__result-name { direction: ltr; flex: 1 1 auto; font-weight: 700; letter-spacing: .04em; overflow: hidden; text-align: left; text-overflow: ellipsis; }
.dc2__state { border-radius: 999px; font-size: .82rem; font-weight: 700; margin-right: 5px; padding: .35rem .75rem; }
.dc2__result.is-available .dc2__state { background: #d9f3e9; color: #087052; }
.dc2__result.is-unavailable .dc2__state { background: #f8dddd; color: #a82424; }
.dc2__result.is-unknown .dc2__state { background: #f6e8b7; color: #765a00; }
.dc2__order { background: var(--dc2-brand); color: #fff !important; }
.dc2__retry { background: #fff; border-color: var(--dc2-gold); color: var(--dc2-ink); font-size: .8rem; }
.dc2__result.is-checking { opacity: .72; }
.dc2__result.is-checking .dc2__state { padding-right: 2rem; position: relative; }
.dc2__result.is-checking .dc2__state::before {
    animation: dc2-spin-centered .7s linear infinite;
    border: 2px solid var(--dc2-brand);
    border-top-color: transparent;
    border-radius: 50%;
    content: "";
    height: 1rem;
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
}

@keyframes dc2-spin { to { transform: rotate(360deg); } }
@keyframes dc2-spin-centered {
    from { transform: translateY(-50%) rotate(0); }
    to { transform: translateY(-50%) rotate(360deg); }
}

@media (max-width: 767px) {
    .dc2__tlds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dc2__www { display: none; }
}
@media (max-width: 520px) {
    .dc2 { padding-inline: .5rem; }
    .dc2__search { flex-wrap: wrap; }
    .dc2__name { flex-basis: calc(100% - 115px); text-align: right; }
    .dc2__toggle { font-size: .8rem; padding-inline: .65rem; }
    .dc2__tlds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc2__result { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .dc2 *, .dc2 *::before, .dc2 *::after { scroll-behavior: auto !important; transition: none !important; }
}