/**
 * DevWharf Component Styles v5.0
 * Buttons, forms, cards, and UI components
 */

/* ===================================================================
   BUTTONS — Global border-beam effect (always-on spinning gradient)
   Structure: overflow:hidden clips a giant spinning ::before gradient.
   A ::after pseudo covers the center, leaving a 2px glowing border.
   =================================================================== */
.wp-block-button__link,
.wp-element-button,
button:not(.components-button):not(.dw-faq-trigger),
input[type="submit"] {
    background: transparent !important;
    color: #e0e0e8 !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 12px 28px !important;
    font-family: var(--dw-font-body, 'Spinnaker', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.02em;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease !important;
    cursor: pointer;
    display: inline-block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    isolation: isolate;
}

/* 1. Spinning gradient beam (always active) */
.wp-block-button__link::before,
.wp-element-button::before,
button:not(.components-button):not(.dw-faq-trigger)::before,
input[type="submit"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: conic-gradient(
        from 0deg,
        transparent 70%,
        var(--beam-1, #3b82f6) 80%,
        var(--beam-2, #8b5cf6) 90%,
        var(--beam-3, #ec4899) 100%
    );
    transform: translate(-50%, -50%);
    animation: dw-beam-spin 3s linear infinite;
    z-index: -2;
}

/* 2. Inner fill mask — reveals only the 2px gradient border */
.wp-block-button__link::after,
.wp-element-button::after,
button:not(.components-button):not(.dw-faq-trigger)::after,
input[type="submit"]::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: linear-gradient(135deg, #18181b 0%, #1e1e24 50%, #252530 100%);
    border-radius: 9999px;
    z-index: -1;
    transition: background 0.3s ease;
}

/* Hover: lift + glow + brighter inner fill */
.wp-block-button__link:hover,
.wp-element-button:hover,
button:not(.components-button):not(.dw-faq-trigger):hover,
input[type="submit"]:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4) !important;
}
.wp-block-button__link:hover::after,
.wp-element-button:hover::after,
button:not(.components-button):not(.dw-faq-trigger):hover::after,
input[type="submit"]:hover::after {
    background: linear-gradient(135deg, #1f1f26 0%, #26262e 50%, #2e2e3a 100%);
}

/* Active: press down */
.wp-block-button__link:active,
.wp-element-button:active,
button:not(.components-button):not(.dw-faq-trigger):active,
input[type="submit"]:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3) !important;
}

@keyframes dw-beam-spin {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.25);
    outline-offset: 2px;
}

/* Ghost/outline button — darker inner fill for subtler appearance */
.wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--dw-text-secondary, #a0a0b0) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link::after {
    background: rgba(12, 12, 20, 0.95);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    color: var(--dw-text-primary, #f0f0f0) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover::after {
    background: rgba(20, 20, 30, 0.95);
}

/* ===================================================================
   FORM ELEMENTS
   =================================================================== */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: var(--dw-text-primary, #f0f0f0) !important;
    padding: 14px 16px !important;
    font-family: var(--dw-font-body, 'Spinnaker', sans-serif) !important;
    font-size: 1rem !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    width: 100%;
    max-width: 100%;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--dw-accent-indigo, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--dw-text-muted, #606070);
    opacity: 1;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 768px) {
    .wp-block-buttons {
        flex-direction: column;
        align-items: center;
    }

    .wp-block-button__link {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}