/* Podstrona /domeny (templates/domeny.html). Wspólne elementy podstron są w subpage.css, tu tylko wyszukiwarka, wyniki i cennik. */


/* ---------- reguły przeniesione z domain.css (ładowane przed resztą tego pliku) ---------- */

.domainContainer {
    float: left;
    width: 100%;
    position: relative;
}

.domains,
.domain,
.domainTitle {
    width: 100%;
    float: left;
}

.domain {
    float: left;
    width: -moz-calc(50% - 30px);
    width: -webkit-calc(50% - 30px);
    width: -o-calc(50% - 30px);
    width: calc(50% - 30px);
    padding: 10px;
    margin: 10px;
    border-bottom: 0px;
    border-right: 0px;
    background: #fff;
    box-shadow: 10px 10px 10px #e2e7ef;
    border-radius: 5px;
}

.domainTitle {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    width: auto;
    float: none;
}

.mainDomain {
    padding: 20px;
    background: #d5f6f9;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #36beca;
    border-radius: 5px;
    font-weight: bold;
    font-size: 20px;
    position: relative;
    box-shadow: 7px 7px 7px #e2e7ef;
}

.mainDomainError {
    color: #e65dd1;
    background: #ffd9f9;
    box-shadow: 7px 7px 7px #e2e7ef;
}

.mainDomain span,
.domain span {
    height: 36px;
    line-height: 36px;
}

.mainDomain span.priceNetto,
.mainDomain span.priceDiscount,
.domain span.priceNetto,
.domain span.priceDiscount {
    color: #6556e7;
    font-size: 20px;
    float: right;
    margin-right: 20px;
}

.priceDiscount span:nth-child(2) {
    color: #6556e7 !important;
}

.mainDomain span.priceDiscount,
.domain span.priceDiscount {
    margin-right: 35px;
}

.domain span.domainName {
    font-weight: bold;
    display: inline-block;
}

.domain span.domainStatus {
    color: #36beca;
    font-weight: bold;
    position: relative;
}

.domain.domainErrorStatus .priceNetto,
.domain.domainErrorStatus .priceDiscount span:nth-child(2),
.mainDomainError .priceNetto,
.mainDomainError .priceDiscount span:nth-child(2) {
    color: #e65dd1 !important;
}

.domain.domainErrorStatus .priceDiscount span:nth-child(3),
.mainDomainError .priceDiscount span:nth-child(3) {
    background: #e65dd1;
}

.domain.domainErrorStatus span.domainStatus {
    color: #e65dd1;
}

.domain.domainErrorStatus span.domainStatus span.domainSep {
    background: #e65dd1;
}

.mainDomain span.mainDomainStatus,
.domain span.domainStatus {
    padding-left: 40px;
    text-transform: uppercase;
}

.mainDomain span.mainDomainSep,
.domain span.domainSep {
    position: absolute;
    width: 2px;
    background: #36beca;
    height: 44px;
    line-height: normal;
    margin-left: -20px;
    margin-top: -5px;
}

.mainDomainError span.mainDomainSep {
    background: #e65dd1;
}

.mainDomain button,
.domain button {
    float: right;
}

.restDomains,
.restDomains > div {
    float: left;
    width: 100%;
}

.restDomains > div .domain:nth-child(even) {
    margin-left: 0px;
}

.restDomains > div .domain:nth-child(odd) {
    margin-right: 0px;
}

.restDomains .domainTitle {
    margin-top: 20px;
}

.domainInfo,
.mainDomainInfo {
    margin-left: 10px;
    cursor: pointer;
    font-size: 16px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    height: auto !important;
    line-height: normal !important;
}

.mainDomainInfo {
    font-size: 20px;
}

.domainInfo:hover,
.mainDomainInfo:hover {
    opacity: 0.6;
}

