1/* PWA-specific styles */
2.pwa-mode .radio-player.footer {
3    padding-bottom: 20px;
4}
5
6/* Install Banner Styles */
7.install-banner {
8    position: absolute;
9    top: -80px;
10    left: 0;
11    right: 0;
12    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
13    border: 1px solid rgba(255, 255, 255, 0.1);
14    border-radius: 8px 8px 0 0;
15    padding: 12px 20px;
16    animation: slideDown 0.3s ease-out;
17    z-index: 10001;
18}
19
20.install-banner-content {
21    display: flex;
22    align-items: center;
23    gap: 12px;
24}
25
26.install-banner-icon {
27    font-size: 1.5rem;
28}
29
30.install-banner-text {
31    flex: 1;
32}
33
34.install-banner-title {
35    font-weight: 600;
36    color: #ffffff;
37    margin-bottom: 2px;
38    font-size: 14px;
39}
40
41.install-banner-description {
42    font-size: 12px;
43    color: rgba(255, 255, 255, 0.7);
44}
45
46.install-banner-actions {
47    display: flex;
48    gap: 8px;
49}
50
51.install-banner-button {
52    padding: 6px 12px;
53    border: none;
54    border-radius: 4px;
55    font-size: 12px;
56    font-weight: 500;
57    cursor: pointer;
58    transition: all 0.2s ease;
59}
60
61.install-banner-button.install-now {
62    background: #ffffff;
63    color: #000000;
64}
65
66.install-banner-button.install-now:hover {
67    background: #f0f0f0;
68}
69
70.install-banner-button.install-later {
71    background: transparent;
72    color: rgba(255, 255, 255, 0.7);
73    border: 1px solid rgba(255, 255, 255, 0.3);
74}
75
76.install-banner-button.install-later:hover {
77    background: rgba(255, 255, 255, 0.1);
78    color: #ffffff;
79}
80
81/* Update Banner Styles */
82.update-banner {
83    position: absolute;
84    top: -60px;
85    left: 0;
86    right: 0;
87    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
88    border-radius: 8px 8px 0 0;
89    padding: 12px 20px;
90    animation: slideDown 0.3s ease-out;
91    z-index: 10001;
92}
93
94.update-banner-content {
95    display: flex;
96    align-items: center;
97    justify-content: space-between;
98    gap: 12px;
99}
100
101.update-banner-text {
102    flex: 1;
103}
104
105.update-banner-title {
106    font-weight: 600;
107    color: #ffffff;
108    margin-bottom: 2px;
109    font-size: 14px;
110}
111
112.update-banner-description {
113    font-size: 12px;
114    color: rgba(255, 255, 255, 0.8);
115}
116
117.update-banner-button {
118    padding: 6px 16px;
119    border: none;
120    border-radius: 4px;
121    font-size: 12px;
122    font-weight: 500;
123    cursor: pointer;
124    background: #ffffff;
125    color: #1e3a8a;
126    transition: all 0.2s ease;
127}
128
129.update-banner-button:hover {
130    background: #f0f0f0;
131}
132
133/* PWA Toast Notifications */
134.pwa-toast {
135    position: fixed;
136    top: 20px;
137    right: 20px;
138    background: #2d2d2d;
139    border: 1px solid rgba(255, 255, 255, 0.1);
140    border-radius: 8px;
141    padding: 12px 16px;
142    color: #ffffff;
143    z-index: 10002;
144    transform: translateX(100%);
145    transition: transform 0.3s ease;
146    max-width: 300px;
147}
148
149.pwa-toast.show {
150    transform: translateX(0);
151}
152
153.pwa-toast-success {
154    background: linear-gradient(135deg, #065f46 0%, #10b981 100%);
155}
156
157.pwa-toast-content {
158    display: flex;
159    align-items: center;
160    gap: 8px;
161}
162
163.pwa-toast-content i {
164    font-size: 1.2rem;
165}
166
167/* Install Button Styling */
168.install-button {
169    position: relative;
170    overflow: visible;
171}
172
173.install-button::after {
174    content: '';
175    position: absolute;
176    top: -2px;
177    right: -2px;
178    width: 8px;
179    height: 8px;
180    background: #10b981;
181    border-radius: 50%;
182    animation: pulse 2s infinite;
183}
184
185/* Animations */
186@keyframes slideDown {
187    from {
188        transform: translateY(-100%);
189        opacity: 0;
190    }
191    to {
192        transform: translateY(0);
193        opacity: 1;
194    }
195}
196
197@keyframes pulse {
198    0%, 100% {
199        opacity: 1;
200        transform: scale(1);
201    }
202    50% {
203        opacity: 0.5;
204        transform: scale(1.2);
205    }
206}
207
208/* PWA Mode Adjustments */
209@media (display-mode: standalone) {
210    body {
211        padding-top: env(safe-area-inset-top);
212        padding-bottom: env(safe-area-inset-bottom);
213    }
214    
215    .radio-player.footer {
216        bottom: env(safe-area-inset-bottom);
217    }
218}
219
220/* Mobile PWA optimizations */
221@media (max-width: 768px) {
222    .install-banner {
223        top: -70px;
224        padding: 10px 15px;
225    }
226    
227    .install-banner-title {
228        font-size: 13px;
229    }
230    
231    .install-banner-description {
232        font-size: 11px;
233    }
234    
235    .install-banner-button {
236        padding: 5px 10px;
237        font-size: 11px;
238    }
239    
240    .pwa-toast {
241        top: 10px;
242        right: 10px;
243        left: 10px;
244        max-width: none;
245    }
246}