/* 引入 PowerGrid 的樣式 */
@import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css';
@import "flatpickr/dist/flatpickr.min.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
.container { text-align: center; margin: 20px; }
.header { background: #D32F2F; padding: 10px 0; color: white; font-size: 24px; font-weight: 500; text-align: center; }
.banner { width: 100%; max-width: 600px; margin: 0 auto 20px; }
.banner img { width: 100%; height: auto; }
.content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px 20px; max-width: 600px; margin: 0 auto; justify-content: center; }
@media (max-width: 600px) { .content { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 400px) { .content { grid-template-columns: repeat(2, 1fr); gap: 8px; } .card { width: auto; max-width: 160px; } }
.card { width: 100%; max-width: 180px; margin: 0 auto; display: flex; justify-content: center; align-items: center;
        background: linear-gradient(135deg, #FF4081, #FF4081); color: white; border-radius: 10px; text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; cursor: pointer; }
.card:hover { transform: scale(1.05); }
.card img { width: 100%; height: auto; object-fit: contain; }
.section { display: none; }
.section.active { display: block; }