.searchImage {
    width: 537px;
    height: 330px;
    background-image: url('/images/landingPage/images/znajdz-domene-min.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: 0.4;
    margin: 0 auto;
}

.showAllDomainButton {
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
    opacity: 1;
    float: left;
    text-align: center;
}

.priceTransferInfo {
    font-size: 12px;
    font-weight: normal;
    position: relative;
    top: -3px;
    margin-right: 5px;
}

/* ---------- koniec reguł przeniesionych ---------- */

/* ---------- wyszukiwarka w nagłówku ---------- */

.h24-domains__hero .home-search {
    max-width: 726px;
}

/* przycisk wyszukiwarki: domain.js podmienia ikonę fa-search na fa-spin i dokleja disabledButton */
.home .h24-domains__hero .home-search .home-btn {
    padding: 0 22px;
}

.home .h24-domains__hero .home-search .home-btn.disabledButton {
    opacity: .7;
    pointer-events: none;
}

/* ---------- wyniki wyszukiwania (HTML z domain.js: createMainDomain, createDomain) ---------- */

.h24-domains__results .home-container::after {
    content: "";
    display: block;
    clear: both;
}

/* spinner w trakcie szukania; stary styles.css ustawia tu position: absolute na całą wysokość */
.h24-domains .emptyContainerRegister {
    position: static;
    width: 100% !important; /* base.css na telefonie: calc(100% - 40px), przez co spinner był 20 px w lewo od środka */
    height: auto !important;
    padding: 30px 0 10px;
    background: transparent;
}

.h24-domains .emptyContainerRegister > div > i {
    font-size: 56px;
    color: var(--h24-icon-bg);
}

/* ilustracja z poprzedniego wyglądu; nagłówek ma już własną */
.h24-domains .searchImage {
    display: none !important;
}

/* siatka wyników: dwie kolumny kart, nagłówki grup, główna domena i przycisk na całą szerokość */
.h24-domains .domainContainer,
.h24-domains .restDomains > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    float: none;
}

.h24-domains .domainContainer > :not(.domain),
.h24-domains .restDomains > div > :not(.domain) {
    grid-column: 1 / -1;
}

.h24-domains .restDomains {
    display: flex;
    flex-direction: column;
    gap: 12px;
    float: none;
}

.h24-domains .domainSpace {
    display: none;
}

.h24-domains .domainTitle {
    margin: 22px 0 2px;
    color: var(--h24-heading);
    font-size: 20px;
}

.h24-domains .mainDomain,
.h24-domains .domain {
    box-sizing: border-box;
    border-radius: 14px;
    background: var(--h24-card-bg);
    box-shadow: var(--h24-shadow);
    color: var(--h24-heading);
}

/* wiersz jako flex (domain.js ustawia elementy floatami): nazwa, status, cena przy prawej, przycisk;
   na wąskim ekranie cena z przyciskiem przechodzą do drugiej linii i zostają przy prawej */
.h24-domains .mainDomain,
.h24-domains .domain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
}

.h24-domains .mainDomain > *,
.h24-domains .domain > * {
    float: none !important;
}

.h24-domains .mainDomainName,
.h24-domains .domainName { order: 1; }
.h24-domains .mainDomainStatus,
.h24-domains .domainStatus { order: 2; }
.h24-domains .mainDomain .priceNetto,
.h24-domains .mainDomain .priceDiscount,
.h24-domains .domain .priceNetto,
.h24-domains .domain .priceDiscount { order: 3; margin: 0 14px 0 auto !important; }
.h24-domains .mainDomain button,
.h24-domains .domain button { order: 4; }

/* domena, której szukasz: delikatny gradient i ramka w kolorze statusu (inspiracja) */
.h24-domains .mainDomain {
    margin: 20px 0 4px;
    padding: 16px 18px 16px 24px;
    border: 2px solid var(--h24-turquoise);
    background: #effafb;
}

/* trzy kreski przy wolnej domenie (inspiracja) */
.h24-domains .mainDomain:not(.mainDomainError)::before {
    content: "";
    position: absolute;
    top: -24px;
    right: -24px;
    width: 30px;
    height: 30px;
    /* kreski pod kątem 80°, 45° i 10° od rogu (lewy dolny róg obrazka = róg karty) */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg stroke='%2336beca' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M2.4 16.2L3.8 8.3'/%3E%3Cpath d='M9.2 20.8L15.6 14.4'/%3E%3Cpath d='M13.8 27.6L21.7 26.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom / contain;
    pointer-events: none;
}

.h24-domains .mainDomainError {
    border-color: var(--h24-pink);
    background: #fdf2fb;
}

/* width z !important: base.css (dawny mobile.css) do 1310 px zwęża karty o 20 px */
.h24-domains .domain {
    width: auto !important;
    margin: 0 !important;
    padding: 9px 10px 9px 18px;
}

.h24-domains .mainDomain span,
.h24-domains .domain span {
    height: auto;
    line-height: 1.4;
}

.h24-domains .mainDomain .mainDomainName {
    font-size: 19px;
    font-weight: 700;
}

.h24-domains .domain .domainName {
    font-size: 14px;
    font-weight: 700;
}

