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

:root, [data-theme="default"] { 
    --color-primary: #3498db; --color-primary-hover: #2980b9; 
    --bg-main: #f0f9ff; --bg-card: #ffffff; --bg-soft: #e0f2fe; --border-soft: #bae6fd;
}
[data-theme="rose"] { 
    --color-primary: #e11d48; --color-primary-hover: #be123c; 
    --bg-main: #fff1f2; --bg-card: #ffffff; --bg-soft: #ffe4e6; --border-soft: #fecdd3;
}
[data-theme="amethyst"] { 
    --color-primary: #8b5cf6; --color-primary-hover: #7c3aed; 
    --bg-main: #f5f3ff; --bg-card: #ffffff; --bg-soft: #ede9fe; --border-soft: #ddd6fe;
}
[data-theme="emerald"] { 
    --color-primary: #10b981; --color-primary-hover: #059669; 
    --bg-main: #ecfdf5; --bg-card: #ffffff; --bg-soft: #d1fae5; --border-soft: #a7f3d0;
}
[data-theme="amber"] { 
    --color-primary: #f59e0b; --color-primary-hover: #d97706; 
    --bg-main: #fffbeb; --bg-card: #ffffff; --bg-soft: #fef3c7; --border-soft: #fde68a;
}

.font-serif { font-family: 'Cormorant Garamond', serif; }
body { background-color: var(--bg-main); color: #1c1e21; font-family: 'Segoe UI', sans-serif; transition: background-color 0.3s ease;}

/* Mobile: prevent iOS text size inflation, ensure comfortable tap targets */
* { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, [role="button"] { touch-action: manipulation; }
input, select, textarea { font-size: 16px; } /* prevents iOS zoom on focus */

#map { width: 100%; height: 300px; }

.prayer-card { background: var(--bg-card); border-radius: 20px; padding: 18px; margin-bottom: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); border: 1px solid var(--border-soft); transition: transform 0.2s ease, border-color 0.3s ease; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; font-size: 0.95rem; color: #65676b; }
.country-badge { display: flex; align-items: center; font-weight: 700; color: #4b5563; font-size: 0.85rem;}
.flag-icon { width: 20px; height: auto; margin-right: 6px; border-radius: 2px; }

.request-content { margin-bottom: 16px; display: flex; flex-direction: column; }
.cat-row { display: flex; align-items: center; }
.category-icon { font-size: 2rem; margin-right: 12px; flex-shrink: 0; width: 35px; text-align: center;}
.category-name { font-size: 1.2rem; font-weight: 700; color: #050505; }
.subcategory-name { font-size: 1rem; color: var(--color-primary); font-weight: 600; margin-left: 47px; margin-top: -2px; transition: color 0.3s ease;}

.footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--border-soft); transition: border-color 0.3s ease;}
.count { color: #27ae60; font-weight: 600; font-size: 0.85rem; }

.action-btn { background-color: var(--color-primary); color: white; border: none; padding: 10px 24px; border-radius: 40px; cursor: pointer; font-weight: bold; font-size: 0.85rem; transition: all 0.2s; }
.action-btn:hover { background-color: var(--color-primary-hover); transform: scale(1.02); }
.action-btn:disabled { background-color: #bcc0c4; cursor: not-allowed; }
.fav-btn { font-size: 1.2rem; cursor: pointer; transition: all 0.2s; background: none; border: none; padding: 5px; }
.fav-btn:hover { transform: scale(1.1); }

.tool-btn { display: flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 8px 14px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #64748b; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: border-color 0.3s ease;}
#filterDrawer { transition: all 0.3s ease-in-out; max-height: 0; overflow: hidden; opacity: 0; }
#filterDrawer.open { max-height: 300px; opacity: 1; margin-bottom: 24px; }
#sessions-filter-drawer { transition: all 0.3s ease-in-out; max-height: 0; overflow: hidden; opacity: 0; }
#sessions-filter-drawer.open { max-height: 200px; opacity: 1; margin-bottom: 24px; }
.filter-input { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 14px; font-size: 12px; outline: none; width: 100%; transition: border-color 0.3s ease;}

.avatar-main { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer; }
.avatar-grid-item { width: 60px; height: 60px; border-radius: 15px; cursor: pointer; border: 2px solid transparent; object-fit: cover;}

#toast-container { position: fixed; bottom: 20px; left: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast { background: #34495e; color: white; padding: 12px 20px; border-radius: 12px; font-size: 0.85rem; font-weight: 500; box-shadow: 0 10px 25px rgba(0,0,0,0.1); transform: translateX(-150%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center;}
.toast.show { transform: translateX(0); }

.mini-toggle { background: var(--bg-soft); padding: 2px; border-radius: 20px; display: inline-flex; border: 1px solid var(--border-soft); box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); margin-top: 2px; transition: all 0.3s ease;}
.mini-btn { padding: 3px 10px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 20px; transition: all 0.2s ease-in-out; cursor: pointer; color: #64748b; }
.mini-btn.active { background: var(--bg-card); color: var(--color-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.theme-circle { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: transform 0.2s; border: 3px solid transparent; }
.theme-circle:hover { transform: scale(1.1); }
.theme-circle.active { border-color: #1e293b; }

.feedback-chip { padding: 8px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; border: 1px solid var(--border-soft); cursor: pointer; transition: all 0.2s; background: var(--bg-card); color: #64748b; }
.feedback-chip.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-hover:hover { background-color: var(--color-primary-hover) !important; }