/* AI App Icon Studio - Custom Stylesheet */

/* Custom scrollbars */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(11, 19, 38, 0.5);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, 0.2);
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 240, 255, 0.4);
}

/* Glassmorphism effects */
.glass-panel {
    background: rgba(23, 31, 51, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(132, 148, 149, 0.12);
}

.glass-card {
    background: rgba(45, 52, 73, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    border-color: rgba(0, 219, 233, 0.3);
    box-shadow: 0 12px 30px rgba(0, 219, 233, 0.08);
    transform: translateY(-2px);
}

.glow-accent {
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.25);
    transition: all 0.3s ease;
}

.glow-accent:hover {
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.4);
}

/* Custom range sliders */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(45, 52, 73, 0.8);
    height: 6px;
    border-radius: 9999px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -5px; /* Centers thumb on the track */
    background-color: #00dbe9;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 219, 233, 0.5);
    transition: all 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background-color: #7df4ff;
    box-shadow: 0 0 15px rgba(0, 219, 233, 0.8);
}

/* Safe Zone Overlay Styling */
.safe-zone-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.safe-zone-overlay.active {
    opacity: 1;
}

/* iOS HIG 80% Safe Zone Square */
.safe-zone-ios {
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    border: 2px dashed rgba(244, 63, 94, 0.7); /* Neon Rose for iOS guides */
    border-radius: 18%; /* iOS squircle shape */
    box-shadow: 0 0 0 9999px rgba(11, 19, 38, 0.4); /* Dim outside region */
}

.safe-zone-ios::after {
    content: "iOS HIG 80% Safe Zone";
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(244, 63, 94, 0.9);
    color: #0b1326;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Android Adaptive 66% Safe Zone Circle */
.safe-zone-android {
    position: absolute;
    top: 17%;
    left: 17%;
    right: 17%;
    bottom: 17%;
    border: 2px dashed rgba(34, 197, 94, 0.7); /* Safety Green for Android */
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(11, 19, 38, 0.45); /* Dim outside region */
}

.safe-zone-android::after {
    content: "Android Adaptive 66% Circle";
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.9);
    color: #0b1326;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Real-world Contexts - Perspective Dock and Home Screens */
.ios-squircle-mask {
    clip-path: url(#squircle-clip);
}

/* macOS perspective dock effect */
.mac-dock-shelf {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    height: 12px;
    width: 64px;
    border-radius: 8px 8px 0 0;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%) perspective(80px) rotateX(35deg);
}

.mac-dock-icon-wrapper {
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom center;
}

.mac-dock-icon-wrapper:hover {
    transform: scale(1.22) translateY(-10px);
}

.mac-dock-icon-wrapper:hover + .mac-dock-icon-wrapper,
.mac-dock-icon-wrapper:has(+ .mac-dock-icon-wrapper:hover) {
    transform: scale(1.1) translateY(-4px);
}

/* Lighting angle controller wheel */
.lighting-wheel {
    cursor: pointer;
    touch-action: none;
    transition: border-color 0.3s ease;
}

.lighting-wheel:hover {
    border-color: #00dbe9 !important;
}

/* Custom visual toggle states */
.active-glow-border {
    border-color: #00dbe9 !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
}

/* Toast message animation */
@keyframes slideUpFade {
    0% {
        transform: translateY(20px) translateX(-50%);
        opacity: 0;
    }
    100% {
        transform: translateY(0) translateX(-50%);
        opacity: 1;
    }
}

.animate-toast {
    animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}