/* ═══════════════════════════════════════════════════════
   HomeBakes — Recipe Form Styles
   Pure CSS recipe card + authentic woven gingham background
   Card: #98D0D6  |  Text: #35595F
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Caveat:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap');

/* ══════════════════════════════════════════════════════
   AUTHENTIC WOVEN GINGHAM BACKGROUND
   Colors sampled from cream_gingham.jpg:
     Light: #F8F5EE (cream)
     Mid:   #E8DDD0 (tan stripe)
     Dark:  #D4C4B0 (intersection - where stripes cross)
   Repeat: 22px (11px per stripe — matches actual image)
   Woven texture: SVG fractalNoise overlay
══════════════════════════════════════════════════════ */

body {
  background-color: #F8F5EE;

  /* Layer 1: The 4-quadrant gingham color pattern */
  background-image:
    /* Woven fabric noise texture overlay */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    /* Gingham horizontal stripes */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 10px,
      rgba(196,170,140,0.35) 10px,
      rgba(196,170,140,0.35) 22px
    ),
    /* Gingham vertical stripes */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 10px,
      rgba(196,170,140,0.35) 10px,
      rgba(196,170,140,0.35) 22px
    );

  background-size: 200px 200px, 22px 22px, 22px 22px;
  min-height: 100vh;
}

/* ── Page layout ── */
.page-content { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }

.top-bar {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;
}

.top-bar h1 {
  font-size: 1.5rem; color: #3D2B1F;
  text-shadow: 0 1px 3px rgba(255,255,255,0.4);
  font-family: 'Playfair Display', serif;
}

/* ── Font picker — positioned below top bar, left aligned ── */
.font-picker {
  position: absolute;
  top: -2.5rem;          /* same height as the tab */
  left: 165px;           /* right of the tab (tab is 155px wide) */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  background: rgba(255,255,255,0.65);
  border-radius: 10px 10px 0 0;
  padding: 0.4rem 1rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  z-index: 1;
}

.font-picker-label {
  font-size: 0.72rem; font-weight: 700; color: #7A6550;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; font-family: 'Lato', sans-serif;
}

.font-btn {
  border: 1.5px solid transparent; background: white;
  border-radius: 100px; padding: 0.3rem 0.9rem;
  font-size: 0.85rem; cursor: pointer; color: #3D2B1F; transition: all 0.2s;
}
.font-btn:hover { border-color: #98D0D6; }
.font-btn.active { border-color: #35595F; background: #98D0D6; color: #35595F; font-weight: 700; }
.font-btn.typewriter  { font-family: 'Special Elite', serif; }
.font-btn.handwriting { font-family: 'Caveat', cursive; }
.font-btn.modern      { font-family: 'DM Sans', sans-serif; }

/* ══════════════════════════════════════════
   THE RECIPE CARD — 100% CSS
══════════════════════════════════════════ */

.recipe-card-outer {
  position: relative;
  margin-top: 7rem;    /* ← add this, pushes card down to make room for tab + font picker */
  filter:
    drop-shadow(2px 4px 3px rgba(0,0,0,0.20))
    drop-shadow(-1px 3px 4px rgba(0,0,0,0.10))
    drop-shadow(4px -1px 2px rgba(0,0,0,0.07));
}

.recipe-card {
  background-color: #98D0D6;
  border-radius: 0 16px 16px 16px;
  position: relative;
  overflow: visible;  /* allow footer to render correctly */
  display: flex;
  flex-direction: column;
}

/* Paper texture — covers entire card */
.recipe-card::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 1; opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 250px 250px;
}

/* Soft paper edge inner glow */
.recipe-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow:
    inset 2px 2px 5px rgba(255,255,255,0.4),
    inset -2px -2px 4px rgba(0,0,0,0.07),
    inset 1px -1px 3px rgba(255,255,255,0.2);
}

/* ── CSS folder tab ── */
.card-tab {
  position: absolute;
  top: -2.5rem; left: 0;
  width: 155px; height: 2.6rem;
  background-color: #98D0D6;
  border-radius: 10px 10px 0 0;
  display: flex; align-items: center;
  padding-left: 1.25rem; z-index: 0;
  /* Same paper texture on tab */
  overflow: hidden;
}

.card-tab::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 250px 250px;
}

/* Tab inner edge softening */
.card-tab::after {
  content: ''; position: absolute; inset: 0;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,0.35),
    inset -1px 0 3px rgba(0,0,0,0.05);
}

