/* Estilos aprimorados para o Porta Voz de Deus - v3.1 */

/* Global Form Styling */
.form-container {
    background-color: var(--light-text, #ffffff);
    padding: 2rem;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,0.12));
    max-width: 500px; /* Default max-width for standalone forms */
    margin: 2rem auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-family: var(--font-primary, 'Montserrat', sans-serif);
    font-weight: 600;
    color: var(--primary-color, #1e3a8a);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-control, /* Standard class for form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-secondary, 'Roboto', sans-serif);
    font-size: 1rem;
    color: var(--text-color, #333333);
    background-color: var(--light-bg, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.1)) inset; /* Subtle inner shadow */
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color, #1e3a8a);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 30, 58, 138), 0.25); /* Using RGB for alpha, assuming --primary-color-rgb is defined or replace with actual RGB */
    /* Fallback if --primary-color-rgb is not set */
    /* box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.25); */
}
/* Ensure :root has --primary-color-rgb: 30, 58, 138; for the above to work ideally or use a fixed color */

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

select.form-control {
    appearance: none; /* Remove default system appearance */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem; /* Make space for arrow */
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.form-check-input {
    margin-right: 0.5rem;
    width: auto; /* Override full width for checkboxes/radios */
    box-shadow: none;
}

.form-check-label {
    font-family: var(--font-secondary, 'Roboto', sans-serif);
    color: var(--text-color, #333333);
    margin-bottom: 0; /* Reset label margin for this context */
}

.form-text { /* For help text below inputs */
    font-size: 0.875rem;
    color: #6c757d; /* Bootstrap muted color */
    margin-top: 0.25rem;
}

/* Form specific button styling, if needed beyond .btn */
.form-container .btn {
    width: 100%; /* Make buttons in forms full-width */
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
}

/* Form Titles */
.form-title {
    font-size: 1.8rem;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 2rem;
}

/* Links within forms (e.g., "Forgot password?") */
.form-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* Alert messages within forms */
.form-container .alert {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Estilos globais para melhorar o layout do site */


/* Chat Page Specific Styling */
.chat-container {
    /* .chat-container already has global styles for max-width and padding */
    /* Add any chat-container specific overrides here if needed */
}

.chat-header {
    text-align: center;
    margin-bottom: 2rem;
}

.chat-header h1 {
    font-size: 2.2rem; /* Consistent with .form-title or .auth-box h1 */
    margin-bottom: 0.5rem;
}

.chat-header p {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.chat-options {
    background-color: var(--light-text);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 1.5rem; /* Space between form groups */
    align-items: flex-end; /* Align items to the bottom if they have different heights */
}

.chat-options .form-group {
    margin-bottom: 0; /* Reset margin as gap is used on parent */
    flex: 1 1 200px; /* Allow items to grow and shrink, with a base width */
}

.chat-options .form-group label { /* Already styled globally */
    /* Specific overrides for chat options if needed */
}

.chat-options .form-control { /* select element */
    /* Global .form-control styles apply */
}

.chat-options .form-check { /* For anonymous and mute checkboxes */
    /* Global .form-check styles apply */
    /* You might want to adjust alignment or spacing specifically for chat options */
    padding-top: 0.5rem; /* Example: align better if next to select with taller label */
}


/* Chat Input Area - This is the new wrapper for textarea and buttons */
.chat-form {
    width: 100%; /* Override previous 75% width */
    margin-top: 1.5rem;
}

.chat-input-area {
    display: flex;
    align-items: flex-end; /* Align items to bottom: textarea, mic, send */
    gap: 0.75rem; /* Space between textarea and buttons */
    background-color: var(--light-text);
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.chat-input-textarea { /* Specific class for chat textarea if needed */
    flex-grow: 1; /* Textarea takes most space */
    min-height: 50px; /* Adjust initial height */
    height: auto; /* Allow it to grow based on rows or content */
    max-height: 150px; /* Prevent excessive growth */
    /* Global .form-control styles apply for border, padding, focus etc. */
    /* Resetting some chat-enhancements.css !important styles if possible */
    padding: 0.75rem 1rem !important; /* Keep padding if it's better */
    border-radius: var(--radius-md) !important; /* Keep consistent radius */
    margin-bottom: 0 !important; /* Remove margin-bottom from old .chat-input */
    box-shadow: none !important; /* Remove inner shadow if global style adds it, or match global */
}
.chat-input-textarea:focus {
    /* Focus styles from global .form-control apply */
}


.chat-input-area .btn-icon { /* For mic and send buttons */
    padding: 0.65rem; /* Make icon buttons a bit smaller/squarer */
    font-size: 1.1rem; /* Adjust icon size */
    min-width: auto; /* Allow button to be as small as its content + padding */
    height: 48px; /* Match typical input height or adjust as needed */
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Ensure icon is centered if it's text-based */
}
.chat-input-area .btn-icon i {
    line-height: 1; /* For FontAwesome icons */
}


/* Styling for the main chat form's submit button if it was outside input-area */
/* .chat-form > .btn (if there was a main submit button outside the area) */
/* Already styled by global .btn and .form-container .btn potentially */

/* Stop Audio Button */
#stop-audio-button {
    /* Global .btn .btn-warning styles should apply */
    /* Add any specific positioning or sizing if needed */
    display: flex; /* To center icon and text if it has both */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-left: auto; /* Example: if you want to push it to the right */
    margin-right: auto; /* Example: if you want to center it */
}
#stop-audio-button i {
    font-size: 1.1em; /* Slightly larger icon */
}

.chat-messages {
  background-color: var(--light-text); /* Default: #ffffff */
  border-radius: var(--radius-md);    /* Default: 8px */
  box-shadow: var(--shadow-md);       /* Default: 0 4px 8px rgba(0,0,0,0.12) - slightly increased from shadow-sm */
  padding: 1.5rem;
  height: 400px; /* Or a responsive height, e.g., calc(100vh - some_value) or min/max-height */
  overflow-y: auto;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-color, #e0e0e0); /* Added border */
}

/* Chat Message Structure */
.message-sender {
  display: block; /* Makes the sender appear on its own line */
  font-weight: 600; /* Bold text for sender */
  font-size: 0.9em; /* Slightly smaller than the message text */
  margin-bottom: 0.3em; /* Small space between sender and message text */
  color: inherit; /* Inherits color from .message-bot or .message-user by default */
}

/* Optional: Specific sender colors if desired */
.message-user .message-sender {
  /* color: var(--user-sender-color, #555); Example: Define --user-sender-color or use direct value */
  /* For now, we'll let it inherit from .message-user which is dark text on light gray bg */
}

.message-bot .message-sender {
  /* color: var(--bot-sender-color, #eee); Example: Define --bot-sender-color or use direct value */
  /* For now, we'll let it inherit from .message-bot which is light text on primary color bg */
  /* If the inherited color (light text) is too hard to read for a smaller font, adjust here */
  /* For example, make it slightly less bright than the main message text, or add a subtle text-shadow */
}

.message-text {
  display: block; /* Ensures it takes its own line if sender is also block */
  line-height: 1.5; /* Standard line height for readability */
  word-wrap: break-word; /* Break long words to prevent overflow */
  white-space: pre-wrap; /* Preserve whitespace and newlines from the message */
}


/* Authentication Form Styling */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 160px); /* Adjust 160px based on header/footer height */
    padding: 2rem 1rem;
    background-color: var(--light-bg, #f8f9fa); /* Fallback if CSS variables not loaded */
}

.auth-box {
    background-color: var(--light-text, #ffffff);
    padding: 2.5rem 2rem;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 8px 16px rgba(0,0,0,0.15));
    width: 100%;
    max-width: 450px; /* Max width for login/register boxes */
}

.auth-box h1 { /* Replaces .form-title for auth pages */
    font-size: 2rem; /* Larger title for auth pages */
    color: var(--primary-color, #1e3a8a);
    text-align: center;
    margin-bottom: 1rem;
}

.auth-box p {
    text-align: center;
    margin-bottom: 2rem;
    color: #666;
}

.auth-form .form-group {
    margin-bottom: 1.25rem; /* Slightly reduced margin for auth forms */
}

.auth-form .btn-block { /* Ensure this class makes button full width if used */
    width: 100%;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
}

.auth-form .form-check {
    margin-bottom: 1.25rem;
    display: flex; /* Align checkbox and label nicely */
    align-items: center;
}

.auth-form .form-check-input {
    margin-right: 0.5rem;
    height: 1.1em; /* Adjust size if needed */
    width: 1.1em;
}
.auth-form .form-check-label {
    font-size: 0.9rem;
    color: var(--text-color, #333);
    margin-bottom: 0; /* Important for alignment */
}


.auth-form a {
    font-size: 0.9rem;
    color: var(--primary-color);
    text-decoration: none;
}
.auth-form a:hover {
    text-decoration: underline;
    color: var(--secondary-color);
}

.auth-box .form-group a { /* Specifically for "Forgot password?" type links */
    display: block;
    text-align: right; /* Align to the right */
    font-size: 0.85rem;
}


.google-login-container {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

/* The g_id_signin div will be styled by Google, but we can manage its container */
.google-login-container .g_id_signin {
    width: 100% !important; /* Try to make it full width */
}
.google-login-container .g_id_signin > div {
    margin: 0 auto !important; /* Center the Google button if it doesn't take full width */
}


.auth-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.auth-footer p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
}

.auth-footer a {
    color: var(--primary-color, #1e3a8a);
    font-weight: 600;
}

.auth-footer a:hover {
    color: var(--secondary-color, #c2a136);
    text-decoration: underline;
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Styles from button-fix.css */
/* Correções para os botões da seção CTA */
.cta-box .btn {
  position: relative;
  z-index: 10; /* Garantir que os botões fiquem acima de qualquer overlay */
  margin: 0.5rem;
  min-width: 200px;
}

.cta-box .btn-primary,
.cta-box .btn-outline {
  pointer-events: auto !important; /* Garantir que eventos de clique sejam capturados */
}

/* Garantir que o container dos botões não tenha problemas */
.cta-box .mt-3 {
  position: relative;
  z-index: 5;
}

/* Remover qualquer overlay que possa estar bloqueando os botões */
.cta-box::after {
  display: none !important;
}

/* Styles from chat-enhancements.css */
/* Estilos para o campo de texto da conversa com Deus */
.chat-input {
  min-height: 120px !important;
  width: 100% !important;
  padding: 15px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  font-family: var(--font-primary) !important;
  font-size: 1rem !important;
  resize: vertical !important;
  transition: border-color 0.3s ease !important;
  margin-bottom: 15px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

.chat-input:focus {
  border-color: var(--primary-color) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2) !important;
}

.chat-form {
  display: flex;
  flex-direction: column;
  width: 75%;
}

.chat-form .btn {
  /* align-self: flex-end; */ /* Original comment */
  align-self: flex-end; /* Corrected from 'right' */
  min-width: 120px;
}

/* Aplicar margem e padding consistentes em todas as páginas */
.bible-container, /* Consider removing if not used */
.chat-container,
.profile-container,
.auth-container,
.content-container,
.main-content,
.page-content,
.bible-page-container, /* Existing */
.testimonials-page-container,
.prayer-requests-page-container,
.my-prayer-requests-page-container,
.my-testimonials-page-container,
.rankings-page-container,
.pilgrimages-page-container,
.donate-page-container,
.static-page-container,
.bible-chapter-container { /* Newly added */
    max-width: 1200px;
    margin: 2rem auto; /* Added default vertical margin */
    padding: 0 1.5rem; /* Standardized padding (px-3 equivalent) */
}

/* Grid para a página da Bíblia */
.bible-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Default responsive grid */
    gap: 20px;
    margin: 20px 0;
}

/* These more specific .bible-books rules with !important are later in the file and will override the one above.
   The request was to keep the 5-column desktop layout from those specific rules.
   So the change above is more of a fallback if those specific rules were removed. */

.bible-book {
    background-color: var(--light-bg); /* Use theme variable */
    border-radius: var(--radius-md); /* Use theme variable */
    padding: 1.5rem; /* Standardized padding */
    text-decoration: none; /* Removed !important */
    color: var(--text-color); /* Use theme variable, removed !important */
    transition: var(--transition); /* Use theme variable, removed !important */
    box-shadow: var(--shadow-sm); /* Use theme variable, removed !important */
    border: 1px solid var(--border-color); /* Added a border for card consistency */
}

.bible-book:hover {
    transform: translateY(-5px); /* Consistent with .card:hover */
    box-shadow: var(--shadow-lg); /* Consistent with .card:hover */
    border-color: var(--secondary-color); /* Consistent with .card:hover */
}

.bible-book h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--primary-color); /* Use theme color */
}

.bible-book p {
    margin: 0;
    color: #666;
    font-size: 0.9em;
}

/* Navegação da Bíblia */
.bible-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.bible-search {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

/* Responsividade */
@media (max-width: 768px) {
    .bible-books {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .bible-navigation {
        flex-direction: column;
        align-items: stretch;
    }

    .bible-search {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }
}

/* Rankings Page Styling */
.rankings-page-container .page-main-card { /* Assuming .page-main-card is used as the main wrapper */
    /* Base .card styles apply. Ensure padding is sufficient for content or override here. */
    /* e.g., padding: 2rem; if not already default for .card */
}
.rankings-page-container .page-main-card .card-header { /* Ensure header padding is consistent */
    padding: 1rem 1.5rem; /* Or match global .card-header if defined */
    background-color: var(--light-bg); /* Consistent header background */
    border-bottom: 1px solid var(--border-color);
}
.rankings-page-container .page-main-card .card-header h1.h2 { /* Title within card header */
    font-size: 1.75rem; 
    color: var(--primary-color);
    font-weight: 600; 
    margin-bottom: 0; 
}

/* Tab Styling for Rankings - Refined */
.rankings-page-container .nav-tabs {
    border-bottom: 1px solid var(--border-color);
    /* Nav tabs are directly in card-body or a similar container, not in card-header for this structure */
    /* margin-bottom: 0; /* To connect with tab-content card if structure changes */
}

.rankings-page-container .nav-tabs .nav-item {
    margin-bottom: -1px; /* Standard for Bootstrap tabs to connect border */
}

.rankings-page-container .nav-tabs .nav-link {
    border: 1px solid transparent; 
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    padding: 0.9rem 1.75rem; 
    color: var(--text-muted, #5a6570);
    font-weight: 500;
    font-family: var(--font-primary);
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    background-color: var(--light-bg-subtle, #f8f9fa); 
    margin-right: 0.25rem;
}
.rankings-page-container .nav-tabs .nav-link i {
    margin-right: 0.5rem; 
    opacity: 0.8;
}

.rankings-page-container .nav-tabs .nav-link:hover,
.rankings-page-container .nav-tabs .nav-link:focus {
    border-color: var(--border-color-light, #e9ecef) var(--border-color-light, #e9ecef) var(--border-color);
    color: var(--primary-color);
    background-color: var(--light-bg, #f0f2f5); 
    isolation: isolate;
}

.rankings-page-container .nav-tabs .nav-link.active,
.rankings-page-container .nav-tabs .nav-item.show .nav-link {
    color: var(--primary-color);
    background-color: var(--light-text); /* Match content card background */
    border-color: var(--border-color) var(--border-color) var(--light-text); 
    font-weight: 600;
}
.rankings-page-container .nav-tabs .nav-link.active i {
    opacity: 1;
}

/* Tab content area */
.rankings-page-container .tab-content {
    padding: 2rem; /* Main padding for tab content */
    background-color: var(--light-text); 
    /* border: 1px solid var(--border-color); /* Only if not part of a card-body */
    /* border-top: none; */
    /* border-radius for content if it's a standalone box */
    /* box-shadow: var(--shadow-sm); */
}

.rankings-page-container .tab-pane-title { /* h2 (was h4) inside tab panes */
    font-size: 1.6rem; 
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color-light, #e9ecef);
}

/* Table Styling for Rankings - Refined */
.rankings-page-container .table-responsive {
    margin-top: 1rem;
    border: 1px solid var(--border-color-light, #e0e0e0); 
    border-radius: var(--radius-md); /* Rounded corners for the table container */
    overflow: hidden; 
}
.rankings-page-container .table {
    font-size: 0.9rem; 
    margin-bottom: 0; 
}

.rankings-page-container .table thead th {
    background-color: var(--light-bg-subtle, #f8f9fa);
    color: var(--primary-color);
    font-weight: 600; 
    padding: 0.9rem 1rem; 
    vertical-align: middle;
    border-bottom: 2px solid var(--primary-color); 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}
.rankings-page-container .table tbody tr th, 
.rankings-page-container .table tbody tr td {
    padding: 0.9rem 1rem; 
    vertical-align: middle;
    color: var(--text-color-secondary, #454d55); 
    border-top: 1px solid var(--border-color-light, #e9ecef); 
}
.rankings-page-container .table tbody tr:hover td,
.rankings-page-container .table tbody tr:hover th {
    background-color: var(--light-bg-hover, #f0f2f5); 
}

.rankings-page-container .table tbody tr th { /* Position numbers */
    font-weight: 700; 
    color: var(--primary-color);
}
.rankings-page-container .table tbody tr td:nth-child(2) { /* Username column */
    font-weight: 500; 
}
.rankings-page-container .table tbody tr td:last-child { /* Points/Days column */
    font-weight: 600;
    text-align: right;
}

/* Highlight for current user's row - Refined */
.rankings-page-container .table tbody tr.table-primary th,
.rankings-page-container .table tbody tr.table-primary td {
    background-color: rgba(var(--primary-color-rgb, 30, 58, 138), 0.07) !important; 
    color: var(--primary-color-dark, #102a68) !important; 
    font-weight: 700; 
}


/* Empty state for rankings tab - Refined */
.rankings-page-container .empty-state.card {
    margin-top: 1.5rem; 
    border: 1px dashed var(--border-color); 
    box-shadow: none; 
    background-color: var(--light-bg-subtle, #f8f9fa);
}
.rankings-page-container .empty-state .fa-medal, 
.rankings-page-container .empty-state .fa-list-ol {
    font-size: 3.5rem; 
    color: var(--primary-color-light, #a0b4d4);
    margin-bottom: 1rem;
}
.rankings-page-container .empty-state h2 {
    font-size: 1.4rem; 
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}
.rankings-page-container .empty-state p {
    font-size: 0.95rem;
    color: var(--text-muted, #5a6570);
}

/* Rankings Page Styling */
.rankings-page-container .page-main-card > .card-body {
    padding: 0; /* Remove padding if tabs and tab-content will manage their own */
}
.rankings-page-container .page-main-card .card-header { /* Ensure header padding is consistent */
    padding: 1rem 1.5rem; /* Or match global .card-header if defined */
}
.rankings-page-container .page-main-card .card-header h1.h2 {
    font-size: 1.75rem; 
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0; /* Remove default h1/h2 margin if inside card-header */
}

/* Tab Styling for Rankings - similar to profile tabs */
.rankings-page-container .nav-tabs {
    border-bottom: 1px solid var(--border-color);
    /* margin-bottom: 1.5rem; /* Removed as .tab-content now handles its own top padding via main card body */
    padding: 1rem 1.5rem 0 1.5rem; /* Add padding to the tabs container itself */
    background-color: var(--light-text); /* Give tabs area a bg if card-body padding is removed */
    border-top-left-radius: var(--radius-md); /* If this is the first element in card-body with no padding */
    border-top-right-radius: var(--radius-md);
}

.rankings-page-container .nav-tabs .nav-item {
    margin-bottom: -1px; /* Align nav-link border with tab content border */
}

.rankings-page-container .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    padding: 0.85rem 1.5rem;
    color: var(--text-muted, #6c757d);
    font-weight: 500;
    font-family: var(--font-primary);
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.rankings-page-container .nav-tabs .nav-link i {
    margin-right: 0.6rem;
}

.rankings-page-container .nav-tabs .nav-link:hover,
.rankings-page-container .nav-tabs .nav-link:focus {
    border-color: var(--border-color-light, #eee) var(--border-color-light, #eee) var(--border-color);
    color: var(--primary-color);
    isolation: isolate; /* Keep focus border above content */
}

.rankings-page-container .nav-tabs .nav-link.active,
.rankings-page-container .nav-tabs .nav-item.show .nav-link { /* .show for dropdowns if any */
    color: var(--primary-color);
    background-color: var(--light-text);
    border-color: var(--border-color) var(--border-color) var(--light-text); /* Active tab "lifts up" */
    font-weight: 600;
}

.rankings-page-container .tab-content {
    /* .mt-3 class from HTML provides top margin, this might be removed if padding is handled differently */
    padding: 2rem; /* This is the main content padding now */
    background-color: var(--light-text); /* Ensure background for content area */
    border: 1px solid var(--border-color);
    border-top: none; /* As tabs border-bottom acts as separator */
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.rankings-page-container .tab-pane-title { /* h2 inside tab panes */
    font-size: 1.5rem; /* var(--h3-font-size) */
    color: var(--primary-color);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-light, #eee);
}

/* Table Styling for Rankings */
.rankings-page-container .table-responsive {
    margin-top: 1rem;
}
.rankings-page-container .table {
    font-size: 0.95rem; /* Slightly larger than activity table for readability */
    border: 1px solid var(--border-color-light, #dee2e6); /* Add subtle border to table */
}
.rankings-page-container .table thead th {
    background-color: var(--light-bg-subtle, #f8f9fa);
    color: var(--primary-color);
    font-weight: 600;
    padding: 1rem 0.75rem;
    vertical-align: middle;
    border-bottom-width: 2px; /* Thicker bottom border for header */
    border-color: var(--border-color, #ced4da);
}
.rankings-page-container .table tbody tr th, /* Position column */
.rankings-page-container .table tbody tr td {
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
    color: var(--text-color-secondary, #555);
}
.rankings-page-container .table tbody tr th { /* Position numbers */
    font-weight: 600;
    color: var(--primary-color);
}

/* Highlight for current user's row */
.rankings-page-container .table tbody tr.table-primary th,
.rankings-page-container .table tbody tr.table-primary td {
    background-color: rgba(var(--primary-color-rgb, 30, 58, 138), 0.1); /* Lighter primary color */
    color: var(--primary-color); /* Ensure text is readable */
    font-weight: 600; /* Highlight user's row */
}
.rankings-page-container .table tbody tr.table-primary:hover th,
.rankings-page-container .table tbody tr.table-primary:hover td {
    background-color: rgba(var(--primary-color-rgb, 30, 58, 138), 0.15); /* Slightly darker on hover */
}


/* Empty state for rankings tab */
.rankings-page-container .empty-state.card {
    /* Global .empty-state and .card styles apply */
    margin-top: 1.5rem; /* Space above empty state */
}
.rankings-page-container .empty-state .fa-medal, /* New icon for rankings */
.rankings-page-container .empty-state .fa-list-ol {
    color: var(--primary-color-light, #a0b4d4);
}
.rankings-page-container .empty-state h2 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.rankings-page-container .empty-state p {
    font-size: 1rem;
    color: var(--text-color-secondary, #555);
}



/* Reset e Variáveis */
:root {
  --primary-color: #1e3a8a;
  --secondary-color: #c2a136;
  --accent-color: #9b2c2c;
  --text-color: #333333;
  --light-text: #ffffff;
  --dark-bg: #1a1a1a;
  --light-bg: #f8f9fa;
  --gray-bg: #f0f0f0;
  --border-color: #e0e0e0;
  --success-color: #28a745;
  --error-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-secondary);
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--light-bg);
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--secondary-color);
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}


/* Botões */
.btn {
  display: inline-block;
  opacity: 1;
  visibility: visible;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm);
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--light-text);
}

.btn-primary:hover {
  background-color: #152c6a;
  color: var(--light-text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--dark-bg);
}

.btn-secondary:hover {
  background-color: #a88b2e;
  color: var(--dark-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: #ffffff;
}

.btn-outline:hover {
  background-color: var(--primary-color);
  color: var(--light-text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Header */
header {
  background-color: var(--light-text);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 1rem 0;
  border-bottom: 3px solid var(--primary-color);
}

header .container {
  display: block;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
}

.logo i {
  margin-right: 0.5rem;
  font-size: 1.8rem;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--primary-color);
  margin: 5px 0;
  transition: var(--transition);
}

.main-menu {
  display: flex;
  list-style: none;
}

.main-menu li {
  position: relative;
  margin-left: 1.5rem;
}

.main-menu a {
  font-family: var(--font-primary);
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
}

.main-menu a.active {
  color: var(--accent-color);
}

.main-menu a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent-color);
}

.main-menu a:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--secondary-color);
}

/* Hero Section - Aprimorada */
.home-hero {
  background-color: var(--primary-color);
  color: var(--light-text);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.home-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(30, 58, 138, 0.7) 100%);
  z-index: 1;
}

.home-hero .container {
  position: relative;
  z-index: 2;
}

.home-hero h1 {
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
  color: var(--light-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.home-hero p {
  font-size: 1.3rem;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  color: var(--light-text);
  opacity: 0.9;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.hero-buttons .btn {
  padding: 0.9rem 2rem;
  font-size: 1rem;
  min-width: 180px;
}

/* Features Section - Cards Aprimorados */
.py-4 {
  padding: 4rem 0;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  color: var(--primary-color);
}

.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--secondary-color);
}

.section-title p {
  font-size: 1.1rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto;
}

.welcome-message {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3.5rem;
}

.welcome-message h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.welcome-message p {
  font-size: 1.2rem;
  color: #555;
}

.resource-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  margin: 3rem 0;
}

.resource-card {
  background-color: var(--light-text);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border-color);
}

.resource-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color);
}

.resource-card-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
}

.card-icon {
  width: 80px;
  height: 80px;
  background-color: rgba(30, 58, 138, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: var(--transition);
}

.resource-card:hover .card-icon {
  background-color: var(--primary-color);
}

.card-icon i {
  font-size: 2rem;
  color: var(--primary-color);
  transition: var(--transition);
}

.resource-card:hover .card-icon i {
  color: var(--light-text);
}

.resource-card-title {
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  color: var(--primary-color);
}

.resource-card-description {
  margin-bottom: 2rem;
  color: #555;
  flex-grow: 1;
  font-size: 1.05rem;
  line-height: 1.7;
}

.resource-card-link {
  margin-top: auto;
  align-self: center;
  width: 100%;
}

/* Quote Section - Aprimorada */
.quote-section {
  background-color: rgba(30, 58, 138, 0.05);
  padding: 4rem 0;
  text-align: center;
  margin: 5rem 0;
  position: relative;
  border-top: 1px solid rgba(30, 58, 138, 0.1);
  border-bottom: 1px solid rgba(30, 58, 138, 0.1);
}

.quote-section::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 8rem;
  color: rgba(30, 58, 138, 0.1);
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  line-height: 0;
}

.quote-section blockquote {
  font-size: 1.8rem;
  font-style: italic;
  max-width: 800px;
  margin: 0 auto 1.5rem;
  color: var(--primary-color);
  line-height: 1.5;
}

.quote-section cite {
  font-style: normal;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--secondary-color);
  display: block;
  margin-top: 1rem;
}

/* Testimonials Section - Aprimorada */
.card {
  background-color: var(--light-text);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  height: 100%;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--secondary-color);
}

.card .card-icon {
  width: 60px;
  height: 60px;
  background-color: rgba(194, 161, 54, 0.1);
  margin-bottom: 1.5rem;
}

.card .card-icon i {
  color: var(--secondary-color);
}

.card:hover .card-icon {
  background-color: var(--secondary-color);
}

.card:hover .card-icon i {
  color: var(--light-text);
}

.card-description {
  font-style: italic;
  margin-bottom: 1.5rem;
  color: #555;
  flex-grow: 1;
  font-size: 1.05rem;
  line-height: 1.7;
}

.testimonial-author {
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}

.card-title {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  color: var(--primary-color);
}

.text-muted {
  color: #777;
  font-size: 0.9rem;
}

/* Call to Action - Aprimorada */
.cta-box {
  background: linear-gradient(135deg, var(--primary-color) 0%, #2a4cad 100%);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  margin: 4rem auto;
  max-width: 700px;
  color: var(--light-text);
  position: relative;
  overflow: hidden;
}

.cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgNDcuNDRMMTcwIDBsNjI2LjQ4IDk0Ljg5TDExMTAgODcuMTFsMTcwLTM5LjY3VjE0MEgwVjQ3LjQ0eiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NiwgMC4wNSKSIvPjwvc3ZnPg==');
  background-size: cover;
  opacity: 0.1;
  pointer-events: none; 
  z-index: 0; 
}

.cta-box h3 {
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
  color: var(--light-text);
  position: relative;
  z-index: 2; /* Ensure content is above ::before */
}

.cta-box p {
  margin-bottom: 2rem;
  font-size: 1.1rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2; /* Ensure content is above ::before */
}

/* Ensure the button container also has a higher z-index */
.cta-box .mt-3 {
  position: relative; /* Already has z-index: 5 from button-fix.css, just ensure position:relative */
  z-index: 2; /* Explicitly set to be consistent and above ::before */
}

.cta-box .btn-primary {
  background-color: var(--light-text);
  color: var(--primary-color);
  font-weight: 600;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
}

.cta-box .btn-primary:hover {
  background-color: var(--secondary-color);
  color: var(--light-text);
}

.cta-box .btn-outline {
  border-color: var(--light-text);
  color: var(--light-text);
}

.cta-box .btn-outline:hover {
  background-color: var(--light-text);
  color: var(--primary-color);
}

/* Footer - Aprimorado */
footer {
  background-color: var(--light-text);
  color: var(--text-color);
  padding: 4rem 0 1.5rem;
  border-top: 3px solid var(--primary-color);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-column h3 {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.8rem;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--secondary-color);
}

.footer-column ul {
  list-style: none;
}

.footer-column li {
  margin-bottom: 0.9rem;
}

.footer-column a {
  color: var(--text-color);
  font-size: 0.95rem;
  transition: var(--transition);
  display: inline-block;
}

.footer-column a:hover {
  color: var(--primary-color);
  transform: translateX(5px);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: #666;
}

/* AdSense Container - Aprimorado */
.ad-container {
  margin: 2.5rem auto;
  padding: 1rem;
  background-color: var(--light-bg);
  border-radius: var(--radius-md);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-color);
}

.ad-label {
  display: inline-block;
  font-size: 0.75rem;
  color: #999;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Responsive - Aprimorado */
@media (max-width: 992px) {
  .container {
    padding: 0 2rem;
  }
  
  .home-hero h1 {
    font-size: 2.4rem;
  }
  
  .section-title h2 {
    font-size: 2rem;
  }
  
  .quote-section blockquote {
    font-size: 1.6rem;
  }
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  
  .main-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--light-text);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    padding: 1rem 0;
    display: none;
    z-index: 1000;
  }
  
  .main-menu.active {
    display: flex;
  }
  
  .main-menu li {
    margin: 0;
  }
  
  .main-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
  }
  
  .home-hero h1 {
    font-size: 2rem;
  }
  
  .home-hero p {
    font-size: 1rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .hero-buttons .btn {
    width: 100%;
    max-width: 300px;
  }
  
  .resource-cards {
    gap: 2rem;
  }
  
  .cta-box {
    padding: 2.5rem 1.5rem;
  }
  
  .cta-box h3 {
    font-size: 1.6rem;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 1.5rem;
  }
  
  .home-hero {
    padding: 4rem 0;
  }
  
  .home-hero h1 {
    font-size: 1.8rem;
  }
  
  .section-title h2 {
    font-size: 1.8rem;
  }
  
  .welcome-message h2 {
    font-size: 1.7rem;
  }
  
  .welcome-message p {
    font-size: 1.05rem;
  }
  
  .resource-card-content {
    padding: 1.5rem;
  }
  
  .quote-section {
    padding: 3rem 0;
  }
  
  .quote-section blockquote {
    font-size: 1.4rem;
  }
  
  .footer-content {
    gap: 2rem;
  }
}

/* Animações */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.resource-card {
  animation: fadeIn 0.6s ease-out forwards;
}

.resource-card:nth-child(2) {
  animation-delay: 0.2s;
}

.resource-card:nth-child(3) {
  animation-delay: 0.4s;
}

/* Utilities - Aprimorado */
.text-center {
  text-align: center;
}

.mt-1 {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1.5rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mb-1 {
  margin-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.mb-3 {
  margin-bottom: 1.5rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.py-1 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-3 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.px-1 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-3 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-4 {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* CSS específico para garantir que a listagem da Bíblia apareça em múltiplas colunas */
.bible-books {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* Força exatamente 3 colunas */
    gap: 20px !important;
    margin: 20px 0 !important;
}

@media (max-width: 768px) {
    .bible-books {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colunas em telas menores */
    }
}

@media (max-width: 480px) {
    .bible-books {
        grid-template-columns: 1fr !important; /* 1 coluna em telas muito pequenas */
    }
}

.bible-chapters-rows {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important; /* Força exatamente 3 colunas */
    gap: 20px !important;
    margin: 20px 0 !important;
}

@media (max-width: 768px) {
    .bible-chapters-rows {
        grid-template-columns: repeat(5, 1fr) !important; /* 2 colunas em telas menores */
    }
}

@media (max-width: 480px) {
    .bible-chapters-rows {
        grid-template-columns: 2fr !important; /* 1 coluna em telas muito pequenas */
    }
}

/* CSS específico para garantir que a listagem dos capitulos da Bíblia apareça em múltiplas colunas */
.bible-cards {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important; /* Força exatamente 3 colunas */
    gap: 20px !important;
    margin: 20px 0 !important;
}

@media (max-width: 768px) {
    .bible-cards {
        grid-template-columns: repeat(5, 1fr) !important; /* 2 colunas em telas menores */
    }
}

@media (max-width: 480px) {
    .bible-cards {
        grid-template-columns: 3fr !important; /* 1 coluna em telas muito pequenas */
    }
}

/* Estilos para os itens da Bíblia */
/* The .bible-book styles above are preferred. These more specific ones with !important
   are problematic. We'll try to make the above styles sufficient.
   If specific overrides are truly needed for a.bible-book elements vs general .card,
   they should be carefully considered. For now, aiming to rely on the less specific rules.
   The display: block !important might be needed for grid cell filling if <a> tag is used directly.
   The background-color, radius, padding, color, transition, shadow should ideally come from the
   .bible-book rule modified earlier, or from a .card class if applied.
*/
.bible-book {
    /* These are mostly redundant if the earlier .bible-book styles and .card class apply correctly. */
    /* Keeping display: block !important as it's often crucial for <a> link elements in grids/flex. */
    display: block !important; /* Garante que cada item ocupe todo o espaço da célula */
    /* The following !important properties are removed to allow earlier .bible-book and .card styles to take precedence.
       If styling breaks, it indicates issues with specificity or overly strong global styles on <a> tags
       that need to be addressed, rather than re-introducing !important here. */
}

/* Margens globais para todo o site */
body {
    margin: 0 !important;
    padding: 0 !important;
}

.container,
.bible-container,
.chat-container,
.profile-container,
.auth-container,
.content-container,
.main-content,
.page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Styles from button-fix.css */
/* Correções para os botões da seção CTA */
.cta-box .btn {
  /* display, opacity, visibility are inherited from .btn in enhanced-styles.css and should be correct */
  position: relative;
  z-index: 10; /* Garantir que os botões fiquem acima de qualquer overlay */
  margin: 0.5rem;
  min-width: 200px;
}

.cta-box .btn-primary,
.cta-box .btn-outline {
  pointer-events: auto; /* Garantir que eventos de clique sejam capturados */
}

/* Garantir que o container dos botões não tenha problemas */
.cta-box .mt-3 {
  position: relative;
  z-index: 5;
}

/* Remover qualquer overlay que possa estar bloqueando os botões */
.cta-box::after {
  display: none; /* Assuming this targets an ::after element specifically, or it might have been intended for ::before */
}

/* Styles from chat-enhancements.css */
/* Estilos para o campo de texto da conversa com Deus */
.chat-input {
  min-height: 120px;
  width: 100%;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  font-family: var(--font-primary);
  font-size: 1rem;
  resize: vertical;
  transition: border-color 0.3s ease;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.chat-input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
}

.chat-form {
  display: flex;
  flex-direction: column;
  width: 75%;
}

.chat-form .btn {
  /* align-self: flex-end; */ /* Original comment from enhanced-styles.css */
  align-self: flex-end; /* Corrected from 'right' which is invalid */
  min-width: 120px;
}

/* Testimonials Page Styling */
.testimonials-page-container h1 {
    text-align: center;
    margin-bottom: 2rem; /* More space after title */
}

.testimonials-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Consistent gap */
    align-items: center;
    margin-bottom: 2.5rem; /* More space after filters */
    padding: 1rem;
    background-color: var(--light-text);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.testimonials-filter .btn-accent {
    margin-left: auto; /* Pushes "Compartilhar" button to the right */
}

/* Ensure .btn-accent has defined styles if not already present from styles.css */
.btn-accent {
  background-color: var(--accent-color); /* From styles.css */
  color: var(--light-text);
}

.btn-accent:hover {
  background-color: #7e2323; /* Darken accent from styles.css */
  color: var(--light-text);
}


.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem; /* Consistent gap */
}

.testimonial-card { /* Already has .card class for base styles */
    display: flex;
    flex-direction: column;
    height: 100%; /* For consistent height in grid cells */
    position: relative; /* For miracle badge positioning */
}

.testimonial-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Make card body take available space */
}

.testimonial-card .card-title { /* h3 inside .card-body */
    font-size: 1.25rem; 
    margin-bottom: 0.75rem;
}

.miracle-badge {
    position: absolute;
    top: 1rem; 
    right: 1rem; 
    background-color: var(--accent-color);
    color: var(--light-text);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    z-index: 1; /* Ensure it's above other card content */
}

.miracle-badge .fa-star {
    font-size: 0.9em;
}

.testimonial-content {
    margin-bottom: 1rem; 
    flex-grow: 1; /* Allows content to expand, pushing footer down */
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color-secondary, #555); /* Using a secondary text color */
}
.testimonial-content p {
    margin-bottom: 0.5rem;
}

.testimonial-content .read-more {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
}
.testimonial-content .read-more:hover {
    text-decoration: underline;
}

.testimonial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted, #6c757d); /* Using Bootstrap's muted color or a theme var */
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem; 
    margin-top: auto; /* Pushes footer to bottom of card if content is short */
}

.testimonial-author,
.testimonial-date {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* Space between icon and text */
}

/* Empty state enhancements for testimonials specifically if needed */
.testimonials-page-container .empty-state.card {
    /* .empty-state already has good global styles */
    /* .card class provides background, padding, shadow */
    /* We can add more specific styles here if the global .empty-state isn't enough */
}

.testimonials-page-container .empty-state h2 {
    font-size: 1.5rem; /* Adjust size if needed */
    color: var(--primary-color);
    margin-top: 0.5rem; /* Space after icon */
    margin-bottom: 1rem;
}

/* My Testimonials Page Styling */
.my-testimonials-page-container .breadcrumb {
    background-color: transparent; /* Remove default Bootstrap background */
    padding-left: 0;
    font-size: 0.9rem;
}

.my-testimonials-page-container .breadcrumb-item a {
    color: var(--primary-color);
}
.my-testimonials-page-container .breadcrumb-item.active {
    color: var(--text-muted, #6c757d);
}

.page-main-card .card-header h1.h2 {
    font-size: 1.75rem; /* Adjust size as needed */
    color: var(--primary-color);
}

.my-testimonials-list .testimonial-list-item {
    /* Base styles from .card are inherited */
    /* Add specific overrides if needed */
}

.testimonial-list-item .card-title { /* h5 */
    font-size: 1.15rem;
    color: var(--primary-color);
}

.testimonial-list-item .testimonial-content-preview {
    font-size: 0.9rem;
    color: var(--text-color-secondary, #555);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.testimonial-list-item .testimonial-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between badges/text */
    font-size: 0.85rem;
}

.testimonial-list-item .badge {
    padding: 0.4em 0.65em;
    font-size: 0.78em; /* Slightly larger than default for readability */
}
.testimonial-list-item .badge .fa-star {
    margin-right: 0.25rem;
}

.testimonial-list-item .testimonial-actions {
    background-color: var(--light-bg-subtle, #fcfcfd); /* Slightly different footer bg */
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* Space between buttons */
    align-items: center;
}
.testimonial-list-item .testimonial-actions .btn-sm {
    font-size: 0.8rem; /* Ensure consistent sm button size */
    padding: 0.25rem 0.6rem;
}
.testimonial-list-item .testimonial-actions .btn-sm i {
    margin-right: 0.3rem;
}


/* General Badge Styling (if not already sufficiently covered) */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em; /* Default padding */
    font-size: .75em; /* Default font size */
    font-weight: 700;
    line-height: 1;
    color: var(--light-text); /* Default text color for badges */
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--radius-sm);
}

.badge-primary { background-color: var(--primary-color); }
.badge-secondary { background-color: var(--bs-secondary, #6c757d); } /* Using a fallback or define --bs-secondary */
.badge-success { background-color: var(--success-color); }
.badge-danger { background-color: var(--error-color); }
.badge-warning { background-color: var(--warning-color); color: var(--dark-text, #333); } /* Warning often needs dark text */
.badge-info { background-color: var(--info-color); }
/* Ensure --dark-text is defined, e.g., #333333 */


/* My Testimonials Empty State Specifics (if needed beyond global .empty-state) */
.my-testimonials-page-container .empty-state.card {
    /* Global .empty-state and .card styles apply. */
}
.my-testimonials-page-container .empty-state .fa-comment-slash {
    color: var(--primary-color-light, #a0b4d4); /* Softer icon color */
}
.my-testimonials-page-container .empty-state h2 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.my-testimonials-page-container .empty-state p {
    font-size: 1rem;
    color: var(--text-color-secondary, #555);
    margin-bottom: 0.75rem;
}
.my-testimonials-page-container .empty-state .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}
.my-testimonials-page-container .empty-state .btn-lg i {
    margin-right: 0.5rem;
}


/* Profile Page Styling */
.profile-page-container {
    /* General page-container styles already applied (max-width, margin, padding) */
    /* Adding a subtle background for the whole page if different from body */
    /* background-color: var(--gray-bg-light, #f9fafb); /* Example */
}

/* A. Profile Header */
.profile-header {
    display: flex;
    align-items: center;
    gap: 2rem; /* Increased gap for more breathing room */
    padding: 2.5rem; /* Increased padding */
    background-color: var(--light-text);
    border-radius: var(--radius-lg); /* Consistent with cards */
    box-shadow: var(--shadow-lg); /* Slightly more prominent shadow */
    margin-bottom: 2.5rem; /* Increased margin */
    border: 1px solid var(--border-color); /* Subtle border */
}

.profile-avatar {
    flex-shrink: 0;
    width: 120px; /* Slightly larger avatar */
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); /* Gradient background */
    color: var(--light-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem; /* Larger icon */
    border: 4px solid var(--light-text); /* White border around avatar */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Avatar shadow */
}
.profile-avatar i {
    line-height: 1; 
}

.profile-info h1 {
    font-size: 2.25rem; /* Larger name */
    font-weight: 700; /* Bolder name */
    color: var(--primary-color);
    margin-bottom: 0.35rem;
    line-height: 1.2;
}

.profile-info .username {
    font-size: 1.15rem; /* Slightly larger username */
    color: var(--text-muted, #5a6570); /* Standard muted color */
    margin-bottom: 0.5rem; /* More space */
    font-weight: 500;
}
.profile-info .username::before {
    content: "@";
}

.profile-info .member-since {
    font-size: 0.9rem;
    color: var(--text-muted-light, #7a8691); 
    margin-bottom: 0;
}

/* B. Profile Stats */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Slightly smaller minmax for denser packing if needed */
    gap: 1.5rem; 
    margin-bottom: 2.5rem; /* Consistent with header margin */
}

.stat-box.card { 
    background-color: var(--light-text);
    border-radius: var(--radius-md); /* Slightly smaller radius than header for differentiation */
    box-shadow: var(--shadow-sm); /* Softer shadow for stat cards */
    border: 1px solid var(--border-color-light, #e9ecef); /* Lighter border */
    padding: 1.5rem; /* Apply padding directly to the card */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space if card height varies */
}

.stat-box .card-body {
    padding: 0; /* Remove padding from card-body as it's on stat-box.card */
}

.stat-box .stat-title { 
    font-size: 1rem; /* Slightly smaller title */
    color: var(--text-muted, #5a6570);
    margin-bottom: 0.5rem; /* Reduced margin */
    font-weight: 500; /* Standard weight */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-box .stat-value {
    font-size: 2.5rem; /* Larger value */
    font-weight: 700; /* Bold value */
    color: var(--primary-color);
    margin-bottom: 0.5rem; 
    line-height: 1.1; /* Tighter line height */
    display: block; /* Ensure it takes full width for centering */
}

.stat-box .streak-saves { 
    font-size: 0.85rem; /* Slightly smaller */
    color: var(--text-color-secondary, #555);
    margin-bottom: 0.75rem;
}

#purchaseStreakSaveBtn { 
    /* Uses .btn .btn-sm .btn-secondary */
    background-color: var(--secondary-color); /* Ensure it uses theme variable */
    border-color: var(--secondary-color); /* Ensure border matches */
    color: var(--light-text); /* Ensure text contrast if not default for .btn-secondary */
    font-weight: 500;
    width: 100%; /* Make button full width within its container */
    margin-top: auto; /* Push to bottom of card if content is shorter */
}
#purchaseStreakSaveBtn:hover {
    background-color: var(--secondary-color-dark, #a88b2e); /* Define --secondary-color-dark or use calculated */
    border-color: var(--secondary-color-dark, #a88b2e);
}

/* C. Share Profile Button */
.profile-actions {
    /* text-center and my-4 are applied via HTML classes */
    /* Styles here are for any additional specific needs */
    padding: 1rem 0; /* Add some padding if my-4 is not enough or for visual separation */
}

.profile-actions .btn#shareProfileButton {
    /* .btn-primary and .btn-lg styles are applied */
    padding: 0.8rem 2rem; /* Custom padding for this specific large button if needed */
    font-size: 1.1rem; /* Ensure font size is large enough */
    font-weight: 600; /* Make text a bit bolder */
}
.profile-actions .btn#shareProfileButton i {
    margin-right: 0.75rem; /* Space between icon and text */
}


/* My Prayer Requests Page Styling (extends Prayer Requests where applicable) */
.my-prayer-requests-page-container .breadcrumb { /* Copied from .my-testimonials-page-container, can be generalized */
    background-color: transparent;
    padding-left: 0;
    font-size: 0.9rem;
}
.my-prayer-requests-page-container .breadcrumb-item a {
    color: var(--primary-color);
}
.my-prayer-requests-page-container .breadcrumb-item.active {
    color: var(--text-muted, #6c757d);
}

.my-prayer-requests-list .prayer-request-list-item {
    /* Base styles from .card are inherited */
    border-left: 4px solid var(--info-color); /* Example: different border to distinguish from public prayer cards */
}
.my-prayer-requests-list .prayer-request-list-item[data-status="fulfilled"] { /* Potential future use */
    border-left-color: var(--success-color);
}


.prayer-request-list-item .card-title { /* h5 */
    font-size: 1.15rem; /* Slightly smaller than public prayer cards if desired */
    color: var(--primary-color);
}

.prayer-request-list-item .prayer-request-content-preview {
    font-size: 0.9rem;
    color: var(--text-color-secondary, #555);
    line-height: 1.5;
    margin-bottom: 1rem; /* More space before meta */
}

.prayer-request-list-item .prayer-request-meta {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center;
    gap: 0.75rem; /* Space between meta items */
    font-size: 0.85rem;
    margin-bottom: 1rem; /* Space before footer actions */
}

.prayer-request-list-item .prayer-request-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem; /* Space between icon and text within a meta item */
}
.prayer-request-list-item .prayer-request-meta .badge {
    padding: 0.4em 0.65em;
    font-size: 0.9em; /* Relative to parent's 0.85rem */
}
.prayer-request-list-item .prayer-request-meta .badge i {
    margin-right: 0.25rem;
}

.prayer-request-list-item .prayer-request-prayer-count {
    color: var(--text-muted, #6c757d);
}
.prayer-request-list-item .prayer-request-prayer-count i {
    color: var(--primary-color); /* Or a specific icon color */
}


.prayer-request-list-item .prayer-request-actions.card-footer {
    background-color: var(--light-bg-subtle, #f8f9fa); 
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* Space between buttons */
    align-items: center;
    justify-content: flex-start; /* Align buttons to the start */
}
.prayer-request-list-item .prayer-request-actions .btn-sm {
    font-size: 0.8rem; 
    padding: 0.3rem 0.75rem; /* Slightly more padding for easier clicking */
}
.prayer-request-list-item .prayer-request-actions .btn-sm i {
    margin-right: 0.4rem;
}

/* New badge styles if not globally defined */
.badge-light-secondary {
    background-color: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.15); /* Assuming --bs-secondary-rgb is available or use direct RGB */
    color: var(--bs-secondary, #545b62); /* Darker shade of secondary for text */
    border: 1px solid rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.25);
}
.badge-light-primary {
    background-color: rgba(var(--primary-color-rgb, 30, 58, 138), 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-color-rgb, 30, 58, 138), 0.2);
}


/* Modal Styling for #fulfillRequestModal */
#fulfillRequestModal .modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}
#fulfillRequestModal .modal-header {
    background-color: var(--primary-color);
    color: var(--light-text);
    border-bottom: none;
    padding: 1rem 1.5rem;
}
#fulfillRequestModal .modal-header .modal-title {
    font-size: 1.25rem;
    font-weight: 500;
}
#fulfillRequestModal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Makes BS5 close button white */
}

#fulfillRequestModal .modal-body {
    padding: 1.5rem;
    font-size: 1rem;
}
#fulfillRequestModal .modal-body p {
    margin-bottom: 1.5rem;
    color: var(--text-color-secondary, #555);
}
#fulfillRequestModal .modal-body .form-group {
    margin-bottom: 1.25rem;
}
#fulfillRequestModal .modal-body .form-check-label {
    font-weight: 500;
}
#fulfillRequestModal .modal-body textarea.form-control,
#fulfillRequestModal .modal-body select.form-control {
    font-size: 0.95rem;
    border-color: var(--border-color);
}
#fulfillRequestModal .modal-body textarea.form-control:focus,
#fulfillRequestModal .modal-body select.form-control:focus {
     border-color: var(--primary-color); /* Ensure focus matches site theme */
     box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb, 30, 58, 138), 0.25);
}


#fulfillRequestModal .modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 0.75rem;
}
#fulfillRequestModal .modal-footer .btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
}


/* My Prayer Requests Empty State Specifics */
.my-prayer-requests-page-container .empty-state.card {
    /* Global .empty-state and .card styles apply. */
}
.my-prayer-requests-page-container .empty-state .fa-church { 
    color: var(--primary-color-light, #a0b4d4); 
}
.my-prayer-requests-page-container .empty-state h2 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.my-prayer-requests-page-container .empty-state p {
    font-size: 1rem;
    color: var(--text-color-secondary, #555);
    margin-bottom: 0.75rem;
}
.my-prayer-requests-page-container .empty-state .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}
.my-prayer-requests-page-container .empty-state .btn-lg i {
    margin-right: 0.5rem;
}

/* My Prayer Requests Page Styling (extends Prayer Requests where applicable) */
.my-prayer-requests-page-container .breadcrumb { 
    background-color: transparent;
    padding-left: 0;
    font-size: 0.9rem;
    margin-bottom: 1.5rem; /* Consistent spacing */
}
.my-prayer-requests-page-container .breadcrumb-item a {
    color: var(--primary-color);
}
.my-prayer-requests-page-container .breadcrumb-item.active {
    color: var(--text-muted, #6c757d);
}

.my-prayer-requests-page-container .page-main-card .card-header h1.h2 {
    font-size: 1.75rem; 
    color: var(--primary-color);
    font-weight: 600;
}
.my-prayer-requests-page-container .page-main-card .card-header .btn-primary i {
    margin-right: 0.4rem;
}

.my-prayer-requests-list .prayer-request-list-item.card {
    border-left: 4px solid var(--info-color); 
    transition: var(--transition);
}
.my-prayer-requests-list .prayer-request-list-item.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
.my-prayer-requests-list .prayer-request-list-item.card[data-status="fulfilled"], /* Custom attribute if needed for styling */
.my-prayer-requests-list .prayer-request-list-item .badge-success { /* Or style based on badge */
    border-left-color: var(--success-color);
}


.prayer-request-list-item .card-title { 
    font-size: 1.2rem; /* Slightly larger than other list items */
    color: var(--primary-color);
    font-weight: 600;
}

.prayer-request-list-item .prayer-request-content-preview {
    font-size: 0.9rem;
    color: var(--text-color-secondary, #555);
    line-height: 1.6;
    margin-bottom: 1rem; 
}

.prayer-request-list-item .prayer-request-meta {
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    gap: 0.5rem 1rem; /* row-gap column-gap */
    font-size: 0.85rem;
    margin-bottom: 1rem; 
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color-light, #eee);
}

.prayer-request-list-item .prayer-request-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem; 
    color: var(--text-muted, #6c757d);
}
.prayer-request-list-item .prayer-request-meta .badge {
    padding: 0.4em 0.7em; /* Slightly more padding */
    font-size: 0.8em; 
    font-weight: 500;
}
.prayer-request-list-item .prayer-request-meta .badge i {
    margin-right: 0.3rem;
}

.prayer-request-list-item .prayer-request-prayer-count i {
    color: var(--secondary-color); /* Different color for prayer hands */
}


.prayer-request-list-item .prayer-request-actions.card-footer {
    background-color: var(--light-bg-subtle, #f8f9fa); 
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; 
    align-items: center;
    justify-content: flex-start; 
}
.prayer-request-list-item .prayer-request-actions .btn-sm {
    font-size: 0.8rem; 
    padding: 0.35rem 0.75rem; 
}
.prayer-request-list-item .prayer-request-actions .btn-sm i {
    margin-right: 0.4rem;
}

/* Badge specific styles if not globally sufficient */
.badge-light-secondary { /* For Anonymous */
    background-color: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.15); 
    color: var(--bs-secondary, #545b62); 
    border: 1px solid rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.25);
}
.badge-light-primary { /* For Public */
    background-color: rgba(var(--primary-color-rgb, 30, 58, 138), 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-color-rgb, 30, 58, 138), 0.2);
}
/* .badge-info for "Em Aberto" should use var(--info-color) */
/* .badge-success for "Atendido" should use var(--success-color) */


/* Modal Styling for #fulfillRequestModal */
#fulfillRequestModal .modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}
#fulfillRequestModal .modal-header {
    background-color: var(--primary-color);
    color: var(--light-text);
    border-bottom: none;
    padding: 1.25rem 1.5rem; /* Increased padding */
}
#fulfillRequestModal .modal-header .modal-title {
    font-size: 1.35rem; /* Slightly larger */
    font-weight: 600;
}
#fulfillRequestModal .modal-header .btn-close { /* Bootstrap 5 close button */
    filter: invert(1) grayscale(100%) brightness(200%); 
}

#fulfillRequestModal .modal-body {
    padding: 1.75rem 1.5rem; /* Increased padding */
    font-size: 1rem;
}
#fulfillRequestModal .modal-body p {
    margin-bottom: 1.25rem; /* Adjusted spacing */
    color: var(--text-color-secondary, #555);
    line-height: 1.6;
}
#fulfillRequestModal .modal-body .form-group {
    margin-bottom: 1.25rem;
}
#fulfillRequestModal .modal-body .form-check-label {
    font-weight: 500;
    color: var(--text-color);
}
#fulfillRequestModal .modal-body textarea.form-control,
#fulfillRequestModal .modal-body select.form-control {
    font-size: 0.95rem;
    border: 1px solid var(--border-color); /* Ensure consistent border */
}
#fulfillRequestModal .modal-body textarea.form-control:focus,
#fulfillRequestModal .modal-body select.form-control:focus {
     border-color: var(--primary-color); 
     box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb, 30, 58, 138), 0.25);
}


#fulfillRequestModal .modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end; 
    gap: 0.75rem;
}
#fulfillRequestModal .modal-footer .btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 500; /* Standard weight for modal buttons */
}
#fulfillRequestModal .modal-footer .btn i {
    margin-right: 0.4rem;
}