/* status jako pastylka z delikatnym gradientem, kreska oddziela ją od nazwy */
.h24-domains .mainDomain .mainDomainStatus,
.h24-domains .domain .domainStatus {
    position: relative;
    margin-left: 29px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e9f8f9, #d7f2f4);
    color: var(--h24-turquoise);
    font-size: 12px;
    font-weight: 700;
    -webkit-text-stroke: .25px currentColor; /* Comfortaa 700 przy 12 px wygląda cienko */
    letter-spacing: .04em;
}

.h24-domains .mainDomain .mainDomainSep,
.h24-domains .domain .domainSep {
    left: -15px;
    top: 50%;
    height: 20px;
    margin: -10px 0 0;
    background: var(--h24-border);
}

.h24-domains .mainDomainError .mainDomainStatus,
.h24-domains .domain.domainErrorStatus .domainStatus {
    background: linear-gradient(135deg, #fdeefb, #fbe0f6);
    color: var(--h24-pink); /* ten sam róż co przycisk „Poczta” w menu */
}

/* stary domain.css barwi kreskę na różowo przy zajętych domenach */
.h24-domains .mainDomainError span.mainDomainStatus span.mainDomainSep,
.h24-domains .domain.domainErrorStatus span.domainStatus span.domainSep {
    background: var(--h24-border);
}

/* pastylka w szukanej domenie jak kwadrat pod ikoną „Domena a hosting” na stronie głównej (#cdeff2 na #effafb), róż analogicznie */
.h24-domains .mainDomain .mainDomainStatus {
    background: #cdeff2;
}

.h24-domains .mainDomainError .mainDomainStatus {
    background: #f9d6f3;
}

.h24-domains .mainDomainInfo,
.h24-domains .domainInfo {
    display: inline-flex;
    margin-left: 0;
    font-size: 14px;
}

/* zajęte domeny: róż jak przycisk „Poczta” w menu */
.h24-domains .domain.domainErrorStatus .priceNetto,
.h24-domains .mainDomain.mainDomainError .priceNetto,
.h24-domains .domainErrorStatus .priceDiscount span:nth-child(2),
.h24-domains .mainDomainError .priceDiscount span:nth-child(2),
.h24-domains .priceTransferInfo {
    color: var(--h24-pink) !important;
}

/* cena wolnej domeny w turkusie, zajętej w różu (wyżej) */
.h24-domains .mainDomain .priceNetto,
.h24-domains .domain .priceNetto,
.h24-domains .priceDiscount span:nth-child(2) {
    color: var(--h24-turquoise) !important;
    font-size: 16px;
    font-weight: 700;
}

.h24-domains .mainDomain .priceNetto {
    font-size: 18px;
}

.h24-domains .mainDomain .priceNetto,
.h24-domains .domain .priceNetto {
    display: inline-flex;
    align-items: center;
}

.h24-domains .priceTransferInfo {
    top: 0;
    margin-right: 6px;
    font-size: 12px;
    font-weight: 700;
}

/* przyciski wyników (domain.js): jak „Do koszyka” w kartach hostingu i SSL. Wolna domena: jasny turkus,
   zajęta (transfer): jasny róż, po najechaniu pełny kolor; w koszyku pełny kolor i ikona kosza */
.h24-domains .h24-dbtn {
    --dbtn-color: var(--h24-turquoise);
    --dbtn-bg: var(--h24-tag-bg);
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 42px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: var(--h24-radius-small);
    background: var(--dbtn-bg);
    box-shadow: none;
    color: var(--dbtn-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--h24-transition), color var(--h24-transition);
}

.h24-domains .h24-dbtn i {
    margin: 0;
    font-size: 15px;
}

.h24-domains .h24-dbtn--transfer {
    --dbtn-color: var(--h24-pink);
    --dbtn-bg: var(--h24-pink-bg);
}

.h24-domains .h24-dbtn:hover,
.h24-domains .h24-dbtn--in-cart {
    background: var(--dbtn-color);
    color: #fff;
}

.h24-domains .h24-dbtn:focus-visible {
    outline: 3px solid var(--h24-brand);
    outline-offset: 2px;
}

/* szukana domena (karta w kolorze statusu): przycisk w pełnym kolorze z cieniem, jak przyciski główne */
.h24-domains .mainDomain .h24-dbtn {
    background: var(--dbtn-color);
    box-shadow: 5px 5px 5px rgba(54, 190, 202, .4);
    color: #fff;
    transition: box-shadow var(--h24-transition);
}

.h24-domains .mainDomain .h24-dbtn--transfer {
    box-shadow: 5px 5px 5px rgba(230, 93, 209, .4);
}

.h24-domains .mainDomain .h24-dbtn:hover {
    box-shadow: none;
}

/* buttons.css nadaje każdemu <button> zaokrąglenie 5 px i grubość 400 (z !important) */
.h24-domains .h24-dbtn {
    border-radius: var(--h24-radius-small) !important;
    font-weight: 700 !important;
}

/* telefon: przy szukanej domenie sama ikona (stary base.css ukrywa nazwę i daje szerokość 35 px przy wysokości 42 px), przycisk kwadratowy */
@media (max-width: 805px) {
    .h24-domains .mainDomain .h24-dbtn {
        width: 42px !important;
        padding: 0 !important;
    }
}

/* w wierszu listy sama ikona (nazwa w aria-label i dymku) */
.h24-domains .h24-dbtn--icon {
    width: 38px;
    height: 38px;
    padding: 0;
}

.h24-domains .showAllDomainButton {
    padding-top: 14px;
    text-align: center;
}

/* mniej miejsca między wynikami a kolejną sekcją */
.h24-domains__results + .home-section {
    padding-top: 40px;
}

/* „Pokaż wszystkie domeny” (home-btn--outline); w trakcie szukania przygaszony */
.h24-domains .showAllDomainButton .home-btn.disabledButton {
    cursor: not-allowed;
}

/* ---------- tabela cen ---------- */

.h24-domains__table {
    max-width: 900px;
    margin: 0 auto;
}

.h24-domains__table-more {
    margin-top: 28px !important;
    text-align: center;
}

/* ---------- FAQ: bez ilustracji pytania na całą szerokość ---------- */

.h24-domains__faq {
    align-items: center;
}

/* ---------- responsywność ---------- */

/* od 1060 px kontener ma 20 px marginesu: kreski nad kartą bliżej rogu, żeby nie wychodziły poza ekran (przewijanie w poziomie) */
@media (max-width: 1060px) {
    .h24-domains .mainDomain:not(.mainDomainError)::before { top: -18px; right: -14px; width: 22px; height: 22px; }
}

@media (max-width: 900px) {
    .h24-domains .domainContainer,
    .h24-domains .restDomains > div { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    /* nazwa w pierwszej linii (długie nazwy się nie mieszczą obok statusu), w drugiej status po lewej, cena z przyciskiem po prawej */
    .h24-domains .mainDomainName,
    .h24-domains .domainName { flex-basis: 100%; overflow-wrap: anywhere; }
    .h24-domains .mainDomain .mainDomainStatus,
    .h24-domains .domain .domainStatus { margin-left: 0; }
    .h24-domains .mainDomain .mainDomainSep,
    .h24-domains .domain .domainSep { display: none; }
    .h24-domains .mainDomain { padding: 14px 14px 14px 18px; }
    .home .h24-domains__hero .home-search .home-btn { padding: 0 16px; }
    .h24-domains__table th:nth-child(4),
    .h24-domains__table td:nth-child(4) { display: none; }
}

/* ---------- okno „Transfer domeny”: elementy tylko tego okna (wygląd okna: components/modal.css) ----------

#modalTransfer .transferProgressForm {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    height: 3px;
    background: var(--h24-brand);
}

/* pole jak .home-input (ikona, ramka, fioletowa poświata przy fokusie) */
.h24-modal__input {
    position: relative;
}

.h24-modal__input > i {
    position: absolute;
    top: 16px;
    left: 18px;
    color: var(--h24-brand);
    font-size: 17px;
    pointer-events: none;
}

#modalTransfer .h24-modal__input input {
    display: block;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 16px 0 48px;
    border: 1px solid var(--h24-search-border);
    border-radius: 12px;
    background: var(--h24-card-bg);
    box-shadow: var(--h24-shadow);
    color: var(--h24-heading);
    font-family: inherit;
    font-size: 16px;
    letter-spacing: .02em;
    outline: none;
    transition: box-shadow var(--h24-transition);
}

#modalTransfer .h24-modal__input input::placeholder {
    color: var(--h24-text);
    letter-spacing: 0;
    opacity: 1;
}

#modalTransfer .h24-modal__input input:focus {
    box-shadow: 0 0 0 3px rgba(101, 86, 231, .18), var(--h24-shadow);
}