/* Minimal styles for gift registry */
:root{
  --site-green: #427a5e;
  --site-dark: #004030;
  --card-radius: 15px;
  --btn-radius: 10px;
  --muted: #666;
}

.gifts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.gift-card {
  background: #ffffff;
  border-radius: var(--card-radius);
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gift-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); }

.gift-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; display:block; }

.gift-title { font-weight: 700; margin: 0.5rem 0; color: var(--site-dark); font-size: 1.05rem; }
.gift-price { color: var(--site-dark); font-weight: 600; margin-bottom: 0.5rem; }
.gift-qty { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.5rem; }

/* Buttons */
.btn { display: inline-block; padding: 0.6rem 1rem; border-radius: var(--btn-radius); border: none; cursor: pointer; font-weight: 600; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.btn:focus { outline: 3px solid rgba(66,122,94,0.12); }
.btn-primary { background: var(--site-green); color: white; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-secondary { background: #8F8D91; color: white; }
.btn-danger { background: #e74c3c; color: white; }

/* Remove underline for anchor-styled buttons and ensure pointer styling */
.btn[href] { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.gift-card .actions { display:flex; gap:0.5rem; margin-top:0.75rem; }
.gift-card .actions button { flex: 1; }

/* Modal adjustments to match site */
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); z-index: 1200; }
.modal[hidden] { display: none; }
.modal-content { background: white; padding: 1.5rem; border-radius: 20px; width: 92%; max-width: 720px; box-shadow: 0 30px 60px rgba(0,0,0,0.12); }
.modal-close { float: right; background: transparent; border: none; font-size: 1.5rem; cursor: pointer; }

/* Layout for actions area inside modal: align purchase button and quantity inline */
.modal-actions { display:flex; gap:0.75rem; margin-bottom: 0.75rem; align-items:center; flex-wrap:wrap; }

/* Structured action items: quantity, buy, reserve */
.modal-actions .action-item { display:flex; flex-direction:column; gap:0.35rem; min-width: 0; }
.modal-actions .action-item label { font-weight:600; color:var(--site-dark); font-size:0.95rem; }
.modal-actions .action-item.quantity { flex: 0 0 auto; display:flex; flex-direction:row; align-items:center; gap:0.5rem; }
.modal-actions .action-item.quantity input { width:5.5rem; }
.modal-actions .action-item.buy, .modal-actions .action-item.reserve { flex: 1 1 140px; display:flex; align-items:center; }
.modal-actions .action-item.buy .input-tooltip { margin-left:0.5rem; }
.modal-actions .action-item.buy .action-equal, .modal-actions .action-item.reserve .action-equal { width:100%; }

@media (max-width:520px){
  .modal-actions { flex-direction:column; align-items:stretch; }
  .modal-actions .action-item.buy, .modal-actions .action-item.reserve { width:100%; }
  .modal-actions .action-item.quantity { justify-content:flex-start; }
}

/* Reserve button alignment and sizing */
.reserve-row { display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.reserve-action button#reserve-btn { padding: 0.6rem 1rem; border-radius: var(--btn-radius); font-weight:600; }
/* Make reserve button visually similar width as purchase button on larger screens */
@media (min-width:480px){
  .action-buttons .action-equal { min-width: 140px; width: 140px; }
}
/* On small screens allow equal buttons to shrink but keep spacing */
@media (max-width:479px){
  .action-buttons { width:100%; }
  .action-buttons .action-equal { flex: 1 1 auto; }
}

/* Make sure anchor buttons don't show an underline on focus/visited */
.btn { text-decoration: none; }
.btn:visited, .btn:active { text-decoration: none; }

/* Make modal inputs match RSVP form inputs for consistent styling */
.modal-content label { display: block; margin-top: 0.75rem; margin-bottom: 0.35rem; font-weight: 600; color: var(--site-dark); }
.modal-content input,
.modal-content select,
.modal-content textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #666666;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  font-family: 'Playfair Display', serif;
  box-sizing: border-box;
}
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  outline: none;
  border-color: var(--site-dark);
  box-shadow: 0 0 0 3px rgba(74, 151, 130, 0.1);
}
.modal-content textarea { min-height: 100px; resize: vertical; }

/* Reserve quantity input should be compact but visually consistent */
#reserve-qty { width: 5.5rem; display: inline-block; vertical-align: middle; }
#reserve-qty:focus { outline: none; border-color: var(--site-dark); box-shadow: 0 0 0 3px rgba(74, 151, 130, 0.08); }

/* Ensure .form-group styles apply inside modal for consistent spacing */
.modal-content .form-group { margin-bottom: 1rem; }
.modal-content .form-group label { margin-bottom: 0.35rem; }

/* Purchase link tooltip styling */
.input-tooltip { display:inline-block; background:#FFF9E5; border-left:4px solid #DCD0A8; padding:0.5rem 0.75rem; border-radius:6px; font-size:0.9rem; color:var(--site-dark); margin-left:0.75rem; }
.modal-content #purchase-tooltip { display:none; margin-left:0.5rem; }
.modal-content a#gift-purchase[style*="display:none"] + #purchase-tooltip { display:none; }
.modal-content a#gift-purchase[style*="display:"] + #purchase-tooltip { display:inline-block; }

/* Admin list */
.admin-list { display:flex; flex-direction: column; gap: 0.75rem; }
.admin-list .gift-card { flex-direction: row; gap: 1rem; align-items: center; }
.admin-list .gift-card img { width: 120px; height: 80px; flex-shrink: 0; }
.admin-controls { display:flex; gap:0.5rem; }

/* Create form */
#create label { display:block; margin-bottom:0.5rem; font-weight:600; color:var(--site-dark); }
#create input, #create textarea { width:100%; padding:0.6rem; border:1px solid #e6ded9; border-radius:8px; margin-bottom:0.5rem; }
#create .btn { margin-top:0.5rem; }

@media (max-width:600px){
  .gift-card img { height: 140px; }
  .admin-list .gift-card { flex-direction: column; align-items:flex-start; }
}

/* Autocomplete suggestions */
.autocomplete-container { position: relative; }
.autocomplete-suggestions {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: white;
  border: 1px solid #e6ded9;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  z-index: 2000;
  max-height: 220px; overflow: auto;
  display: none;
}
.autocomplete-suggestions.show { display: block; }
.autocomplete-suggestions .suggestion-item { padding: 0.6rem; cursor: pointer; border-bottom: 1px solid #f2f0ee; }
.autocomplete-suggestions .suggestion-item:hover, .autocomplete-suggestions .suggestion-item.highlighted { background: #f7f7f7; }
.autocomplete-suggestions .suggestion-name { font-weight:700; color:var(--site-dark); }
.autocomplete-suggestions .suggestion-details { font-size:0.9rem; color:var(--muted); }