/* My Prayer Requests Empty State Specifics */
.my-prayer-requests-page-container .empty-state.card {
    border: 1px dashed var(--border-color);
    background-color: var(--light-bg-subtle, #f8f9fa);
    box-shadow: none;
}
.my-prayer-requests-page-container .empty-state .fa-church { 
    color: var(--primary-color-light, #a0b4d4); 
    font-size: 3.5rem; /* Larger icon */
    margin-bottom: 1rem;
}
.my-prayer-requests-page-container .empty-state h2 {
    font-size: 1.5rem; /* Adjusted heading size */
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}
.my-prayer-requests-page-container .empty-state p {
    font-size: 1rem;
    color: var(--text-muted, #5a6570); /* Standard muted text */
    margin-bottom: 1.5rem; /* More space before button */
}
.my-prayer-requests-page-container .empty-state .btn-lg i {
    margin-right: 0.5rem;
}


/* Prayer Requests Page Styling */
.prayer-requests-page-container .page-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.2rem; /* Consistent with other page titles */
}

.prayer-actions.card .card-body {
    padding: 1.5rem;
}

.prayer-actions .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Space between buttons */
    justify-content: center; /* Center buttons in the card */
}
.prayer-actions .action-buttons .btn i {
    margin-right: 0.5rem;
}


.prayer-requests-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem; /* Standardized gap */
    margin-top: 2rem; /* Space above the list */
}

