/**
 * StayLink Pro - Shared styles (App-Like UX)
 * متغيرات ومكونات مشتركة، safe-area، تأثيرات لمس، PWA-ready
 */
:root {
    --sl-tap-min: 44px;
}

/* Safe-area ووضع fullscreen للتطبيق (iPhone وأندرويد) */
body.staylink-body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
}
#staylink-app {
    min-height: 100vh;
    padding-top: env(safe-area-inset-top);
}
#staylink-bio-root {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
@media (max-width: 768px) {
    #staylink-bio-root .staygo-container,
    #staylink-bio-root .staylink-bio-container {
        padding-top: max(8px, env(safe-area-inset-top));
    }
}

/* Touch: scale + opacity عند الضغط (بدون مكتبات) */
#staylink-bio-root .staygo-btn:active,
#staylink-bio-root .sl-btn:active,
#staylink-bio-root .staylink-bio-bottom-nav-item:active,
#staylink-bio-root .staylink-sticky-btn:active,
#staylink-bio-root .staylink-platform-item:active {
    transform: scale(0.97);
    opacity: 0.92;
}
#staylink-bio-root .staygo-btn,
#staylink-bio-root .sl-btn,
#staylink-bio-root .staylink-bio-bottom-nav-item,
#staylink-bio-root .staylink-sticky-btn {
    transition: transform 0.12s ease, opacity 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
/* Ripple container (يُملأ من JS إن وُجد) */
#staylink-bio-root .staylink-btn-ripple {
    position: relative;
    overflow: hidden;
}
#staylink-bio-root .staylink-btn-ripple .staylink-ripple-span {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transform: scale(0);
    animation: staylink-ripple 0.5s ease-out;
    pointer-events: none;
}
@keyframes staylink-ripple {
    to { transform: scale(2.5); opacity: 0; }
}

/* Preloader (صفحات البيو) */
#staylink-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#staylink-preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.staylink-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 500;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 99998;
    transition: transform 0.35s ease;
}

.staylink-toast.show {
    transform: translateX(-50%) translateY(0);
}

.staylink-toast.toast-success {
    background: #10b981;
    color: #fff;
}

.staylink-toast.toast-error {
    background: #ef4444;
    color: #fff;
}

.staylink-toast.toast-info {
    background: #6366f1;
    color: #fff;
}

/* ========== Phase 5: أداء + تجربة + إمكانية وصول ========== */

/* Hero image blur-up: ظهور تدريجي بعد التحميل */
#staylink-bio-root .staylink-hero-img {
    opacity: 0;
    transition: opacity 0.35s ease;
}
#staylink-bio-root .staylink-hero-img.loaded {
    opacity: 1;
}

/* Skeleton: نبض خفيف حتى تحميل الصورة (مع LQIP الموجود في القوالب) */
#staylink-bio-root .staylink-bio-gallery-item:not(.loaded)::after,
#staylink-bio-root .sl-gallery-item:not(.loaded)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: staylink-skeleton-shine 1.2s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes staylink-skeleton-shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Accessibility: تباين و focus واضح (2px + offset لتحسين الوضوح) */
#staylink-bio-root .staygo-btn:focus-visible,
#staylink-bio-root .sl-btn:focus-visible,
#staylink-bio-root .staylink-bio-bottom-nav-item:focus-visible,
#staylink-bio-root .staylink-sticky-btn:focus-visible,
#staylink-bio-root a:focus-visible {
    outline: 2px solid var(--staygo-colors-accent, #0038f5);
    outline-offset: 2px;
}
#staylink-bio-root button:focus-visible,
#staylink-bio-root [role="button"]:focus-visible {
    outline: 2px solid var(--staygo-colors-accent, #0038f5);
    outline-offset: 2px;
}
#staylink-bio-root *:focus:not(:focus-visible) {
    outline: none;
}
/* تحسين تباين النص على الأزرار (على الخلفية الداكنة) */
#staylink-bio-root .staygo-btn,
#staylink-bio-root .sl-btn,
#staylink-bio-root .staylink-sticky-btn {
    font-weight: var(--staygo-typography-font-weight-semibold, 600);
}

/* Responsive: منع قص النصوص وتداخل العناصر */
#staylink-bio-root .staygo-section-title,
#staylink-bio-root .staylink-section-title {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
#staylink-bio-root .staygo-card,
#staylink-bio-root .staylink-form-card {
    min-width: 0;
    overflow-x: hidden;
}
#staylink-bio-root .staylink-bio-bottom-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 64px;
}
@media (max-width: 480px) {
    #staylink-bio-root .staylink-bio-bottom-nav-label { max-width: 52px; }
}

/* Dark mode: توحيد الحدود والتباين */
@media (prefers-color-scheme: dark) {
    #staylink-bio-root .staygo-btn,
    #staylink-bio-root .sl-btn,
    #staylink-bio-root .staylink-sticky-btn {
        border-color: rgba(255,255,255,0.2);
    }
    #staylink-bio-root .staylink-bio-bottom-nav-item:focus-visible,
    #staylink-bio-root a:focus-visible {
        outline-color: var(--staygo-colors-accent, #4d7cff);
    }
}