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

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

.ios-icon-container {
    border-radius: 22.5%;
    aspect-ratio: 1 / 1;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.ios-icon-container:hover {
    transform: scale(1.07) translateY(-4px);
    box-shadow: 0 16px 24px -8px rgba(0, 0, 0, 0.15);
}

/* Light theme calendar picker */
input[type="date"],
input[type="date"]:focus,
input[type="date"]:active {
    color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
    cursor: pointer;
    opacity: 1;
}