.prayer-card { /* Already has .card class */
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards in a row have same height */
}

.prayer-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow body to take up available space */
    padding: 1.5rem; /* Standard card padding */
}

.prayer-card .card-title { /* h3 */
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.prayer-card .prayer-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color-secondary, #555);
    margin-bottom: 1rem;
    flex-grow: 1; /* Allow content to expand */
}
.prayer-card .prayer-content p {
    margin-bottom: 0.5rem;
}
.prayer-card .prayer-content .read-more {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
}
.prayer-card .prayer-content .read-more:hover {
    text-decoration: underline;
}


.prayer-card .prayer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted, #6c757d);
    padding-top: 1rem; /* Space above footer content if not using border */
    border-top: 1px solid var(--border-color); /* Separator line */
    margin-top: auto; /* Push to bottom if card-body content is short */
}

.prayer-card .prayer-author,
.prayer-card .prayer-date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.prayer-card .prayer-stats.card-footer { /* Styles for the new card-footer section */
    background-color: var(--light-bg-subtle, #fcfcfd);
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem; /* Space between count and button */
    border-top: 1px solid var(--border-color); /* Ensure top border if it's a footer */
}

.prayer-card .prayer-count {
    font-size: 0.9rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between icon and text */
    font-weight: 500;
}
.prayer-card .prayer-count .fa-praying-hands {
    color: var(--primary-color);
    font-size: 1.1em;
}

.prayer-card .pray-button,
.prayer-card .prayer-stats .btn { /* Targetting the button if user not logged in */
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}
.prayer-card .pray-button i,
.prayer-card .prayer-stats .btn i {
    margin-right: 0.4rem;
}

/* Empty state for prayer requests */
.prayer-requests-page-container .empty-state.card {
    /* Global .empty-state and .card styles apply. */
}
.prayer-requests-page-container .empty-state .fa-church { /* Icon changed in PHP */
    color: var(--primary-color-light, #a0b4d4); 
}
.prayer-requests-page-container .empty-state h2 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.prayer-requests-page-container .empty-state p {
    font-size: 1rem;
    color: var(--text-color-secondary, #555);
    margin-bottom: 0.75rem;
}
.prayer-requests-page-container .empty-state .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}
.prayer-requests-page-container .empty-state .btn-lg i {
    margin-right: 0.5rem;
}


/* D. Profile Page Tabs Interface */
.profile-tabs {
    display: flex;
    flex-wrap: wrap; 
    margin-bottom: -1px; /* Key for active tab border to overlap */
    position: relative; /* Needed for z-indexing if active tab needs to sit "on top" */
    z-index: 1; /* Ensure tabs are above the content card's top border initially */
}

.tab-button {
    padding: 0.9rem 1.75rem; /* Enhanced padding for a beefier tab */
    cursor: pointer;
    border: 1px solid var(--border-color); /* Default border for all tabs */
    border-bottom: none; /* Bottom border removed, active state will add its own */
    background-color: var(--light-bg-subtle, #f8f9fa); /* Inactive tab background */
    font-family: var(--font-primary);
    font-size: 1rem; /* Standard size */
    color: var(--text-muted, #5a6570);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    margin-right: 0.25rem; /* Small gap between tabs */
    border-top-left-radius: var(--radius-md); 
    border-top-right-radius: var(--radius-md);
    position: relative; /* For z-index stacking */
    font-weight: 500;
}
.tab-button i {
    margin-right: 0.6rem; 
    color: currentColor; 
}

.tab-button:hover {
    color: var(--primary-color);
    background-color: var(--light-bg, #f0f2f5); /* Slightly darker hover */
}

.tab-button.active {
    color: var(--primary-color);
    font-weight: 600;
    background-color: var(--light-text); /* Match content card background */
    border-color: var(--border-color) var(--border-color) var(--light-text); /* Bottom border same as content bg */
    z-index: 2; /* Active tab sits on top of the content card's border */
}

.profile-content.card {
    /* The .card class provides background, shadow, border-radius, and padding (2rem by default) */
    /* To ensure the active tab connects seamlessly, we adjust border-top properties. */
    border-top: 1px solid var(--border-color); /* Ensure top border is consistent */
    /* If the first tab is active, its left border should align.
       If tabs are wrapped, this connection might look off for tabs on the second line.
       The current design with tabs having individual borders and active one overriding bottom is simpler.
    */
    /* border-top-left-radius: 0; /* Only if first tab is active and connected visually */
    /* Clear margin-top if .profile-tabs has margin-bottom, or vice-versa, to control space */
    margin-top: 0; 
}

.profile-content .tab-content {
    display: none; 
    /* Padding is handled by the .profile-content.card parent (2rem default) */
    /* If specific padding per tab is needed, add it here or to child elements */
}
.profile-content .tab-content.active {
    display: block; 
    animation: fadeInTab 0.3s ease-in-out; /* Slightly faster fade */
}

.tab-pane-title { 
    font-size: 1.6rem; /* Slightly reduced from previous for better balance */
    color: var(--primary-color);
    margin-bottom: 1.5rem; 
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color-light, #e9ecef); 
}

.subsection-title { /* Common styling for H3s inside tab panes */
    font-size: 1.3rem; /* var(--h4-font-size) or similar */
    color: var(--primary-color);
    margin-top: 2rem; /* Space above subsection title */
    margin-bottom: 1rem;
}


/* E. Achievements Tab */
.achievement-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Slightly larger min for better spacing */
    gap: 1.5rem;
    margin-top: 1rem; /* Space below subsection title */
}

.achievement-item.card {
    background-color: var(--light-text); /* Ensure consistent card background */
    border: 1px solid var(--border-color); /* Consistent border */
    border-left: 5px solid var(--secondary-color); /* Prominent accent for earned */
    transition: box-shadow var(--transition), transform var(--transition);
}
.achievement-item.card:hover {
    box-shadow: var(--shadow-lg); /* Enhanced shadow on hover */
    transform: translateY(-3px);
}

.achievement-item.card .card-body {
    padding: 1.5rem; /* Standardized card padding */
    display: flex; 
    gap: 1.25rem; /* Increased gap */
    align-items: flex-start; 
}

.achievement-icon {
    flex-shrink: 0;
    font-size: 2.25rem; /* Slightly larger icon */
    color: var(--secondary-color); 
    width: 48px; /* Adjusted width */
    height: 48px; /* Ensure square area if needed */
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: rgba(var(--secondary-color-rgb), 0.1); /* Optional: subtle background for icon */
    /* border-radius: 50%; */
}

.achievement-item.locked .achievement-icon {
    color: var(--text-muted-light, #adb5bd); /* Lighter grey for locked icons */
    /* background-color: rgba(var(--text-muted-rgb), 0.05); */
}
.achievement-item.locked {
     border-left-color: var(--text-muted-light, #adb5bd); /* Grey accent for locked */
     background-color: var(--light-bg-subtle, #f8f9fa); /* Slightly different bg for locked */
}


.achievement-details {
    flex-grow: 1;
}

.achievement-name { 
    font-size: 1.15rem; /* Slightly larger name */
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 0.4rem;
    font-weight: 600;
}
.achievement-item.locked .achievement-name {
    color: var(--text-muted, #5a6570); /* Darker muted for locked name */
}

.achievement-description {
    font-size: 0.9rem;
    color: var(--text-color-secondary, #555);
    margin-bottom: 0.6rem;
    line-height: 1.5;
}
.achievement-item.locked .achievement-description {
    color: var(--text-muted, #6c757d);
}

.achievement-date {
    font-size: 0.8rem;
    color: var(--text-muted, #6c757d);
    margin-bottom: 0.75rem;
}
.achievement-item.locked .achievement-date {
    color: var(--text-muted-light, #868e96);
}

.achievement-reward {
    font-size: 0.9rem; /* Slightly larger reward text */
    color: var(--success-color);
    font-weight: 500;
}
.achievement-item.locked .achievement-reward {
    color: var(--text-muted, #6c757d);
}

.share-achievement-btn { 
    font-size: 0.8rem; /* Standard small button size */
    padding: 0.3rem 0.6rem; /* Standard small button padding */
    color: var(--secondary-color); /* Use secondary color for outline */
    border-color: var(--secondary-color);
}
.share-achievement-btn:hover {
    background-color: var(--secondary-color);
    color: var(--light-text);
}
.share-achievement-btn i {
    margin-right: 0.4rem;
}

/* Empty state for achievements tab */
#achievements .empty-state i.fa-trophy { 
    color: var(--secondary-color); /* Match achievement icon color */
    opacity: 0.7;
}
#achievements .empty-state p {
    font-size: 1rem; 
    color: var(--text-muted, #5a6570);
}
#achievements .empty-state {
    padding: 2rem; /* Ensure empty state has padding */
}


/* F. Bible Progress Tab */
.bible-progress-stats {
    /* The main container for stats. If children are cards, this might not need much styling. */
    /* padding: 0; Remove padding if children .stat-item.card handle their own. */
}

.bible-progress-stats .stat-item.card {
    /* Each stat block is now a card. Default .card styling applies. */
    /* margin-bottom: 1rem; /* Replaced by mb-3 in HTML */
}
.bible-progress-stats .stat-item.card .card-body {
    padding: 1.25rem; /* Consistent padding for these stat cards */
}

.bible-progress-stats .stat-item .stat-label {
    font-weight: 500; /* Less bold than default */
    color: var(--text-muted, #6c757d);
    margin-bottom: 0.25rem; /* Space below label if values wrap */
    display: block; /* Ensure it takes full width or use flex for inline */
    font-size: 0.95rem;
}

.bible-progress-stats .stat-item .stat-value {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.5rem; /* Prominent value */
}

.progress-bar-container {
    background-color: var(--gray-bg, #f0f0f0); /* Lighter background */
    border-radius: var(--radius-sm); /* Consistent radius */
    height: 28px; /* Slightly taller */
    overflow: hidden;
    margin-top: 0.5rem; /* Space above progress bar */
    width: 100%;
}

.progress-bar {
    background-color: var(--success-color);
    height: 100%;
    line-height: 28px; /* Match container height */
    color: var(--light-text);
    text-align: center;
    font-size: 0.85rem; /* Slightly larger text */
    font-weight: 500;
    transition: width 0.6s ease-in-out;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.1); /* Subtle inner shadow */
}

.bible-progress-stats .subsection-title { /* For "Livros Concluídos" h4 */
    /* Uses global .subsection-title styles, adjust if needed */
    margin-top: 1rem; /* Reduced top margin as it's inside a card */
}

.completed-books-list.list-group.list-group-flush .list-group-item {
    padding: 0.5rem 0; /* Reduced padding for a denser list */
    font-size: 0.95rem;
    background-color: transparent; /* Ensure flush appearance */
    border-color: var(--border-color-light, #eee); /* Lighter border for items */
}
.completed-books-list.list-group.list-group-flush .list-group-item:last-child {
    border-bottom: none;
}


.bible-progress-stats .stat-item.last-reading.card .card-body {
    /* .last-reading specific styles */
    /* border-top: 1px solid var(--border-color); /* Card already has border */
    /* padding-top: 1.25rem; /* Consistent padding */
}
.bible-progress-stats .stat-item.last-reading .stat-label {
    /* Styles inherited */
}
.bible-progress-stats .stat-item.last-reading .stat-value {
    font-size: 1rem; /* Normal size for last reading info */
    font-weight: 500;
    color: var(--text-color);
}

/* Empty state for Bible tab */
#bible .empty-state i.fa-book-reader {
    color: var(--primary-color-light, #a0b4d4);
}
#bible .empty-state p {
    font-size: 1rem;
}
#bible .empty-state .btn {
    margin-top: 1rem; /* Add some space above button */
}

/* G. Prayers Tab (Profile Page) */
#prayers .prayer-request-list {
    /* Using existing .prayer-request-list styles if suitable, or override for profile view */
    /* For a summary, we might want a denser layout or just a vertical stack */
    display: flex;
    flex-direction: column; /* Simple vertical stack for summary */
    gap: 1rem; /* Space between summarized prayer requests */
}

#prayers .prayer-request-item.card {
    /* Styles for prayer request cards within the profile tab */
    /* Base .card styles apply */
    background-color: var(--light-bg-subtle, #fcfcfd); /* Slightly different background */
    border-left: 4px solid var(--info-color);
}
#prayers .prayer-request-item.card .card-body {
    padding: 1rem; /* More compact padding */
}

#prayers .prayer-request-item .card-title {
    font-size: 1.05rem; /* Slightly smaller title for summary */
    margin-bottom: 0.4rem;
}

#prayers .prayer-request-item .prayer-content-summary {
    font-size: 0.85rem;
    color: var(--text-color-secondary, #555);
    line-height: 1.5;
    margin-bottom: 0.6rem;
}

#prayers .prayer-request-item .card-text small.text-muted {
    font-size: 0.75rem; /* Smaller date text */
}

#prayers .prayer-request-item .text-success { /* "Atendido" status */
    font-size: 0.85rem;
    font-weight: 500;
}
#prayers .prayer-request-item .text-success i {
    margin-right: 0.25rem;
}

#prayers .prayer-request-item .btn-sm.btn-outline-info { /* "Ver Testemunho" button */
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    margin-top: 0.5rem; /* Space above button if content is short */
}

#prayers .text-center.mt-3 .btn-primary { /* "Ver Todos os Meus Pedidos" button */
    /* Global .btn .btn-primary styles apply */
    font-size: 0.95rem; /* Adjust if needed */
}

/* Empty state for prayers tab */
#prayers .empty-state i.fa-hands-praying {
    color: var(--info-color-light, #a1d3db); /* Light blue for prayers icon */
}
#prayers .empty-state p {
    font-size: 1rem;
}
#prayers .empty-state .btn { /* "Fazer um Pedido Agora" button */
    margin-top: 1rem;
}

/* H. Settings Tab */
.settings-content {
    max-width: 700px; /* Constrain width of forms for better readability */
    margin-left: auto;
    margin-right: auto;
    padding-top: 1rem; /* Add some space if .tab-pane-title has bottom border */
}

.settings-content form {
    background-color: var(--light-bg-subtle, #fcfcfd); /* Light background for form sections */
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color-light, #eee);
}
.settings-content form + hr + form { /* Spacing for the second form */
    margin-top: 2.5rem; /* Ensure hr also provides good spacing or rely on form's margin */
}


.settings-content .subsection-title {
    /* Global .subsection-title styles apply */
    margin-top: 0; /* Reset top margin as it's the first element in the form's styled box */
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color-light, #eee);
    margin-bottom: 1.5rem;
}

.settings-content .form-group {
    /* Global .form-group styles apply */
    margin-bottom: 1.25rem; /* Slightly adjust if needed */
}
.settings-content .form-group label {
    /* Global styles apply */
    font-weight: 500; /* Slightly less bold if global is 600 */
}
.settings-content .form-control {
    /* Global .form-control styles apply */
}
.settings-content .form-text {
    /* Global .form-text styles apply */
    font-size: 0.85rem;
}

.settings-content .btn[type="submit"] {
    /* Global .btn .btn-primary styles apply */
    padding: 0.75rem 1.5rem; /* Consistent padding */
    width: auto; /* Allow button to size to content, or 100% if preferred */
    min-width: 180px; /* Minimum width for action buttons */
}
.settings-content .btn[type="submit"] i {
    margin-right: 0.5rem;
}

/* Alert message styling (ensure these are defined globally or add here) */
/* Assuming global .alert, .alert-success, .alert-danger etc. exist and are styled.
   Example specific adjustment for profile settings alerts: */
.settings-content .alert {
    margin-top: 0; /* Remove top margin if it's the first thing after a title */
    margin-bottom: 1.5rem;
    padding: 0.9rem 1.25rem;
    font-size: 0.95rem;
}

/* I. Activity History Tab */
#activity .table-responsive {
    margin-top: 1rem; /* Space above table */
}

.activity-table {
    /* Bootstrap classes .table, .table-striped, .table-hover provide base styling */
    font-size: 0.9rem; /* Slightly smaller font for table data */
}

.activity-table th {
    font-weight: 600; /* Bolder headers */
    color: var(--primary-color);
    background-color: var(--light-bg-subtle, #f8f9fa); /* Light background for headers */
    padding: 0.9rem 0.75rem; /* Adjust padding */
    vertical-align: middle;
}

.activity-table td {
    padding: 0.75rem;
    vertical-align: middle;
    color: var(--text-color-secondary, #555);
}

.activity-table .points-positive {
    color: var(--success-color, #28a745);
    font-weight: 500;
}

.activity-table .points-negative {
    color: var(--error-color, #dc3545);
    font-weight: 500;
}

/* Empty state for activity tab */
#activity .empty-state i.fa-history {
    color: var(--info-color-light, #a1d3db); /* Example color */
}
#activity .empty-state p {
    font-size: 1rem;
}


@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Prayer Requests Tab in Profile */
.prayer-request-list .prayer-request-item.card {
    background-color: #fff; /* Ensure card background is white */
    border: 1px solid var(--border-color);
    margin-bottom: 1rem; /* Use variable or consistent spacing */
}

.prayer-request-item .card-title {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.prayer-content-summary {
    max-height: 100px; /* Example max height */
    overflow-y: auto;
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
}

.prayer-request-item .card-body .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.prayer-request-item .text-success {
    color: var(--success-color) !important; /* Ensure our success color is used */
    font-weight: bold;
}

.prayer-request-item .text-muted {
    color: #6c757d !important; /* Standard muted color */
}

/* Empty state styling (can be shared across tabs) */
.empty-state {
    text-align: center;
    padding: 30px 20px;
    background-color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-top: 20px;
}

.empty-state i {
    font-size: 3rem;
    color: #ccc; /* Lighter color for icon */
    margin-bottom: 15px;
    display: block;
}

.empty-state p {
    font-size: 1.1rem;
    color: #777;
    margin-bottom: 20px;
}

.empty-state .btn {
    font-size: 1rem;
}

/* Streak display in main menu */
.main-menu .menu-streak span {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    margin-left: 1rem; /* Adjust if it's part of the <li> margin already */
    border-radius: var(--radius-sm);
    background-color: var(--warning-color); /* A light orange/yellow, or var(--accent-color) if more prominent */
    color: var(--dark-text, #333); /* Ensure good contrast with background */
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.main-menu .menu-streak span:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.main-menu .menu-streak .fa-fire {
    color: var(--accent-color, #dc3545); /* Red/Orange color for the fire icon */
    margin-right: 0.3rem;
}

/* Responsive adjustments if needed, for example, if the menu items stack */
@media (max-width: 768px) {
    .main-menu .menu-streak {
        /* If menu items stack, ensure streak display fits well */
        margin-left: 0; /* Reset margin if it was for horizontal layout */
        padding: 0.5rem 1.5rem; /* Match padding of other mobile menu items if it becomes a block */
    }
    .main-menu.active .menu-streak span { /* When mobile menu is active */
        margin-left: 0; /* Ensure no extra margin if it's inside a block link */
        display: inline-block; /* Or block if it takes full width like other links */
        width: auto; /* Adjust as needed */
        text-align: left; /* Or center if preferred */
        background-color: transparent; /* May need to remove background if it's on the <a> tag in mobile */
        color: var(--primary-color); /* Match other menu item colors in mobile */
        padding: 0;
        box-shadow: none;
    }
    .main-menu.active .menu-streak span .fa-fire {
        color: var(--accent-color); /* Keep fire icon colored */
    }
}

/* Donate Page Styling */
.donate-page-container .page-title {
    /* Assuming .page-title is globally styled or use text-center from HTML */
    margin-bottom: 1.5rem; /* Space after main title */
    font-size: 2.2rem; /* Ensure consistent page title size */
    font-weight: 700; /* Bolder title */
}

.donations-intro.lead {
    font-size: 1.1rem; /* Adjusted for better fit if default .lead is too large */
    color: var(--text-color-secondary, #555);
    max-width: 800px; /* Corrected from 850px for typical container consistency */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem !important; /* Increased space */
}

.donation-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjusted minmax for better spacing on some screens */
    gap: 2rem; 
    margin-bottom: 3.5rem; /* More space after options */
}

.donation-card.card {
    display: flex;
    flex-direction: column; 
    border: 1px solid var(--border-color); 
    box-shadow: var(--shadow-md); 
    border-radius: var(--radius-lg); /* More rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.donation-card.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.donation-card.card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    padding: 2rem; /* Consistent padding */
}

.donation-icon {
    text-align: center;
    margin-bottom: 1.25rem; 
}
.donation-icon i {
    font-size: 3rem; 
    /* Colors are applied via text-primary, text-danger, text-info in HTML */
}

.donation-card .card-title { 
    text-align: center;
    font-size: 1.5rem; /* Standardized title size */
    color: var(--primary-color);
    margin-bottom: 1rem; /* Increased space */
    font-weight: 600;
}
.donation-card .card-text {
    text-align: center;
    font-size: 0.95rem; /* Increased text size */
    color: var(--text-color-secondary, #555);
    margin-bottom: 1.5rem;
    flex-grow: 1; 
}

/* PayPal Form specific styles */
.donation-form .form-group {
    margin-bottom: 1.25rem; 
}
.donation-form .form-label { 
    font-weight: 600; /* Bolder label */
    margin-bottom: 0.75rem; /* More space for label */
    display: block;
    text-align: left; 
    font-size: 0.9rem;
}
.donation-form .amount-options {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); /* Adjusted for potentially 5 buttons */
    gap: 0.75rem; /* Slightly increased gap */
    margin-bottom: 1rem;
}
.donation-form .amount-options .btn {
    padding: 0.6rem 0.5rem; 
    font-size: 0.85rem;
    border-width: 1px; 
    font-weight: 500;
}
.donation-form .amount-options .btn.active { 
    background-color: var(--primary-color);
    color: var(--light-text);
    border-color: var(--primary-color);
    font-weight: 600;
}
.donation-form .custom-amount-input.form-control {
    text-align: left; 
    font-size: 0.95rem;
    margin-bottom: 1.25rem; /* Increased space */
}
.donation-form .btn-primary { /* PayPal Button */
    padding: 0.85rem 1.5rem; /* Larger primary button */
}
.donation-form .btn-primary i { 
    margin-right: 0.6rem; /* More space for icon */
}


/* Apoia.se Benefits */
.donation-card .benefits {
    margin-top: 1rem; 
    margin-bottom: 1.5rem; 
    text-align: left; 
    font-size: 0.9rem; /* Standardized benefits text */
    background-color: var(--light-bg-subtle, #f8f9fa);
    padding: 1.25rem; /* More padding */
    border-radius: var(--radius-md); /* Consistent radius */
    border: 1px solid var(--border-color-light, #e9ecef);
}
.donation-card .benefits-title { 
    font-size: 1rem; /* Standardized title */
    font-weight: 700; /* Bolder title */
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}
.donation-card .benefits ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0; 
}
.donation-card .benefits ul li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    color: var(--text-color-secondary, #454d55); /* Slightly darker for better readability */
}
.donation-card .benefits ul li i.fa-check-circle {
    margin-right: 0.6rem; 
    font-size: 1em; 
    color: var(--success-color); 
}
.donation-card .btn-primary { /* Apoia.se Button */
    padding: 0.85rem 1.5rem; /* Larger primary button */
}
.donation-card .btn-primary i { 
    margin-right: 0.6rem;
}


/* Pix Section */
.donation-card .pix-info {
    margin-top: auto; 
}
.donation-card .pix-qrcode img {
    display: block;
    margin: 0 auto 1.25rem auto; /* Increased margin */
    max-width: 180px; 
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md); /* Consistent radius */
    padding: 0.5rem; /* More padding for QR code */
    background-color: var(--light-text); /* Ensure QR code is on white if transparent */
}
.donation-card .pix-key {
    text-align: center; 
}
.donation-card .pix-key p {
    margin-bottom: 0.35rem; /* Adjusted spacing */
    font-size: 0.9rem;
}
.donation-card .pix-key .pix-key-value {
    font-weight: 600; 
    color: var(--primary-color-dark, #102a68); /* Darker for key */
    word-break: break-all; 
    background-color: var(--gray-bg, #f0f0f0); 
    padding: 0.75rem; /* More padding */
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-color);
    font-size: 1rem; 
    margin-bottom: 1rem !important; /* Ensure space for button */
}
.donation-card .copy-pix-key.btn {
    margin-top: 0.5rem; 
    font-size: 0.85rem; /* Slightly larger button text */
    padding: 0.5rem 1rem; /* More padding */
}
.donation-card .copy-pix-key.btn i {
    margin-right: 0.4rem;
}


/* "How Donation Is Used" Section */
.donation-info.card {
    margin-top: 3.5rem; /* Increased space */
    border-top: 3px solid var(--primary-color); /* Accent top border */
}
.donation-info .card-header {
    background-color: var(--primary-color-lightest, #eef2f9); /* Very light primary tint for header */
    border-bottom: 1px solid var(--border-color);
}
.donation-info .card-header .section-title {
    margin-bottom: 0; 
    font-size: 1.6rem; /* Adjusted size */
    color: var(--primary-color); 
    font-weight: 600;
}

.donation-usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Adjusted for better fit */
    gap: 1.75rem; /* Slightly increased gap */
    padding-top: 1.5rem; 
}

.usage-item.card {
    background-color: var(--light-text); 
    border: 1px solid var(--border-color-light, #e9ecef); /* Lighter border for usage items */
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.usage-item.card:hover {
    transform: translateY(-5px); /* More pronounced hover */
    box-shadow: var(--shadow-lg); /* More prominent shadow on hover */
}

.usage-item.card .card-body {
     padding: 1.75rem; 
     text-align: center; 
}

.usage-item .usage-icon {
    margin-bottom: 1rem;
}
.usage-item .usage-icon i {
    font-size: 2.5rem; /* Increased icon size */
    color: var(--primary-color); /* Consistent icon color */
}

.usage-item .usage-title { 
    font-size: 1.2rem; /* Increased title size */
    color: var(--primary-color-dark, #102a68); /* Darker shade of primary */
    margin-bottom: 0.6rem;
    font-weight: 600;
}
.usage-item p {
    font-size: 0.9rem; 
    color: var(--text-color-secondary, #555);
    line-height: 1.6;
}

/* Static Page Specific Styles */
.static-page-container .page-main-card .card-body {
    padding: 2rem; /* Ensure consistent padding for static content */
    font-size: 1rem; /* Standard font size for readability */
    line-height: 1.7; /* Improved line height for text blocks */
}

.static-page-container .page-main-card .card-body p {
    margin-bottom: 1.25rem; /* Consistent paragraph spacing */
    color: var(--text-color-secondary, #454d55);
}

.static-page-container .page-main-card .card-body p.lead {
    font-size: 1.2rem; /* Slightly larger lead paragraph */
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.static-page-container .page-main-card .card-body .btn {
    margin-top: 1rem; /* Space above the "Back to Home" button */
}
.static-page-container .page-main-card .card-body .btn i {
    margin-right: 0.5rem;
}

/* Adjust page title for static pages if needed */
.static-page-container .page-title {
    font-size: 2rem; /* Slightly smaller if global .page-title is larger */
    margin-bottom: 2rem; /* More space below title */
}

/* Profile Page Stats Enhancements */

.stat-box .stat-icon {
    font-size: 1.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.points-stat-box {
    border-left: 5px solid var(--secondary-color);
}

.points-stat-box .stat-icon .fa-star {
    color: var(--secondary-color);
}

/* Optional: Make points value match accent color */
/*
.points-stat-box .stat-value {
    color: var(--secondary-color);
}
*/

.streak-stat-box {
    border-left: 5px solid var(--accent-color);
}

.streak-stat-box .stat-icon .fa-fire-alt {
    color: var(--accent-color);
}

.streak-stat-box .stat-value .current-streak {
    font-size: 2.5rem; /* Ensure it's large */
    font-weight: 700;
    color: var(--primary-color); /* Or var(--accent-color) if desired */
    display: inline-block; /* Allow text to flow if value is short, or block if always separate line */
    margin-right: 0.5rem; /* Space if max-streak is inline */
}

.streak-stat-box .stat-value .max-streak {
    font-size: 0.9rem;
    color: var(--text-muted, #5a6570);
    display: block; /* Put it on a new line below current streak */
    margin-top: 0.25rem;
    line-height: 1; /* Adjust line height if it looks too spaced */
}

/* Adjust stat-title margin if icon is present */
.stat-box .stat-icon + .stat-title {
    margin-top: 0.25rem; /* Space between icon and title */
}

/* Ensure existing .stat-value styles are maintained as a base */
.stat-box .stat-value {
    font-size: 2.5rem; 
    font-weight: 700; 
    color: var(--primary-color);
    margin-bottom: 0.5rem; 
    line-height: 1.1; 
    /* display: block; /* Already there, but confirm */
}

/* Override for the combined streak value if current-streak and max-streak are in same .stat-value div */
.streak-stat-box .stat-value {
    line-height: 1.2; /* Adjust line height for the container of current and max streak */
}

/* Contact Page Specific Styles */
.contact-page-container .contact-content p { /* General paragraphs within contact section */
    line-height: 1.7;
    color: #444; /* From about.php style */
    margin-bottom: 1rem; 
}

.contact-page-container .contact-content .lead { /* Lead paragraph */
    font-size: 1.15rem; /* Consistent with about.php */
    color: #555; /* From about.php style */
    margin-bottom: 1.5rem; 
    /* text-align: center; is handled by class in HTML */
}

.contact-page-container .contact-content .section-title { /* Section titles like "Como Podemos Ajudar?" */
    font-size: 1.75rem; 
    color: var(--primary-color); 
    margin-top: 1.5rem; 
    margin-bottom: 1.5rem;
    /* text-align: center; is handled by class in HTML */
}

.contact-page-container .contact-content .contact-details-block {
    background-color: var(--light-bg-subtle, #f8f9fa);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color-light, #e9ecef);
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.contact-page-container .contact-content .contact-details-block p {
    margin-bottom: 0.75rem; 
}

.contact-page-container .contact-content .contact-details-block strong {
    color: var(--primary-color);
}

.contact-page-container .contact-content .contact-email {
    font-size: 1.1rem; 
    /* text-align: center; is handled by class in HTML */
}

.contact-page-container .contact-content .contact-email i,
.contact-page-container .contact-content .contact-hours i,
.contact-page-container .contact-content .contact-response-time i {
    margin-right: 0.5rem;
    color: var(--primary-color); 
}

/* Styles for optional Social Media Section (if uncommented later) */
.contact-page-container .contact-content .social-links a.btn {
    margin: 0.25rem; 
    font-size: 0.9rem; 
}

.contact-page-container .contact-content .social-links a.btn i {
    font-size: 1.2rem; 
}

/* Ensure paragraphs within sections that should be left-aligned are so, if global text-center is an issue */
/* This handles paragraphs directly under a .contact-section that don't have explicit text-align classes */
.contact-page-container .contact-content .contact-section > p:not([class*='text-']) {
    text-align: left;
}

/* Rankings Page Styles */
/* Basic styling for the new ranking items - can be expanded in a separate CSS file */
.ranking-title {
    margin-bottom: 1.5rem;
    text-align: center;
    color: #333;
}

.ranking-list .ranking-item {
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.3s ease-in-out;
}

.ranking-list .ranking-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.ranking-item.current-user-highlight {
    background-color: #e7f3ff; /* Light blue highlight for current user */
    border-left: 4px solid #007bff; /* Accent border for current user */
}

.ranking-item-position .rank-number {
    font-size: 1.2em;
    font-weight: bold;
    color: #555;
    min-width: 50px; /* Ensure alignment */
    display: inline-block; /* For width */
    text-align: center;
}
.ranking-item-position .fa-lg { /* Make icons slightly larger */
    font-size: 1.5em; 
}


.ranking-item-user .username {
    font-size: 1.1em;
    color: #2a2a2a;
}

.ranking-item-user .user-level {
    font-size: 0.9em;
}

.ranking-item-score .score-value {
    font-size: 1.1em;
    color: #000;
}
.ranking-item-score .score-label {
    font-size: 0.9em;
    color: #444;
}

.ranking-item-score .fa-star,
.ranking-item-score .fa-fire {
    font-size: 1.1em; /* Consistent icon size */
}

/* Adjust spacing for Bootstrap 4 if mr-3, ml-1 classes are not fully effective or for BS5*/
.ranking-item-position {
    margin-right: 1rem; /* Bootstrap 4 equivalent of mr-3 */
}
.ranking-item-score .fa-star, .ranking-item-score .fa-fire {
    margin-left: 0.25rem; /* Bootstrap 4 equivalent of ml-1 */
}

/* Add some padding to the card body for better spacing */
.ranking-item .card-body {
    padding: 0.75rem 1.25rem; /* Adjust as needed */
}

/* Responsive adjustments if needed */
@media (max-width: 576px) {
    .ranking-item .card-body {
        flex-direction: column;
        align-items: flex-start;
    }
    .ranking-item-main {
        margin-bottom: 0.5rem;
    }
    .ranking-item-score {
        text-align: left; /* Align score to left on small screens if stacked */
        width: 100%;
    }
    .ranking-item-position .rank-number {
        min-width: 40px; /* Slightly smaller min-width */
    }
}

/* Spiritual Offensive Alert Styling */
.streak-alert {
    background-color: #fff3cd; /* Light yellow, good for warnings */
    color: #856404; /* Darker yellow/brown for text */
    padding: 1rem 1.25rem; /* Consistent padding using rem */
    margin-bottom: 1.5rem; /* Consistent margin */
    border: 1px solid #ffeeba;
    border-left-width: 5px;
    border-left-color: #ffc107; /* More prominent yellow for left border */
    border-radius: var(--radius-md, 8px); /* Use theme variable or fallback */
    /* display: flex; by default, .streak-alert is a block, the inner .container will handle flex */
}

/* The .container class is global and handles max-width and padding.
   We need to ensure the flex properties are applied to the .container *inside* .streak-alert. */
.streak-alert > .container { /* Direct child selector for specificity */
    display: flex;
    align-items: center;
    padding: 0; /* Reset container's own padding as .streak-alert handles it */
    margin: 0; /* Reset container's own margin if any */
    width: 100%; /* Ensure it uses the full width within .streak-alert's padding */
    max-width: 100%; /* Override global .container max-width for this specific context */
}

.streak-alert .fas.fa-exclamation-triangle {
    font-size: 1.5em; /* Make icon a bit larger */
    margin-right: 1rem; /* Space between icon and text */
    color: #ffc107; /* Match left border color or a bit darker */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.streak-alert p {
    margin: 0; /* Remove default paragraph margin */
    font-size: 0.95em;
    line-height: 1.6;
    font-weight: 500; /* Slightly bolder for emphasis */
    flex-grow: 1; /* Allow text to take available space */
}

/* Ensure #fulfillRequestModal is hidden by default unless .show is present */
#fulfillRequestModal:not(.show) {
    display: none !important;
}

/* Chat Embed Widget Styles */
.chat-embed-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    max-height: 450px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 8px 16px rgba(0,0,0,0.15));
    z-index: 1050; /* Ensure it's above most content, but below modals if necessary */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevents content from spilling during animations */
    transition: all 0.3s ease-in-out;
}

.chat-embed-widget.minimized {
    height: 40px; /* Height of header */
    width: 200px; /* Or just the width of the header content */
    overflow: hidden;
}

.chat-embed-widget.closed {
    display: none;
}

.chat-embed-header {
    background-color: var(--primary-color, #1e3a8a);
    color: var(--light-text, #ffffff);
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer; /* To indicate it's clickable for minimize/maximize */
    border-top-left-radius: var(--radius-md, 8px);
    border-top-right-radius: var(--radius-md, 8px);
}

.chat-embed-header span {
    font-weight: 600;
    font-size: 0.95rem;
}

.chat-embed-header button {
    background: none;
    border: none;
    color: var(--light-text, #ffffff);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    line-height: 1;
}
.chat-embed-header button:hover {
    opacity: 0.8;
}

#chatEmbedBody {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden; /* Key for containing messages and form */
}

.chat-embed-messages {
    flex-grow: 1;
    padding: 0.75rem;
    overflow-y: auto;
    background-color: var(--light-bg, #f8f9fa);
    min-height: 150px; /* Ensure a minimum height for message area */
}

.chat-embed-messages .message {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm, 4px);
    max-width: 90%;
    line-height: 1.4;
    font-size: 0.9rem;
}

.chat-embed-messages .message-bot {
    background-color: var(--primary-color-lightest, #eef2f9); /* Lighter primary */
    color: var(--primary-color-dark, #102a68); /* Darker text for contrast */
    border-top-left-radius: 0;
    margin-right: auto;
    align-self: flex-start;
}

.chat-embed-messages .message-user {
    background-color: var(--secondary-color-lightest, #fdf8e7); /* Lighter secondary */
    color: var(--secondary-color-dark, #8c6d1d); /* Darker text for contrast */
    border-top-right-radius: 0;
    margin-left: auto;
    align-self: flex-end;
}

.chat-embed-form-container {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
    background-color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#chatEmbedInput {
    flex-grow: 1;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    resize: none; /* Prevent manual resize */
    min-height: 38px; /* Approx 2 rows */
    max-height: 70px; /* Approx 4 rows before scroll */
    overflow-y: auto;
}
#chatEmbedInput:focus {
    border-color: var(--primary-color, #1e3a8a);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 30, 58, 138), 0.2);
}

#chatEmbedSend,
#chatEmbedVoiceInput, /* Placeholder for future */
#chatEmbedMuteToggle { /* Placeholder for future */
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    background-color: var(--primary-color, #1e3a8a);
    color: var(--light-text, #ffffff);
    border: none;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#chatEmbedSend:hover,
#chatEmbedVoiceInput:hover,
#chatEmbedMuteToggle:hover {
    background-color: var(--primary-color-dark, #152c6a); /* Darken primary */
}

#chatEmbedNotice {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    text-align: center;
    padding: 0.5rem;
    background-color: var(--light-bg-subtle, #f8f9fa);
    border-top: 1px solid var(--border-color, #e0e0e0);
}

/* Responsive adjustments for chat embed */
@media (max-width: 768px) {
    .chat-embed-widget {
        /* Make it full width or more prominent on mobile if desired */
        /* For now, keeping it the same, but could adjust width/height/position */
        /* Example: width: calc(100% - 40px); max-height: 60vh; */
    }
}

@media (max-width: 400px) { /* Very small screens */
    .chat-embed-widget {
        width: calc(100% - 20px); /* Almost full width */
        bottom: 10px;
        right: 10px;
        max-height: 70vh;
    }
    .chat-embed-header span {
        font-size: 0.9rem;
    }
    .chat-embed-messages .message {
        font-size: 0.85rem;
    }
    #chatEmbedInput {
        font-size: 0.85rem;
    }
}

/* Styling for loading and error messages in chat embed */
.chat-embed-messages .message.loading {
    color: #888;
    font-style: italic;
}

.chat-embed-messages .message.message-error {
    background-color: #ffebee; /* Light pink background */
    color: #c62828; /* Dark red text */
    border-left: 3px solid #c62828;
}

/* Class to hide chat embed on /chat page */
.hidden-on-chat-page {
    display: none !important;
}

/* Styling for Chat Embed Controls - moved from chat_embed.php */
.chat-embed-form-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
/* #chatEmbedInput is styled globally or within its own component styles in chat-embed-widget */

.chat-embed-btn {
    padding: 8px;
    font-size: 1.1rem;
    line-height: 1;
    background-color: var(--primary-color);
    color: var(--light-text);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
/* Define fallback variables if not already defined, or ensure they are */
:root {
    --primary-color-dark: #152c6a; /* Example fallback */
    --warning-color-dark: #d39e00; /* Example fallback */
}
.chat-embed-btn:hover {
    background-color: var(--primary-color-dark);
}
.chat-embed-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background-color: #f7f7f7;
    border-top: 1px solid var(--border-color, #e0e0e0); /* Add border top to separate from messages */
}
.chat-embed-mute-label {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-color);
    cursor: pointer;
}
.chat-embed-mute-label input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle; /* Align checkbox better with text */
}
#chatEmbedStopAudioButton {
    background-color: var(--warning-color);
}
#chatEmbedStopAudioButton:hover {
    background-color: var(--warning-color-dark);
}

/* Ensure #markFulfilledSimpleModal is hidden by default unless .show is present */
#markFulfilledSimpleModal:not(.show) {
    display: none !important;
}

.chat-widget-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--primary-color); /* Use site's primary color */
    color: var(--light-text);             /* Use site's light text color for icon */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex; /* Will be made visible by default */
    justify-content: center;
    align-items: center;
    font-size: 28px;
    box-shadow: var(--shadow-md); /* Use site's shadow variable */
    cursor: pointer;
    z-index: 2000; /* Increased z-index */
    transition: transform 0.2s ease-in-out;
}

.chat-widget-fab:hover {
    transform: scale(1.1); /* Example hover effect */
}