/* ==========================================================================
   PRLinkUp — Components
   Buttons · Eyebrow · Text gradients · Badges · Chips · Cards · Icon tiles
   Glass · Footer · Store buttons · Segmented · Accordion
   (Logo, header, menu, cursor and intro live in chrome.css)
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
    --btn-h: 48px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--btn-h);
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        background-color var(--dur-fast) var(--ease-soft),
        border-color var(--dur-fast) var(--ease-soft),
        color var(--dur-fast) var(--ease-soft);
}

.btn i {
    font-size: 1.15em;
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

.btn--lg {
    --btn-h: 56px;
    padding: 0 28px;
    font-size: var(--fs-md);
}

.btn--sm {
    --btn-h: 40px;
    padding: 0 16px;
    font-size: var(--fs-sm);
    border-radius: 12px;
}

.btn--block {
    width: 100%;
}

/* Primary: violet gradient + soft glow */
.btn--primary {
    background: var(--grad-primary);
    color: var(--color-on-primary);
    box-shadow: var(--glow-violet);
}

.btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--grad-primary-hover);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-soft);
}

.btn--primary:hover {
    color: var(--color-on-primary);
    transform: translateY(-2px);
    box-shadow: var(--glow-violet-lg);
}

.btn--primary:hover::before {
    opacity: 1;
}

/* Secondary: white + thin border */
.btn--secondary {
    background: var(--white);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

.btn--secondary:hover {
    color: var(--color-primary);
    border-color: var(--violet-200);
    transform: translateY(-2px);
    box-shadow: var(--glow-hover);
}

/* Ghost: text only */
.btn--ghost {
    color: var(--color-text);
    padding-inline: 16px;
}

.btn--ghost:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* Light: for violet / dark backgrounds */
.btn--light {
    background: var(--white);
    color: var(--violet-700);
    box-shadow: 0 10px 30px rgba(17, 19, 38, 0.18);
}

.btn--light:hover {
    color: var(--violet-800);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(17, 19, 38, 0.25);
}

.btn--glass {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
    backdrop-filter: blur(8px);
}

.btn--glass:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}

/* Frost: light liquid-glass button for light backgrounds */
.btn--frost {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(122, 93, 255, 0.16);
    color: var(--color-text);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    box-shadow: 0 6px 20px rgba(74, 47, 217, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.btn--frost:hover {
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--violet-200);
    transform: translateY(-2px);
    box-shadow: var(--glow-hover), inset 0 1px 0 #fff;
}

/* Shine: a soft light sweep across the button every few seconds */
.btn--shine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.45) 50%, transparent 75%);
    translate: -110% 0;
    animation: btn-shine 6s var(--ease-soft) 2.5s infinite;
    pointer-events: none;
}

