:root {
  --theme: #ec4899;
  --theme-light: #f472b6;
  --theme-lighter: #fbcfe8;
  --theme-lightest: #fdf2f8;
  --theme-dark: #db2777;
  --text: #454a52;
  --text-muted: #6b7280;
  --bg: #ffffff;
  --card-bg: #f9fafb;
  --border: #e5e7eb;
  --zomato: #e23744;
  --eazydiner: #f97316;
  --bookmyshow: #e23744;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: var(--bg); line-height: 1.5; }

/* Navigation Bar */
.navbar { display: none; position: sticky; top: 0; z-index: 100; background: var(--theme); color: white; padding: 0.75rem 1rem; }
.navbar.active { display: flex; align-items: center; gap: 1rem; }
.navbar .brand { font-size: 1.25rem; font-weight: 700; }
.navbar .tagline { font-size: 0.75rem; opacity: 0.9; }
.navbar .back-btn { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; }

/* Hero */
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: linear-gradient(135deg, var(--theme-lightest) 0%, var(--bg) 100%); }
.hero h1 { font-size: 2.5rem; font-weight: 700; color: var(--theme-dark); margin-bottom: 1rem; }
.hero p { font-size: 1.1rem; color: var(--text-muted); max-width: 320px; margin-bottom: 2rem; }
.btn { background: var(--theme); color: white; border: none; padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 600; border-radius: 50px; cursor: pointer; transition: background 0.2s, transform 0.1s; }
.btn:hover { background: var(--theme-dark); }
.btn:active { transform: scale(0.98); }

/* Card Selection */
.selection { padding-bottom: 100px; display: none; }
.selection.active { display: block; }
.search-bar { position: sticky; top: 52px; background: var(--bg); padding: 1rem; z-index: 10; border-bottom: 1px solid var(--border); }
.search-input-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: 12px; background: var(--card-bg); min-height: 52px; }
.search-input-wrap:focus-within { border-color: var(--theme-light); }
.search-input { flex: 1; min-width: 120px; border: none; background: transparent; font-size: 1rem; outline: none; }
.chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.75rem; background: var(--theme-lighter); color: var(--theme-dark); border-radius: 50px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.chip:hover { background: var(--theme-light); color: white; }
.chip .remove { font-size: 1.1rem; line-height: 1; margin-left: 0.25rem; }