.card-tab-text {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700; color: #35595F;
  letter-spacing: 0.15em; position: relative; z-index: 1;
}

/* ── Card body ── */
.recipe-card-body { padding: 2rem 2rem 1.5rem; position: relative; z-index: 3; }

/* Font classes */
.recipe-card-body.font-typewriter,
.recipe-card-body.font-typewriter input,
.recipe-card-body.font-typewriter select,
.recipe-card-body.font-typewriter textarea { font-family: 'Special Elite', serif !important; }

.recipe-card-body.font-handwriting,
.recipe-card-body.font-handwriting input,
.recipe-card-body.font-handwriting select,
.recipe-card-body.font-handwriting textarea { font-family: 'Caveat', cursive !important; font-size: 1.05rem !important; }

.recipe-card-body.font-modern,
.recipe-card-body.font-modern input,
.recipe-card-body.font-modern select,
.recipe-card-body.font-modern textarea { font-family: 'DM Sans', sans-serif !important; }

/* ── Recipe header row ── */
.recipe-header-row {
  background: rgba(255,255,255,0.3); border-radius: 10px;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem;
}
.recipe-header-row .form-group { margin-bottom: 0; }

/* Labels */
.recipe-card-body .form-group label {
  color: #35595F; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-family: 'Lato', sans-serif !important;
}

