/* Personal Gifter — Custom styles */

/* Frosted glass header */
.glass-header {
    background: rgba(246, 247, 247, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Primary gradient */
.premium-gradient {
    background: linear-gradient(135deg, #00685a 0%, #8deedb 100%);
}

/* Smooth page transitions */
html {
    scroll-behavior: smooth;
}

/* Hide scrollbar on overflow containers */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Material Symbols default settings */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* Form inputs: remove browser default focus outline, use ring instead */
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* Pill select elements on Safari */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23595c5c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

/* Animate flash messages */
@keyframes slideDown {
    from { opacity: 0; transform: translate(-50%, -1rem); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.fixed.top-24 {
    animation: slideDown 0.3s ease;
}

/* Focus-visible ring for accessibility */
button:focus-visible, a:focus-visible {
    outline: 2px solid #00685a;
    outline-offset: 2px;
}