@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

@layer components {
.comfort-form-input {
  @apply w-full p-4 border border-stone-200 rounded-lg outline-none transition ring-2 ring-transparent focus:ring-teal-200 bg-white;
}
}
/* Base body styles for a soft, welcoming feel */
body {
    background-color: #FBFBFB; /* A very light, almost white color for a clean, soft background */
    font-family: 'Inter', sans-serif; /* A modern, clean sans-serif for body text */
}

/* Custom font class for headings to give them a more classic, gentle feel */
.heading-font {
    font-family: 'Lora', serif; /* A serif font that feels elegant and comfortable */
}

/* A subtle shadow effect for cards and containers to lift them off the page gently */
.soft-shadow-comfort {
    box-shadow: 0 5px 25px -5px rgba(0, 0, 0, 0.04); /* A light, diffused shadow */
}

/* Base style for primary action buttons */
.comfort-button {
    background-color: #14B8A6; /* A calming teal color (Tailwind's teal-500) */
    color: white;
    font-weight: 600; /* Semi-bold for clear readability */
    border-radius: 0.5rem; /* 8px rounded corners */
    padding: 1rem 2rem; /* Generous padding for a clickable area */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

/* Hover state for primary buttons */
.comfort-button:hover {
    background-color: #0D9488; /* A slightly darker shade of teal for interaction feedback (Tailwind's teal-600) */
}

/* Style for form inputs */
.comfort-input {
    border-radius: 0.5rem; /* 8px rounded corners */
    padding: 1rem; /* Comfortable padding for easy typing */
    border: 1px solid #E7E5E4; /* A soft stone color for the border (Tailwind's stone-200) */
    transition: all 0.2s ease-in-out; /* Smooth transition for focus state */
}

/* Focus state for form inputs to provide clear visual feedback */
.comfort-input:focus {
    --tw-ring-color: #A7F3D0; /* A very light, soft green ring color (Tailwind's green-200) */
    border-color: #14B8A6; /* Border color matches the button color for consistency (Teal-500) */
    outline: none; /* Remove default browser outline */
    box-shadow: 0 0 0 3px var(--tw-ring-color); /* Apply the custom ring shadow */
}

/* Card Controls CSS */
#card-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.control-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}
.control-btn:hover {
    background-color: #f0f0f0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.control-btn svg {
    width: 20px;
    height: 20px;
    stroke: #333;
}
#card-wrapper {
    perspective: 1000px;
}
#card-wrapper.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
#card-wrapper.fullscreen .card-container-inner {
    max-width: 90vw;
    max-height: 90vh;
}
.card-container-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}