.btn__arrow {
    transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__arrow {
    transform: translateX(3px);
}

/* ---------- Eyebrow ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 14px 6px 8px;
    border-radius: var(--r-pill);
    background: var(--color-primary-soft);
    color: var(--violet-650);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
}

.eyebrow__dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: var(--white);
    font-size: 12px;
}

.eyebrow--light {
    background: rgba(255, 255, 255, 0.12);
    color: var(--lavender);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ---------- Text gradients ---------- */
.text-gradient,
.text-gradient--aurora,
.text-gradient--ocean,
.text-gradient--light {
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.text-gradient--aurora { background-image: var(--grad-aurora); }
.text-gradient--ocean  { background-image: var(--grad-ocean); }
.text-gradient--light  { background-image: var(--grad-text-light); }

.text-lavender {
    color: var(--lavender);
}

.text-muted {
    color: var(--color-text-secondary);
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    line-height: 1.4;
    white-space: nowrap;
    background: var(--color-primary-soft);
    color: var(--violet-650);
}

.badge--live    { background: var(--success-soft); color: #067A40; }
.badge--paid    { background: var(--success-soft); color: #067A40; }
.badge--pending { background: var(--warning-soft); color: #9A6100; }
.badge--error   { background: var(--error-soft);   color: #C21F1F; }
.badge--dark    { background: var(--ink-950);      color: var(--white); }

.badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge--live .badge__dot {
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(0, 210, 106, 0.6);
    animation: pulse-dot 2s var(--ease-soft) infinite;
}

/* ---------- Chips ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-pill);
    background: var(--white);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.chip.is-active {
    background: var(--color-primary-soft);
    border-color: transparent;
    color: var(--violet-650);
}

/* ---------- Cards ---------- */
.card {
    position: relative;
    padding: var(--sp-8);
    border: 1px solid var(--color-border);
    border-radius: var(--r-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.card--hover {
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-soft);
}

.card--hover:hover {
    transform: translateY(-3px);
    border-color: var(--violet-200);
    box-shadow: var(--shadow-md), var(--glow-hover);
}

.card__title {
    margin-top: var(--sp-5);
    font-size: var(--fs-lg);
}

.card__text {
    margin-top: var(--sp-2);
    color: var(--color-text-secondary);
}

/* ---------- Icon tiles ---------- */
.icon-tile {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 26px;
}

.icon-tile--sm {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 20px;
}

.icon-tile--grad,
.icon-tile--ocean,
.icon-tile--orchid,
.icon-tile--twilight,
.icon-tile--hero {
    color: var(--white);
    box-shadow: 0 8px 20px rgba(122, 93, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.icon-tile--grad     { background: var(--grad-primary); }
.icon-tile--ocean    { background: var(--grad-ocean); }
.icon-tile--orchid   { background: var(--grad-orchid); }
.icon-tile--twilight { background: var(--grad-twilight); }
.icon-tile--hero     { background: var(--grad-hero); }

/* ---------- Avatars (gradient initials until real photos are ready) ---------- */
.avatar {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--white);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    background: var(--grad-orchid);
}

.avatar--ocean    { background: var(--grad-ocean); }
.avatar--twilight { background: var(--grad-twilight); }
.avatar--hero     { background: var(--grad-hero); }

.avatar--lg {
    width: 44px;
    height: 44px;
    font-size: 14px;
}

.avatar-stack {
    display: flex;
}

.avatar-stack .avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
    border: 2px solid var(--white);
}

.avatar-stack .avatar + .avatar {
    margin-left: -8px;
}

.verified {
    color: var(--color-primary);
    font-size: 15px;
    vertical-align: -2px;
}

/* ---------- Progress bar ---------- */
.progress {
    height: 8px;
    margin-top: 6px;
    border-radius: var(--r-pill);
    background: var(--gray-100);
    overflow: hidden;
}

.progress span {
    display: block;
    width: var(--p, 50%);
    height: 100%;
    border-radius: inherit;
    background: var(--grad-primary);
    transform-origin: left;
    animation: grow-bar 1.6s var(--ease-out) 0.6s both;
}

.progress--light {
    background: rgba(255, 255, 255, 0.25);
}

.progress--light span {
    background: var(--white);
}

/* ==========================================================================
   Glass (glassmorphism / liquid glass)
   .glass         frosted light glass, dark text
   .glass--solid  more opaque, for the main card in a group
   .glass--dark   smoked glass, white text
   A soft specular sheen sits behind the content via ::before.
   ========================================================================== */
.glass {
    position: relative;
    isolation: isolate;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        0 24px 60px -12px rgba(36, 18, 120, 0.35),
        0 4px 14px rgba(36, 18, 120, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}

.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.7), transparent 45%),
        linear-gradient(300deg, rgba(255, 255, 255, 0.25), transparent 30%);
    pointer-events: none;
}

.glass--solid {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.82) 100%);
}

.glass--dark {
    background: linear-gradient(140deg, rgba(30, 24, 70, 0.72) 0%, rgba(17, 19, 38, 0.6) 100%);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--white);
    box-shadow:
        0 20px 50px -10px rgba(17, 19, 38, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.glass--dark::before {
    background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.18), transparent 50%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass       { background: rgba(255, 255, 255, 0.94); }
    .glass--dark { background: rgba(23, 20, 52, 0.94); }
}

/* Chat bubbles shared by the tour screens and previews (sized in em; used on several pages) */
.msg {
    align-self: flex-start;
    max-width: 80%;
    padding: 0.6em 0.9em;
    border-radius: 1em 1em 1em 0.3em;
    background: var(--gray-100);
    color: var(--ink-900);
    font-size: 0.85em;
    line-height: 1.4;
}

.msg--out {
    align-self: flex-end;
    border-radius: 1em 1em 0.3em 1em;
    background: var(--grad-primary);
    color: var(--white);
}

/* ---------- Store buttons ---------- */
.store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.store-buttons--stack {
    flex-direction: column;
    align-items: flex-start;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 168px;
    height: 52px;
    padding: 0 18px 0 14px;
    border-radius: 14px;
    background: var(--ink-950);
    color: var(--white);
    border: 1px solid transparent;
    line-height: 1.15;
    font-weight: var(--fw-semi);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.store-btn:hover {
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(17, 19, 38, 0.22);
}

.store-btn small {
    display: block;
    font-size: 10px;
    font-weight: var(--fw-regular);
    opacity: 0.75;
}

.store-btn__icon {
    font-size: 26px;
}

.store-btn--light {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
}

.store-btn--light:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ---------- Segmented toggle ---------- */
.segmented {
    position: relative;
    display: inline-flex;
    padding: 5px;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.segmented__indicator {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: var(--w, 0);
    border-radius: var(--r-pill);
    background: var(--grad-primary);
    box-shadow: var(--glow-violet);
    transform: translateX(var(--x, 0));
    transition: transform 500ms var(--ease-out), width 500ms var(--ease-out);
}

.segmented__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--r-pill);
    color: var(--color-text-secondary);
    font-weight: var(--fw-semi);
    transition: color var(--dur-base) var(--ease-soft);
}

.segmented__btn[aria-selected="true"] {
    color: var(--white);
}

/* ---------- Accordion ---------- */
.accordion {
    display: grid;
    gap: var(--sp-3);
}

.accordion__item {
    border: 1px solid var(--color-border);
    border-radius: var(--r-card);
    background: var(--white);
    transition: border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}

.accordion__item[open] {
    border-color: var(--violet-200);
    box-shadow: var(--glow-hover);
}

.accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 20px 24px;
    font-weight: var(--fw-semi);
    font-size: var(--fs-md);
    cursor: pointer;
    list-style: none;
}

.accordion__summary::-webkit-details-marker {
    display: none;
}

.accordion__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    transition: transform var(--dur-base) var(--ease-out), background var(--dur-base);
}

.accordion__item[open] .accordion__icon {
    transform: rotate(45deg);
    background: var(--grad-primary);
    color: var(--white);
}

.accordion__body {
    padding: 0 24px 22px;
    color: var(--color-text-secondary);
}