/* ============================================================
   DS-APPLE — Components
   Botões, Cards, Badges, Tags, Inputs, Tabs e mais
   ============================================================ */


/* ══════════════════════════════════════════
   BUTTONS — Botões Apple
════════════════════════════════════════════ */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75em 1.5em;
    border-radius: var(--radius-pill);
    font-family: var(--font-text);
    font-size: var(--text-body-lg);
    font-weight: var(--font-weight-regular);
    line-height: 1;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition:
        background var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
    white-space: nowrap;
    user-select: none;
}

.ds-btn:active {
    transform: scale(0.98);
}

/* Primary — Azul Apple */
.ds-btn--primary {
    background: var(--color-accent);
    color: #ffffff;
}

.ds-btn--primary:hover {
    background: var(--color-accent-hover);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.4);
}

/* Secondary — Cinza escuro */
.ds-btn--secondary {
    background: var(--color-text-primary);
    color: #ffffff;
}

.ds-btn--secondary:hover {
    background: #2d2d2d;
    color: #ffffff;
    text-decoration: none;
}

/* Ghost — Outline */
.ds-btn--ghost {
    background: transparent;
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

.ds-btn--ghost:hover {
    background: var(--color-accent);
    color: #ffffff;
    text-decoration: none;
}

/* Light — Fundo claro sobre escuro */
.ds-btn--light {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.ds-btn--light:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    text-decoration: none;
}

/* White — sobre fundo escuro */
.ds-btn--white {
    background: #ffffff;
    color: var(--color-text-primary);
}

.ds-btn--white:hover {
    background: #f0f0f0;
    color: var(--color-text-primary);
    text-decoration: none;
}

/* Dark — sobre fundo claro */
.ds-btn--dark {
    background: var(--color-bg-dark-alt);
    color: var(--color-text-white);
}

.ds-btn--dark:hover {
    background: #2d2d2f;
    color: var(--color-text-white);
    text-decoration: none;
}

/* Sizes */
.ds-btn--sm {
    font-size: var(--text-callout);
    padding: 0.55em 1.1em;
}

.ds-btn--lg {
    font-size: var(--text-title);
    padding: 0.75em 2em;
}

.ds-btn--xl {
    font-size: var(--text-title-lg);
    padding: 0.7em 2.2em;
}

/* Full width */
.ds-btn--block {
    width: 100%;
}

/* Icon-only */
.ds-btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-circle);
}

/* Disabled */
.ds-btn:disabled,
.ds-btn--disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* Botões agrupados lado a lado */
.ds-btn-group {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ds-btn-group--center {
    justify-content: center;
}

/* ══════════════════════════════════════════
   CARDS — Cartões Apple
════════════════════════════════════════════ */

/* Card Base */
.ds-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    transition:
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out);
    position: relative;
}

/* Card interativo */
.ds-card--interactive {
    cursor: pointer;
}

.ds-card--interactive:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-card-hover);
}

/* Card com sombra */
.ds-card--shadow {
    box-shadow: var(--shadow-card);
}

/* Card escuro */
.ds-card--dark {
    background: var(--color-bg-card-dark);
}

/* Card cinza */
.ds-card--gray {
    background: var(--color-bg-card-gray);
}

/* Card com borda */
.ds-card--bordered {
    box-shadow: inset 0 0 0 1px var(--color-border-light);
}

.ds-card--dark.ds-card--bordered {
    box-shadow: inset 0 0 0 1px var(--color-border-dark);
}

/* ─── Card: Produto ─── */
/* Inspirado nos cards de produtos da Apple Store */
.ds-card-product {
    background: var(--color-bg-card-gray);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out);
}

.ds-card-product:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.ds-card-product__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
}

.ds-card-product__media img {
    max-height: 280px;
    object-fit: contain;
    transition: transform var(--duration-slow) var(--ease-out);
}

.ds-card-product:hover .ds-card-product__media img {
    transform: scale(1.05);
}

.ds-card-product__body {
    padding: var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ds-card-product__eyebrow {
    font-size: var(--text-footnote);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent);
}

.ds-card-product__title {
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--line-height-heading);
}

.ds-card-product__subtitle {
    font-size: var(--text-body-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
    flex: 1;
}

.ds-card-product__price {
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
}

.ds-card-product__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* ─── Card: Feature ─── */
/* Card de funcionalidade com imagem de fundo */
.ds-card-feature {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: flex-end;
    background: var(--color-bg-dark);
    cursor: pointer;
}

.ds-card-feature__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slowest) var(--ease-out);
    z-index: 0;
}

