/* Tema Upper - Custom CSS */

.upper-avatar-promo-bg {
    background: linear-gradient(135deg, #4b1111 0%, #200404 100%);
    /* You can adjust these colors to match the exact brand red once the images are loaded */
}

.upper-avatar-mobile-steps {
    display: none;
}

.upper-avatar-mobile-steps__image {
    display: block;
    width: 100%;
    height: auto;
}

body[data-page="upper-home"],
body[data-page="upper-home"] .min-h-full,
body[data-page="upper-home"] .site-main,
body[data-page="upper-home"] .upper-avatar-promo-bg {
    background: linear-gradient(135deg, #4b1111 0%, #200404 100%);
}

body[data-page="upper-home"] .upper-footer {
    background: var(--upper-home-bg, #a62422);
}

.header-main {
    background-color: #000000;
}

/* Ensure navigation icons are white */
.header-main .icon-btn, 
.header-main button {
    color: #ffffff;
}

.header-main .icon-btn:hover, 
.header-main button:hover {
    color: #cccccc;
}

/* Upper footer */
.upper-footer {
    --upper-footer-separator: rgba(255, 255, 255, 0.45);
    background:
        radial-gradient(circle at 44% 58%, rgba(121, 0, 0, 0.72) 0%, rgba(73, 0, 0, 0.62) 24%, rgba(20, 20, 20, 0.92) 57%, #151515 100%),
        linear-gradient(135deg, #151515 0%, #210606 42%, #151515 100%);
    color: var(--footer-text, #ffffff);
    border-top: 0;
    border-radius: 2rem 2rem 0 0;
    margin-top: auto;
}

.upper-footer__inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 4vw, 3.75rem) clamp(1.5rem, 4vw, 3.5rem);
}

.upper-footer__columns {
    display: grid;
    gap: 2.75rem;
}

.upper-footer__columns--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.upper-footer__columns--four {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.upper-footer__col {
    min-width: 0;
}

.upper-footer__col + .upper-footer__col {
    border-left: 1px solid var(--upper-footer-separator);
    padding-left: clamp(2rem, 4vw, 4rem);
}

.upper-footer__logo {
    display: block;
    max-width: min(14rem, 90%);
    max-height: 4rem;
    object-fit: contain;
    margin-bottom: 1.25rem;
}

.upper-footer__brand {
    display: block;
    margin-bottom: 1.25rem;
    color: currentColor;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.upper-footer__payment-list,
.upper-footer__links {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.upper-footer__payment-list {
    gap: 0.55rem;
    font-size: 0.92rem;
    line-height: 1.35;
}

.upper-footer__payment-list p {
    margin: 0;
}

.upper-footer__links {
    font-size: 0.92rem;
    line-height: 1.35;
}

.upper-footer__link,
.upper-footer__social-link {
    color: var(--footer-text, #ffffff);
    text-decoration: none;
    transition: color 160ms ease, opacity 160ms ease;
}

.upper-footer__link:hover,
.upper-footer__social-link:hover {
    color: var(--footer-hover, #ffffff);
}

.upper-footer__title {
    margin: 0 0 0.45rem;
    color: var(--footer-text, #ffffff);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
}

.upper-footer__socials {
    margin-top: 1.5rem;
}

.upper-footer__social-wrap .social-icons__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.upper-footer__social-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.upper-footer__h167 {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.upper-footer__h167-logo {
    display: block;
    width: min(8rem, 80%);
    height: auto;
    margin-bottom: 0.25rem;
}

.upper-footer__h167-label {
    color: var(--footer-text, #ffffff);
    font-size: 0.92rem;
    line-height: 1.35;
}

.upper-footer__newsletter-form {
    margin-top: 1rem;
}

.upper-footer__newsletter-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.upper-footer__newsletter-input {
    min-width: 0;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-right: 0;
    border-radius: 0.35rem 0 0 0.35rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--footer-text, #ffffff);
    padding: 0.75rem 0.9rem;
    font-size: 0.88rem;
}

.upper-footer__newsletter-input::placeholder {
    color: color-mix(in srgb, var(--footer-text, #ffffff) 72%, transparent);
}

.upper-footer__newsletter-btn {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0 0.35rem 0.35rem 0;
    background: var(--footer-text, #ffffff);
    color: #151515;
    padding: 0.75rem 1rem;
    font-size: 0.86rem;
    font-weight: 700;
}

.upper-footer__newsletter-btn:hover {
    background: var(--footer-hover, #ffffff);
}

.upper-footer__privacy {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    color: var(--footer-text, #ffffff);
    font-size: 0.78rem;
    line-height: 1.4;
}

.upper-footer__privacy a {
    color: var(--footer-text, #ffffff);
    text-decoration: underline;
}

.upper-footer__privacy a:hover {
    color: var(--footer-hover, #ffffff);
}

@media (max-width: 1023px) {
    .upper-footer__columns,
    .upper-footer__columns--three,
    .upper-footer__columns--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body[data-page="upper-home"] .min-h-full,
    body[data-page="upper-home"] .site-main {
        background: #ffffff;
    }

    body[data-page="upper-home"] .upper-avatar-promo-bg {
        background: #ffffff;
    }

    .upper-avatar-mobile-steps {
        display: block;
        width: 100vw;
        margin-bottom: 2.5rem;
        margin-inline: calc(50% - 50vw);
    }

    .upper-avatar-desktop-flow {
        display: none;
    }

    body[data-page="upper-home"] .upper-builder-copy__title,
    body[data-page="upper-home"] .upper-builder-copy__text {
        color: #a62422;
    }

    body[data-page="upper-home"] .upper-builder-copy__button {
        border-color: #000000;
    }

    body[data-page="upper-home"] .upper-footer {
        background:
            radial-gradient(circle at 44% 58%, rgba(121, 0, 0, 0.72) 0%, rgba(73, 0, 0, 0.62) 24%, rgba(20, 20, 20, 0.92) 57%, #151515 100%),
            linear-gradient(135deg, #151515 0%, #210606 42%, #151515 100%);
        border-radius: 2rem 2rem 0 0;
    }

    .upper-footer {
        border-radius: 1.25rem 1.25rem 0 0;
    }

    .upper-footer__columns,
    .upper-footer__columns--three,
    .upper-footer__columns--four {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .upper-footer__col + .upper-footer__col {
        border-left: 0;
        border-top: 1px solid var(--upper-footer-separator);
        padding-left: 0;
        padding-top: 1.75rem;
    }
}

/* Purchased QR codes: Upper account only. */
.account-qr { min-width: 0; }
.account-qr__back { color: #6b7280; font-size: .8rem; display: inline-block; margin-bottom: .5rem; }
.account-qr__subtitle { color: #737373; margin: .25rem 0 1.25rem; font-size: .9rem; }
.account-qr__card { margin-bottom: 1rem; border: 1px solid #c9cbd1; border-radius: .5rem; background: #fff; box-shadow: 0 2px 3px #0002; overflow: hidden; scroll-margin-top: 6rem; }
.account-qr__summary { display: flex; align-items: center; gap: 1rem; padding: 1.15rem; cursor: pointer; list-style: none; }
.account-qr__summary::-webkit-details-marker { display: none; }
.account-qr__thumbnail { display: block; flex: 0 0 76px; width: 76px; }
.account-qr__thumbnail svg, .account-qr__large-code svg { display: block; width: 100%; height: auto; }
.account-qr__heading { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; }
.account-qr__heading strong { font-size: 1rem; overflow-wrap: anywhere; }
.account-qr__meta { font-size: .73rem; color: #737373; overflow-wrap: anywhere; }
.account-qr__badge { font-size: .65rem; border: 1px solid #e5e7eb; border-radius: .2rem; padding: .12rem .35rem; margin-bottom: .2rem; display: inline-flex; align-items: center; gap: .25rem; color: #262626; }
.account-qr__badge::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: var(--color-danger, #a62422); }
.account-qr__badge--active::before { background: var(--color-success, #299a62); }
.account-qr__summary-action { flex: 0 0 auto; margin-left: auto; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .75rem; }
.account-qr__activate-label { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 10.5rem; white-space: nowrap; line-height: 1.4; background: var(--color-primary, #a62422); color: #fff; padding: .5rem 1rem; border-radius: .3rem; text-align: center; font-size: .75rem; }
.account-qr__chevron { font-size: 1.2rem; line-height: 1; }
.account-qr__card[open] > summary .account-qr__chevron { transform: rotate(180deg); }
.account-qr__card[open] > summary .account-qr__activate-label { display: none; }
.account-qr__body { padding: 0 1.2rem 1.2rem; }
.account-qr__preview-toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.account-qr__external { font-size: .78rem; text-decoration: underline; color: #4b5563; }
.account-qr__showcase { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; padding: 1rem 0; }
.account-qr__phone { box-sizing: border-box; flex: none; width: 240px; max-width: 100%; height: 385px; border: 4px solid #151515; border-radius: 30px; background: #fff; padding: 27px 3px 19px; position: relative; box-shadow: 0 0 0 2px #a3a3a3, 0 5px 12px #0002; }
.account-qr__notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 65px; height: 12px; border-radius: 10px; background: #111; }
.account-qr__home-bar { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 65px; height: 3px; background: #111; border-radius: 2px; }
.account-qr__screen { position: absolute; inset: 27px 3px 19px; overflow: hidden; background: #f8f8f8; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.account-qr__screen iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.account-qr__placeholder { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; max-width: 100%; overflow-wrap: anywhere; font-size: .85rem; color: #6b7280; text-align: center; padding: 1rem; }
.account-qr__download { width: 210px; display: flex; flex-direction: column; gap: .7rem; }
.account-qr__download h3 { font-weight: 600; font-size: 1rem; margin: 0; }
.account-qr__large-code { border: 1px solid #e5e7eb; border-radius: .25rem; overflow: hidden; }
.account-qr__button { display: inline-flex; justify-content: center; align-items: center; border: 1px solid #9ca3af; border-radius: .35rem; padding: .55rem .8rem; background: #fff; color: #171717; font-size: .8rem; cursor: pointer; text-decoration: none; min-height: 38px; }
.account-qr__button--primary { background: var(--color-primary, #a62422); color: #fff; border-color: var(--color-primary, #a62422); }
.account-qr__button--small { font-size: .72rem; padding: .3rem .65rem; min-height: 32px; }
.account-qr__button:hover { filter: brightness(.94); }
.account-qr__button:disabled { opacity: .6; cursor: wait; }
.account-qr__download .account-qr__button { width: 100%; }
.account-qr__preview-note { margin: .6rem 0 1.5rem; font-size: .73rem; color: #737373; text-align: center; }
.account-qr__section-label { margin: 1.2rem 0 .5rem; font-weight: 600; font-size: 1rem; }
.account-qr__editor { border: 1px solid #e5e7eb; padding: 1rem; border-radius: .4rem; }
.account-qr__providers { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.account-qr__provider { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 5px; border-radius: 9px; color: #fff; opacity: .3; }
.account-qr__provider svg { width: 100%; height: 100%; }
.account-qr__provider--selected { opacity: 1; outline: 2px solid #262626; outline-offset: 3px; }
.account-qr__provider--instagram { background: linear-gradient(35deg, #ffd35c, #fa387c 45%, #7442d6 80%); }
.account-qr__provider--spotify { background: #1db954; border-radius: 50%; }
.account-qr__provider--apple { background: #fa526d; }
.account-qr__provider--soundcloud { background: #ff7500; }
.account-qr__provider--amazon { background: #9de8e6; color: #164e63; }
.account-qr__provider--tiktok { background: #111; }
.account-qr__provider--facebook { background: #1877f2; }
.account-qr__provider--link { background: var(--color-primary, #a62422); }
.account-qr__field-heading { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; margin-bottom: .35rem; }
.account-qr__edit { background: none; border: 0; color: var(--color-primary, #a62422); font-size: .8rem; cursor: pointer; }
.account-qr__input { width: 100%; min-width: 0; border: 1px solid #d1d5db; border-radius: .5rem; padding: .6rem; font-size: .83rem; }
.account-qr__input[readonly], .account-qr__input:disabled { background: #f8f8fa; color: #626976; }
.account-qr__help { margin: .4rem 0 .65rem; font-size: .72rem; color: #737373; }
.account-qr__edit-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.account-qr__dynamic { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; border: 1px solid #e9caca; border-radius: .4rem; padding: .8rem; background: #f7eded; color: #262626; }
.account-qr__dynamic > span { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 42px; height: 42px; border-radius: .3rem; color: #fff; background: var(--color-primary, #a62422); font-size: 1.5rem; }
.account-qr__dynamic p { font-size: .85rem; line-height: 1.45; margin: 0; }
.account-qr__faq { border: 1px solid #e5e7eb; border-radius: .4rem; padding: 0 .9rem; }
.account-qr__faq details + details { border-top: 1px solid #e5e7eb; }
.account-qr__faq summary { padding: .8rem 0; font-size: .85rem; cursor: pointer; }
.account-qr__faq p { font-size: .8rem; color: #737373; margin: 0 0 1rem; line-height: 1.5; }
.account-qr__notice, .account-qr__error { padding: .8rem; border-radius: .4rem; background: #f5f5f5; font-size: .85rem; margin-bottom: 1rem; }
.account-qr__error { color: #8b2020; background: #fff0f0; overflow-wrap: anywhere; }
.account-qr [hidden] { display: none !important; }
.account-qr :focus-visible { outline: 2px solid var(--color-primary, #a62422); outline-offset: 3px; }
.account-qr-nav__logout { margin-top: var(--space-lg); }
.account-qr-nav__logout-button { width: 100%; cursor: pointer; }
@media (max-width: 640px) {
    .account-qr__summary { padding: .85rem; gap: .6rem; flex-wrap: wrap; }
    .account-qr__thumbnail { flex-basis: 60px; width: 60px; }
    .account-qr__heading { flex: 1; }
    .account-qr__heading strong { font-size: .88rem; }
    .account-qr__summary-action { flex-basis: 100%; flex-direction: row; align-items: center; }
    .account-qr__chevron { margin-left: auto; }
    .account-qr__body { padding: 0 .8rem 1rem; }
    .account-qr__showcase { flex-direction: column; gap: 1.5rem; }
    .account-qr__providers { gap: .65rem; }
    .account-qr__provider { width: 37px; height: 37px; }
    .account-qr__editor { padding: .75rem; }
}

/* Upper navigation heading: reference red, inset rule and circular close button. */
.upper-menu__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    margin: 0 12px;
    padding: max(7px, env(safe-area-inset-top)) 0 10px;
    border-bottom: 1px solid #a62422;
}

.upper-menu__title {
    margin-left: calc(2rem - 12px);
    transform: translateY(2px);
    color: #a62422;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.upper-menu__close {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: -2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #000;
    cursor: pointer;
}

.upper-menu__close::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid #a62422;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #000;
}

.upper-menu__close svg {
    position: relative;
    width: 22px;
    height: 22px;
}

.upper-menu__close:focus-visible {
    outline: 2px solid #a62422;
    outline-offset: 2px;
}