/* Bank Sections */
.banks { margin-top: 1rem; padding: 0 1rem; }
.bank-section { margin-bottom: 1.5rem; }
.bank-name { font-size: 0.9rem; font-weight: 600; color: var(--theme); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.cards-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.card-chip { padding: 0.5rem 1rem; background: var(--card-bg); border: 1.5px solid var(--theme-light); border-radius: 50px; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; }
.card-chip:hover { border-color: var(--theme); background: var(--theme-lightest); }
.card-chip.selected { background: var(--theme); color: white; border-color: var(--theme); }
.card-chip .card-type { font-size: 0.75rem; color: var(--text-muted); margin-left: 0.25rem; }
.card-chip.selected .card-type { color: var(--theme-lighter); }

/* Show Offers Button */
.show-offers-wrap { position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(transparent, var(--bg) 30%); display: none; }
.show-offers-wrap.active { display: block; }
.btn-block { width: 100%; }

/* Offers Screen */
.offers { display: none; padding-bottom: 2rem; }
.offers.active { display: block; }
.offers-top-bar { padding: 0.75rem 1rem; background: var(--theme-lightest); border-bottom: 1px solid var(--border); }
.selected-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.selected-chips .chip { background: var(--theme-lighter); font-size: 0.8rem; }

/* Carousel */
.carousel-container { padding: 1rem 0; overflow: hidden; }
.carousel-wrapper { position: relative; height: 220px; width: 100%; max-width: 650px; margin: 0 auto; }
.carousel-track { position: relative; height: 100%; width: 100%; }
.carousel-card { position: absolute; width: 200px; height: 200px; border-radius: 16px; cursor: pointer; transition: transform 0.5s ease, opacity 0.5s ease, left 0.5s ease; top: 50%; transform: translateY(-50%); overflow: hidden; }
.carousel-card.center { left: 50%; transform: translate(-50%, -50%) scale(1.1); z-index: 3; opacity: 1; }
.carousel-card.left { left: 5%; transform: translateY(-50%) scale(0.9); z-index: 2; opacity: 0.7; }
.carousel-card.right { left: 95%; transform: translate(-100%, -50%) scale(0.9); z-index: 2; opacity: 0.7; }
.carousel-card.hidden { left: 50%; transform: translate(-50%, -50%) scale(0.8); z-index: 1; opacity: 0; pointer-events: none; }
.carousel-card.disabled { filter: grayscale(1); }
.carousel-card.disabled.left, .carousel-card.disabled.right { opacity: 0.4; }
.carousel-card .bg-image { position: absolute; top: -4%; left: -4%; width: 108%; height: 108%; object-fit: cover; border-radius: 16px; }
.carousel-card .offer-overlay { position: absolute; top: 45%; left: 16px; right: 16px; transform: translateY(-50%); text-align: center; }
.carousel-card.bookmyshow .offer-overlay { color: #333; }
.carousel-card:not(.bookmyshow) .offer-overlay { color: white; }
.carousel-card .offer-value { font-size: 1.25rem; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.carousel-card.bookmyshow .offer-value { text-shadow: none; }
.carousel-card.disabled .offer-value { font-size: 1.1rem; }
.carousel-indicators { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.carousel-indicators .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background 0.3s; cursor: pointer; }
.carousel-indicators .dot.active { background: var(--theme); }

/* Offer List */
.offers-list { padding: 1rem; max-width: 800px; margin: auto }
.offers-list h3 { font-size: 1rem; color: var(--text-muted); margin-bottom: 1rem; }
.offer-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 0.75rem; overflow: hidden; }
.offer-main { padding: 1rem; }
.offer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.offer-left { display: flex; align-items: center; gap: 0.75rem; }
.source-icon { width: 50px; height: 50px; border-radius: 12px; object-fit: contain; }
.offer-title { font-weight: 400; font-size: 1rem; color: var(--text); }
.offer-right { text-align: right; }
.offer-bank-name { font-size: 1rem; color: var(--theme); }
.offer-card-name { font-size: 1rem; color: var(--theme); }
.view-detail { color: var(--theme); font-size: 0.85rem; font-weight: 500; cursor: pointer; margin-top: 0.5rem; }
.offer-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 0.5rem; }
.offer-details { font-size: 0.85rem; color: var(--text-muted); }
.offer-details span { display: block; margin-top: 0.15rem; }
.offer-actions { text-align: right; }
.btn-mark-used { background: var(--theme); color: white; border: none; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 500; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
.btn-mark-used:hover { background: var(--theme-dark); }
.used-info { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
.edit-icon { cursor: pointer; font-size: 1rem; color: var(--theme); }
.offer-expanded { padding: 0 1rem 1rem; display: none; border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 0.75rem; }
.offer-expanded.active { display: block; }
.offer-text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }

/* Date Edit Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal { background: white; border-radius: 16px; padding: 1.5rem; width: 90%; max-width: 320px; }
.modal h3 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--text); }
.modal-field { margin-bottom: 1rem; }
.modal-field label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.modal-input-group { display: flex; align-items: center; gap: 0.5rem; }
.modal-input-group button { width: 40px; height: 40px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 8px; font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-input-group button:hover { background: var(--theme-lightest); }
.modal-input-group input, .modal-input-group select { flex: 1; height: 40px; border: 1px solid var(--border); border-radius: 8px; padding: 0 1rem; font-size: 1rem; text-align: center; }
.modal-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.modal-actions button { flex: 1; padding: 0.75rem; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; }
.btn-cancel { background: var(--card-bg); border: 1px solid var(--border); color: var(--text); }
.btn-save { background: var(--theme); border: none; color: white; }

/* Empty State */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }

/* Utilities */
.hidden { display: none !important; }