@import "tailwindcss";

@theme {
  --color-gray-50: #FBF8F4;
  --color-gray-100: #F2EBEF;
  --color-gray-200: #D9CDD4;
  --color-gray-500: #6B6068;
  --color-gray-600: #6B6068;
  --color-gray-900: #29252A;
  --color-blue-500: #6F3E64;
  --color-blue-600: #6F3E64;
  --color-blue-700: #57314E;
  --color-blue-800: #57314E;
}
@layer base {
  body { color: var(--color-gray-900); background: var(--color-gray-50); }
  input, textarea { font-size: 1rem; }
  button { min-height: 44px; }
  :focus-visible { outline: 2px solid var(--color-blue-600); outline-offset: 2px; }
}
@media (min-width: 1024px) {
  .gift-card { display: flex; flex-direction: column; }
  .gift-card > * { width: 100%; }
  .gift-card [data-testid="item-image"] { width: 100%; height: 192px; }
}
.gift-dialog { border: 0; padding: 0; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; background: white; }
.gift-dialog::backdrop { background: #29252a88; }
.gift-dialog[open] { display: flex; flex-direction: column; }
.gift-dialog form { overflow-y: auto; min-height: 0; }
.gift-dialog form > fieldset > div:last-child { position: sticky; bottom: 0; background: var(--color-gray-50); padding-block: 12px; }
@media (min-width: 768px) { .gift-dialog { margin: auto; width: 640px; height: auto; max-height: 90dvh; border-radius: 16px; } }
.gift-dialog form > fieldset > div:has([data-testid="item-image"]) { width: 100%; }
.gift-dialog [aria-label="Find a picture"] { border: 0; padding: 16px; }
.gift-dialog [aria-label="Find a picture"] > label { display: block; position: sticky; top: 0; background: white; padding-bottom: 8px; z-index: 1; }
.gift-dialog [aria-label="Find a picture"] input { font-size: 16px; }
.gift-dialog { padding-bottom: env(safe-area-inset-bottom); }