.ds-card-feature:hover .ds-card-feature__bg {
    transform: scale(1.04);
}

.ds-card-feature__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 70%);
    z-index: 1;
}

.ds-card-feature__content {
    position: relative;
    z-index: 2;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.ds-card-feature__eyebrow {
    font-size: var(--text-footnote);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.ds-card-feature__title {
    font-family: var(--font-display);
    font-size: var(--text-title-lg);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
}

.ds-card-feature__body {
    font-size: var(--text-body);
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--line-height-body);
}

/* ─── Card: Info / Small ─── */
.ds-card-info {
    background: var(--color-bg-card-gray);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition:
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out);
}

.ds-card-info:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.ds-card-info__icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-card-info__title {
    font-family: var(--font-display);
    font-size: var(--text-headline);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.ds-card-info__body {
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
}

.ds-card-info__link {
    font-size: var(--text-body);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
}

.ds-card-info__link::after {
    content: ' ›';
}

/* ─── Card: Horizontais ─── */
.ds-card-h {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    background: var(--color-bg-card-gray);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.ds-card-h__media {
    width: 120px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ds-card-h__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ds-card-h__title {
    font-family: var(--font-display);
    font-size: var(--text-headline);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.ds-card-h__body {
    font-size: var(--text-body);
    color: var(--color-text-secondary);
}

/* ─── Card: Pricing ─── */
.ds-card-pricing {
    background: var(--color-bg-card);
    border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 1px var(--color-border-light);
    padding: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}

.ds-card-pricing:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.ds-card-pricing--featured {
    background: var(--color-bg-dark);
    box-shadow: none;
}

.ds-card-pricing--featured .ds-card-pricing__title,
.ds-card-pricing--featured .ds-card-pricing__price,
.ds-card-pricing--featured li {
    color: #ffffff;
}

.ds-card-pricing--featured .ds-card-pricing__subtitle {
    color: rgba(255, 255, 255, 0.65);
}

.ds-card-pricing__badge {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
}

.ds-card-pricing__title {
    font-size: var(--text-headline);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.ds-card-pricing__subtitle {
    font-size: var(--text-body);
    color: var(--color-text-secondary);
}

.ds-card-pricing__price {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-display);
    line-height: 1;
}

.ds-card-pricing__period {
    font-size: var(--text-body);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
}

.ds-card-pricing__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
}

.ds-card-pricing__features li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
}

.ds-card-pricing__features li::before {
    content: '✓';
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    color: #ffffff;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}


/* ══════════════════════════════════════════
   BADGES E TAGS
════════════════════════════════════════════ */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2em 0.7em;
    border-radius: var(--radius-pill);
    font-size: var(--text-footnote);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.ds-badge--blue {
    background: rgba(0, 113, 227, 0.12);
    color: var(--color-accent);
}

.ds-badge--green {
    background: rgba(52, 199, 89, 0.12);
    color: #34c759;
}

.ds-badge--orange {
    background: rgba(255, 159, 10, 0.12);
    color: #ff9f0a;
}

.ds-badge--red {
    background: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
}

.ds-badge--gray {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

.ds-badge--dark {
    background: var(--color-bg-dark-alt);
    color: var(--color-text-on-dark);
}

.ds-badge--new {
    background: var(--color-accent);
    color: #ffffff;
}

/* Dot no badge */
.ds-badge::before {
    content: '';
    display: none;
}

.ds-badge--dot::before {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: currentColor;
}


/* ══════════════════════════════════════════
   TAGS — Chips de filtro
════════════════════════════════════════════ */

.ds-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4em 1em;
    border-radius: var(--radius-pill);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: var(--text-callout);
    font-weight: var(--font-weight-regular);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--duration-base) var(--ease-out);
    user-select: none;
}

.ds-tag:hover {
    background: var(--color-border-light);
}

.ds-tag.is-active {
    background: var(--color-text-primary);
    color: var(--color-bg-primary);
}

.ds-tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}


/* ══════════════════════════════════════════
   INPUTS
════════════════════════════════════════════ */

.ds-input {
    display: block;
    width: 100%;
    padding: 0.75em 1em;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    font-family: var(--font-text);
    font-size: var(--text-body-lg);
    color: var(--color-text-primary);
    transition: border-color var(--duration-base), box-shadow var(--duration-base);
    appearance: none;
}

.ds-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

.ds-input::placeholder {
    color: var(--color-text-tertiary);
}

.ds-input--pill {
    border-radius: var(--radius-pill);
    padding: 0.65em 1.25em;
}

/* Search input */
.ds-input-search {
    position: relative;
}

.ds-input-search__icon {
    position: absolute;
    left: 1em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
    font-size: 1rem;
}

.ds-input-search .ds-input {
    padding-left: 2.75em;
}


/* ══════════════════════════════════════════
   TABS
════════════════════════════════════════════ */

.ds-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-pill);
    padding: var(--space-1);
}

