/* ═══════════════════════════════════════════════════════════════════════════
   ORZATTY™ INTERACTIVE v3.0 [M3 + iOS FUSION]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FAB (FLOATING ACTION BUTTON)
   ═══════════════════════════════════════════════════════════════════════════ */

.oz-fab {
    position: fixed;
    bottom: var(--sys-space-8);
    right: var(--sys-space-6);
    z-index: var(--sys-z-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sys-space-2);
    min-width: 56px;
    height: 56px;
    padding: 0 var(--sys-space-4);
    background-color: var(--sys-color-accent);
    color: var(--sys-color-on-accent);
    border-radius: var(--sys-radius-lg);
    box-shadow: var(--sys-shadow-lg), var(--sys-glow-accent);
    border: none;
    font: var(--sys-text-button);
    cursor: pointer;
    transition:
        transform var(--sys-duration-fast) var(--sys-ease-spring),
        box-shadow var(--sys-duration-fast) var(--sys-ease-standard);
}

.oz-fab svg {
    width: 24px;
    height: 24px;
}

.oz-fab:hover {
    transform: scale(1.05);
    box-shadow: var(--sys-shadow-xl), var(--sys-glow-accent-strong);
}

.oz-fab:active {
    transform: scale(0.95);
}

/* Small FAB */
.oz-fab-sm {
    min-width: 44px;
    height: 44px;
    border-radius: var(--sys-radius-md);
}

/* Extended FAB */
.oz-fab-extended {
    padding: 0 var(--sys-space-6);
    border-radius: var(--sys-radius-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHIPS (M3 Style)
   ═══════════════════════════════════════════════════════════════════════════ */

.oz-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sys-space-2);
}

.oz-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sys-space-2);
    padding: 8px 16px;
    border-radius: var(--sys-radius-xs);
    border: 1px solid var(--sys-color-separator);
    background-color: transparent;
    color: var(--sys-color-primary);
    font: var(--sys-text-callout);
    cursor: pointer;
    transition:
        background-color var(--sys-duration-fast) var(--sys-ease-standard),
        border-color var(--sys-duration-fast) var(--sys-ease-standard);
}

.oz-chip:hover {
    background-color: var(--sys-fill-quaternary);
}

.oz-chip.active,
.oz-chip:checked {
    background-color: rgba(10, 132, 255, 0.15);
    color: var(--sys-color-accent);
    border-color: var(--sys-color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEGMENTED CONTROL (iOS Style)
   ═══════════════════════════════════════════════════════════════════════════ */

.oz-segmented {
    display: inline-flex;
    background-color: var(--sys-fill-tertiary);
    border-radius: var(--sys-radius-sm);
    padding: 2px;
    gap: 0;
}

.oz-segmented-item {
    flex: 1;
    padding: 8px 16px;
    border-radius: calc(var(--sys-radius-sm) - 2px);
    background-color: transparent;
    color: var(--sys-color-primary);
    font: var(--sys-text-callout);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition:
        background-color var(--sys-duration-fast) var(--sys-ease-spring),
        box-shadow var(--sys-duration-fast) var(--sys-ease-standard);
}

.oz-segmented-item:hover {
    color: var(--sys-color-accent);
}

.oz-segmented-item.active,
.oz-segmented-item:checked {
    background-color: var(--sys-color-surface-elevated);
    box-shadow: var(--sys-shadow-sm);
    color: var(--sys-color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIALOG / MODAL (iOS Alert Style)
   ═══════════════════════════════════════════════════════════════════════════ */

.oz-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: var(--sys-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sys-space-6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sys-duration-normal) var(--sys-ease-standard);
}

.oz-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.oz-dialog {
    background: var(--sys-material-thick);
    backdrop-filter: var(--sys-blur-prominent);
    -webkit-backdrop-filter: var(--sys-blur-prominent);
    border: 1px solid var(--sys-color-border);
    border-radius: var(--sys-radius-xl);
    padding: var(--sys-space-6);
    width: 100%;
    max-width: 320px;
    text-align: center;
    box-shadow: var(--sys-shadow-xl);
    transform: scale(0.9);
    transition: transform var(--sys-duration-normal) var(--sys-ease-spring);
}

.oz-overlay.open .oz-dialog {
    transform: scale(1);
}

.oz-dialog-title {
    font: var(--sys-text-headline);
    margin-bottom: var(--sys-space-2);
}

.oz-dialog-body {
    font: var(--sys-text-callout);
    color: var(--sys-color-secondary);
    margin-bottom: var(--sys-space-4);
}

.oz-dialog-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--sys-color-separator);
    margin: 0 calc(var(--sys-space-6) * -1) calc(var(--sys-space-6) * -1);
    border-radius: 0 0 var(--sys-radius-xl) var(--sys-radius-xl);
    overflow: hidden;
}

.oz-dialog-btn {
    padding: var(--sys-space-4);
    background: transparent;
    border: none;
    font: var(--sys-text-body);
    color: var(--sys-color-accent);
    cursor: pointer;
    transition: background-color var(--sys-duration-fast) var(--sys-ease-standard);
}

.oz-dialog-btn:hover {
    background-color: var(--sys-fill-quaternary);
}

.oz-dialog-btn:not(:last-child) {
    border-bottom: 1px solid var(--sys-color-separator);
}

.oz-dialog-btn.destructive {
    color: var(--sys-color-error);
}

.oz-dialog-btn.primary {
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SNACKBAR / TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.oz-snackbar {
    position: fixed;
    bottom: var(--sys-space-6);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: var(--sys-color-surface-elevated);
    color: var(--sys-color-primary);
    padding: var(--sys-space-3) var(--sys-space-4);
    border-radius: var(--sys-radius-sm);
    box-shadow: var(--sys-shadow-lg);
    z-index: var(--sys-z-toast);
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: var(--sys-space-3);
    max-width: 400px;
    font: var(--sys-text-callout);
    transition:
        opacity var(--sys-duration-normal) var(--sys-ease-standard),
        transform var(--sys-duration-normal) var(--sys-ease-decelerate);
}

.oz-snackbar.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.oz-snackbar-action {
    color: var(--sys-color-accent);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRESS STATES (Global)
   ═══════════════════════════════════════════════════════════════════════════ */

/* iOS Press Scale Effect */
.oz-pressable {
    transition: transform var(--sys-duration-fast) var(--sys-ease-spring);
}

.oz-pressable:active {
    transform: scale(0.97);
}

/* Ripple Alternative - Highlight */
.oz-highlight:active {
    background-color: var(--sys-fill-tertiary);
}