/*
* Custome bottom sticky bar. 
* General style.
* Version 2.0.0
* Author: Uspio
*
*/

.custom-sticky {
    align-items: center !important;
}

.custom-sticky-price {
    margin-right: 50px;
}

.bottom-action-anchor + .bottom-action-sticky {
    border-top: 2px solid #f2821b;
}

#badgeCount {
    color: black;
}

#stickyPrice {
    font-weight: 400;
    color: #17191c;
    font-size: 16px;
    line-height: 16px;
    margin-right: 0px;

    @media screen and (min-width: 768px) {
        margin-right: 50px;
        font-size: 24px;
        line-height: 16px;
    }
}

.custom-sticky-btn {
    font-size: 16px !important;
    max-width: 113px;
    border-radius: 8px !important;
    background: #f2821b;
}

.custom-label {
    color: #17191c;
}

.bottom-action-sticky.is-fixed {
    height: calc(var(--bottom-action-sticky-height) * 1.1);

    @media screen and (min-width: 768px) {
        height: var(--bottom-action-sticky-height);
    }
}

.bottom-action-sticky-wrapper {
    max-width: 820px !important;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.bottom-action-sticky-wrapper .sticky-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end !important;
    justify-content: center;
    grid-row-gap: 12px;

    @media screen and (min-width: 768px) {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center !important;
    }
}

.bottom-action-sticky-wrapper .sticky-actions #btnDomainContinue {
    height: var(--ui-height-sm);
    padding: var(--ui-padding-sm-v) var(--ui-padding-sm-h);
    font-size: var(--btn-sm-font-size);
    line-height: var(--btn-sm-line-height);
    border-radius: var(--btn-sm-border-radius);

    @media screen and (min-width: 768px) {
        height: var(--ui-height-lg);
        padding: var(--ui-padding-base-v) var(--ui-padding-lg-h);
        font-size: var(--btn-lg-font-size);
        line-height: var(--btn-lg-line-height);
        border-radius: var(--btn-lg-border-radius);
    }
}

#spotlightTlds .is-available {
    color: #2B9F46;
}

#spotlightTlds .is-unavailable {
    color: #17191C;
    font-weight: 500;
}

#spotlightTlds .is-available,
#spotlightTlds .is-unavailable {
    font-size: var(--font-size-lg);
    margin-left: 5px;
}

.spotlight.spotlight-disabled .is-available {
    display: none;
}

.spotlight:not(.spotlight-disabled) .is-unavailable {
    display: none;
}

.spotlight.spotlight-disabled {
    pointer-events: auto;
}

.domain-unavailable .message-body {
    gap: 12px;
}

.domain-unavailable .message-body span.domainIsUnavailable-label {
    text-decoration: underline;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-h4);
    line-height: var(--line-height-h4);
}

#spotlightTlds .is-available {
    color: #2B9F46;
}

#spotlightTlds .is-unavailable {
    color: #17191C;
    font-weight: 500;
}

#spotlightTlds .is-available,
#spotlightTlds .is-unavailable {
    font-size: var(--font-size-lg);
    margin-left: 5px;
}

.spotlight.spotlight-disabled .is-available {
    display: none;
}

.spotlight:not(.spotlight-disabled) .is-unavailable {
    display: none;
}

.spotlight.spotlight-disabled {
    pointer-events: auto;
}

.domain-unavailable .message-body {
    gap: 12px;
}

.domain-unavailable .message-body span.domainIsUnavailable-label {
    text-decoration: underline;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-h4);
    line-height: var(--line-height-h4);
}