.ds-tabs__item {
    flex: 1;
    text-align: center;
    padding: 0.45em 1.25em;
    border-radius: var(--radius-pill);
    font-size: var(--text-callout);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    white-space: nowrap;
}

.ds-tabs__item:hover {
    color: var(--color-text-primary);
}

.ds-tabs__item.is-active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-sm);
}

/* Tabs underline */
.ds-tabs--underline {
    background: none;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 0;
    padding: 0;
    gap: var(--space-6);
}

.ds-tabs--underline .ds-tabs__item {
    flex: none;
    border-radius: 0;
    padding: 0.6em 0;
    border-bottom: 2px solid transparent;
    background: none;
    box-shadow: none;
}

.ds-tabs--underline .ds-tabs__item.is-active {
    border-bottom-color: var(--color-accent);
    color: var(--color-text-primary);
}

.ds-tab-content {
    display: none;
}

.ds-tab-content.is-active {
    display: block;
}


/* ══════════════════════════════════════════
   ACCORDION / DISCLOSURE
════════════════════════════════════════════ */

.ds-accordion {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.ds-accordion__item {
    border-bottom: 1px solid var(--color-border-light);
}

.ds-accordion__item:last-child {
    border-bottom: none;
}

.ds-accordion__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-6);
    background: none;
    cursor: pointer;
    font-size: var(--text-body-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-align: left;
    transition: background var(--duration-base);
}

.ds-accordion__trigger:hover {
    background: var(--color-bg-secondary);
}

.ds-accordion__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform var(--duration-base) var(--ease-out);
}

.ds-accordion__icon::before,
.ds-accordion__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--color-text-secondary);
    border-radius: 2px;
}

.ds-accordion__icon::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.ds-accordion__icon::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base);
}

.ds-accordion__item.is-open .ds-accordion__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.ds-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-slow) var(--ease-out);
}

.ds-accordion__item.is-open .ds-accordion__content {
    max-height: 2000px;
}

.ds-accordion__body {
    padding: 0 var(--space-6) var(--space-6);
    font-size: var(--text-body-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
}


/* ══════════════════════════════════════════
   TOOLTIP
════════════════════════════════════════════ */

.ds-tooltip {
    position: relative;
    display: inline-block;
}

.ds-tooltip__content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg-dark-alt);
    color: #ffffff;
    font-size: var(--text-footnote);
    padding: 0.4em 0.8em;
    border-radius: var(--radius-md);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-base);
    z-index: var(--z-toast);
}

.ds-tooltip:hover .ds-tooltip__content {
    opacity: 1;
}


/* ══════════════════════════════════════════
   NOTIFICATION / ALERT
════════════════════════════════════════════ */

.ds-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-body);
    line-height: var(--line-height-body);
}

.ds-alert--info {
    background: rgba(0, 113, 227, 0.08);
    color: #004899;
}

.ds-alert--success {
    background: rgba(52, 199, 89, 0.10);
    color: #1a7a35;
}

.ds-alert--warning {
    background: rgba(255, 159, 10, 0.10);
    color: #7d4e00;
}

.ds-alert--error {
    background: rgba(255, 59, 48, 0.10);
    color: #c00025;
}

.ds-alert__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ds-alert__title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
}

/* ══════════════════════════════════════════
   COLOR SWATCHES — Seletores de cor
════════════════════════════════════════════ */

.ds-swatches {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.ds-swatch {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-circle);
    cursor: pointer;
    transition: transform var(--duration-base) var(--ease-bounce);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.ds-swatch:hover {
    transform: scale(1.15);
}

.ds-swatch.is-active {
    outline-color: var(--color-text-primary);
}


/* ══════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */

@media (max-width: 660px) {
    .ds-card-feature {
        aspect-ratio: 3/4;
    }

    .ds-card-pricing {
        padding: var(--space-8);
    }

    .ds-hero-split {
        gap: var(--space-8);
    }

    .ds-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ds-tabs::-webkit-scrollbar {
        display: none;
    }
}