/* All inputs */
.recipe-card-body input,
.recipe-card-body select,
.recipe-card-body textarea {
  background: rgba(255,255,255,0.55); border: 1px solid rgba(53,89,95,0.22);
  border-radius: 6px; color: #35595F; font-size: 0.95rem;
  padding: 0.5rem 0.75rem; width: 100%; outline: none;
  transition: background 0.2s, border-color 0.2s; font-family: inherit;
}
.recipe-card-body input:focus,
.recipe-card-body select:focus,
.recipe-card-body textarea:focus { background: rgba(255,255,255,0.82); border-color: #35595F; }
.recipe-card-body input::placeholder,
.recipe-card-body textarea::placeholder { color: rgba(53,89,95,0.42); font-style: italic; }

/* Section headers */
.section-header {
  font-weight: 700; font-size: 0.82rem; color: #35595F;
  margin: 1.5rem 0 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Lato', sans-serif !important;
}
.section-header::after { content: ''; flex: 1; height: 1px; background: rgba(53,89,95,0.22); }

/* Ingredients table */
.ingredients-table-wrapper { background: rgba(255,255,255,0.22); border-radius: 10px; padding: 0.75rem; margin-bottom: 0.75rem; }
.ingredients-table { width: 100%; border-collapse: collapse; }
.ingredients-table th { text-align: left; font-size: 0.7rem; font-weight: 700; color: #35595F; padding: 0 0.5rem 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'Lato', sans-serif !important; }
.ingredient-row td { padding: 0.3rem 0.4rem; vertical-align: middle; }

/* Typeahead */
.typeahead-wrapper { position: relative; }
.typeahead-input { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid rgba(53,89,95,0.22); border-radius: 6px; background: rgba(255,255,255,0.55); color: #35595F; font-family: inherit; font-size: 0.9rem; outline: none; }
.typeahead-input:focus { background: rgba(255,255,255,0.82); border-color: #35595F; }
.typeahead-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1.5px solid #98D0D6; border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto; z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,0.12); display: none; }
.typeahead-dropdown.open { display: block; }
.typeahead-item { padding: 0.5rem 0.75rem; font-size: 0.875rem; cursor: pointer; color: #35595F; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: space-between; font-family: 'Lato', sans-serif; }
.typeahead-item:last-child { border-bottom: none; }
.typeahead-item:hover, .typeahead-item.highlighted { background: #E8F7F8; }
.typeahead-category { font-size: 0.7rem; color: #98D0D6; font-style: italic; font-family: 'Lato', sans-serif; }
.typeahead-empty { padding: 0.75rem; font-size: 0.875rem; color: #98D0D6; text-align: center; font-style: italic; font-family: 'Lato', sans-serif; }

.amount-input { width: 100%; padding: 0.45rem 0.4rem; border: 1px solid rgba(53,89,95,0.22); border-radius: 6px; background: rgba(255,255,255,0.55); color: #35595F; font-family: inherit; font-size: 0.9rem; outline: none; text-align: center; }
.amount-input:focus { background: rgba(255,255,255,0.82); border-color: #35595F; }
.unit-select { width: 100%; padding: 0.45rem 0.3rem; border: 1px solid rgba(53,89,95,0.22); border-radius: 6px; background: rgba(255,255,255,0.55); color: #35595F; font-family: 'Lato', sans-serif; font-size: 0.85rem; outline: none; cursor: pointer; }
.unit-select:focus { background: rgba(255,255,255,0.82); border-color: #35595F; }

/* ── Amount widget (amounts.js) ─────────────────────────────────────────── */
.amount-wrapper { display: flex; flex-direction: column; gap: 0.25rem; }
.amount-select { width: 100%; padding: 0.45rem 0.3rem; border: 1px solid rgba(53,89,95,0.22); border-radius: 6px; background: rgba(255,255,255,0.55); color: #35595F; font-family: 'Lato', sans-serif; font-size: 0.85rem; outline: none; cursor: pointer; }
.amount-select:focus { background: rgba(255,255,255,0.82); border-color: #35595F; }
.amount-custom-wrapper { display: flex; flex-direction: column; gap: 0.2rem; }
.amount-custom-input { width: 100%; padding: 0.45rem 0.4rem; border: 1px solid rgba(53,89,95,0.22); border-radius: 6px; background: rgba(255,255,255,0.55); color: #35595F; font-family: inherit; font-size: 0.9rem; outline: none; text-align: center; box-sizing: border-box; }
.amount-custom-input:focus { background: rgba(255,255,255,0.82); border-color: #35595F; }
.amount-helper-text { font-size: 0.7rem; color: rgba(53,89,95,0.65); font-style: italic; font-family: 'Lato', sans-serif; line-height: 1.2; }
.note-input { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid rgba(53,89,95,0.22); border-radius: 6px; background: rgba(255,255,255,0.55); color: #35595F; font-family: inherit; font-size: 0.85rem; font-style: italic; outline: none; }
.note-input:focus { background: rgba(255,255,255,0.82); border-color: #35595F; font-style: normal; }
.note-input::placeholder { color: rgba(53,89,95,0.38); }

.btn-remove-row { background: none; border: none; cursor: pointer; color: rgba(53,89,95,0.35); font-size: 1rem; padding: 0.2rem 0.4rem; border-radius: 4px; transition: all 0.15s; line-height: 1; font-family: 'Lato', sans-serif; }
.btn-remove-row:hover { background: rgba(192,57,43,0.1); color: #C0392B; }
.btn-add-ingredient { display: flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.3); border: 1.5px dashed rgba(53,89,95,0.3); border-radius: 8px; padding: 0.5rem 1rem; font-family: 'Lato', sans-serif; font-size: 0.85rem; color: #35595F; font-weight: 700; cursor: pointer; transition: background 0.2s; margin-top: 0.5rem; }
.btn-add-ingredient:hover { background: rgba(255,255,255,0.5); }

/* Directions */
.direction-block { background: rgba(255,255,255,0.2); border-radius: 10px; padding: 1rem; margin-bottom: 0.75rem; }
.direction-block-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.direction-title-input { flex: 1; padding: 0.45rem 0.75rem; border: 1px solid rgba(53,89,95,0.22); border-radius: 6px; background: rgba(255,255,255,0.55); color: #35595F; font-weight: 700; font-size: 0.95rem; outline: none; font-family: inherit; }
.direction-title-input:focus { background: rgba(255,255,255,0.82); border-color: #35595F; }
.direction-text-input { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid rgba(53,89,95,0.22); border-radius: 6px; background: rgba(255,255,255,0.55); color: #35595F; font-size: 0.95rem; outline: none; resize: vertical; min-height: 110px; line-height: 1.7; font-family: inherit; }
.direction-text-input:focus { background: rgba(255,255,255,0.82); border-color: #35595F; }
.btn-add-direction { display: flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.3); border: 1.5px dashed rgba(53,89,95,0.3); border-radius: 8px; padding: 0.5rem 1rem; font-family: 'Lato', sans-serif; font-size: 0.85rem; color: #35595F; font-weight: 700; cursor: pointer; transition: background 0.2s; margin-top: 0.25rem; }
.btn-add-direction:hover { background: rgba(255,255,255,0.5); }

/* ══════════════════════════════════════════
   IMAGE UPLOAD AREA
══════════════════════════════════════════ */

.image-upload-section { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(53,89,95,0.15); }
.image-upload-area { position: relative; width: 100%; min-height: 220px; border: 2.5px dashed rgba(53,89,95,0.35); border-radius: 12px; background: rgba(255,255,255,0.25); cursor: pointer; overflow: hidden; transition: background 0.2s, border-color 0.2s; display: flex; align-items: center; justify-content: center; }
.image-upload-area:hover { background: rgba(255,255,255,0.4); border-color: #35595F; }
.image-upload-area.drag-over { background: rgba(255,255,255,0.55); border-color: #35595F; border-style: solid; }
.image-placeholder { text-align: center; padding: 2rem; pointer-events: none; }
.image-placeholder-icon { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; opacity: 0.6; }
.image-placeholder-text { font-family: 'Satisfy', cursive; font-size: 1.1rem; color: #35595F; line-height: 1.5; opacity: 0.8; }
.image-placeholder-sub { font-family: 'Lato', sans-serif; font-size: 0.78rem; color: rgba(53,89,95,0.55); margin-top: 0.5rem; font-style: italic; }
.image-preview { width: 100%; height: 100%; min-height: 220px; max-height: 380px; object-fit: cover; display: none; border-radius: 10px; }
.image-change-hint { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: background 0.2s; opacity: 0; }
.image-upload-area:hover .image-change-hint { background: rgba(0,0,0,0.3); opacity: 1; }
.image-change-hint span { color: white; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.9rem; text-shadow: 0 1px 4px rgba(0,0,0,0.5); background: rgba(0,0,0,0.4); padding: 0.4rem 1rem; border-radius: 100px; }

/* ══════════════════════════════════════════
   CUTLERY FOOTER — seamless part of card
   No border, no background change, just
   the SVG centered at the bottom
══════════════════════════════════════════ */

.recipe-card-footer {
  /* NO background-color — inherits card color seamlessly */
  padding: 0.75rem 0 1.25rem;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  clear: both;
}

.cutlery-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cutlery-icon svg {
  width: 56px;
  height: 28px;
  display: block;
}

/* ── Form actions ── */
.form-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; gap: 1rem; flex-wrap: wrap; }
.form-actions-right { display: flex; gap: 0.75rem; align-items: center; }
.toggle-group { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #35595F; font-weight: 700; font-family: 'Lato', sans-serif; }
.toggle-switch { position: relative; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: rgba(53,89,95,0.22); border-radius: 24px; cursor: pointer; transition: background 0.2s; }
.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-slider { background: #35595F; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.btn-save { background: #35595F; color: white; border: none; border-radius: 100px; padding: 0.7rem 2rem; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: opacity 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.btn-save:hover { opacity: 0.85; }
.btn-cancel { background: rgba(255,255,255,0.5); color: #35595F; border: 1.5px solid rgba(53,89,95,0.25); border-radius: 100px; padding: 0.7rem 1.5rem; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background 0.2s; text-decoration: none; display: inline-flex; align-items: center; }
.btn-cancel:hover { background: rgba(255,255,255,0.75); }
.saving-msg { display: none; align-items: center; gap: 0.5rem; color: #35595F; font-size: 0.9rem; font-weight: 700; font-family: 'Lato', sans-serif; }
.saving-msg.visible { display: flex; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(53,89,95,0.25); border-top-color: #35595F; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 640px) {
  .recipe-header-row { grid-template-columns: 1fr; }
  .page-content { padding: 1rem 1rem 3rem; }
  .top-bar h1 { font-size: 1.2rem; }
  .font-picker { flex-wrap: wrap; }
  .ingredients-table th:nth-child(4), .ingredient-row td:nth-child(4) { display: none; }
  .image-upload-area { min-height: 160px; }
}

/* ── Typeahead create button ── */
.typeahead-create-btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  color: #35595F;
  cursor: pointer;
  border-top: 1px dashed #E8E0D5;
  background: #F8F5EE;
  font-family: 'Lato', sans-serif;
  transition: background 0.15s;
}
.typeahead-create-btn:hover { background: #EEE8DF; }

/* ── Notes textarea ── */
.notes-textarea {
  width: 100%;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(53,89,95,0.2);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: #35595F;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  margin-top: 0.5rem;
  transition: background 0.2s;
  line-height: 1.6;
}
.notes-textarea::placeholder { color: rgba(53,89,95,0.45); font-style: italic; }
.notes-textarea:focus { background: rgba(255,255,255,0.4); border-color: rgba(53,89,95,0.4); }