/* === prayer.css — standalone Prayer Wall styles ========================= */

:root{
  --brand:#1e0082;
  --brand-1:#4f46e5;
  --brand-2:#7c3aed;

  --text:#1c1c1c;
  --muted:#6c757d;
  --line:#e8e8ee;

  --card:#fff;

  --btn-warning-start:#f59e0b;
  --btn-warning-end:#d97706;
  --btn-warning-hover-start:#eab308;
  --btn-warning-hover-end:#ca8a04;

  /* card height used for prayer tiles */
  --prayer-tile-h:210px;

  /* ===== Header tokens (themeable) ===== */
  --header-bg-start: rgba(10, 55, 35, 0.92); /* forest default */
  --header-bg-end:   rgba(10, 55, 35, 0.72);
  --header-link:     rgba(255,255,255,.92);
  --header-link-hover:#ffffff;

  --header-pad-y: .85rem;  /* makes header taller */
  --brand-size: 1.28rem;   /* church name size */
  --tagline-size: .78rem;  /* tagline size */
}

@media (min-width:576px){ :root{ --prayer-tile-h:220px; } }
@media (min-width:992px){ :root{ --prayer-tile-h:230px; } }

/* Theme presets (churchy) */
body.theme-royal{
  --brand:#2a0a7a;
  --brand-1:#4f46e5;
  --brand-2:#7c3aed;
  --text:#14162b;

  --header-bg-start: rgba(42, 10, 122, 0.92);
  --header-bg-end:   rgba(42, 10, 122, 0.72);
}

body.theme-forest{
  --brand:#0f3d2e;
  --brand-1:#1f6f54;
  --brand-2:#2f8f6a;
  --text:#0c1a12;

  --header-bg-start: rgba(10, 55, 35, 0.92);
  --header-bg-end:   rgba(10, 55, 35, 0.72);
}

body.theme-burgundy{
  --brand:#5b1020;
  --brand-1:#7a1b2f;
  --brand-2:#a12a45;
  --text:#1c0f14;

  --header-bg-start: rgba(91, 16, 32, 0.92);
  --header-bg-end:   rgba(91, 16, 32, 0.72);
}

body.theme-navy{
  --brand:#0b1f3a;
  --brand-1:#163a6b;
  --brand-2:#2a5aa6;
  --text:#0b1220;

  --header-bg-start: rgba(11, 31, 58, 0.92);
  --header-bg-end:   rgba(11, 31, 58, 0.72);
}

/* 2) BASE / GLOBAL */

*{ box-sizing:border-box; }
html,body{ height:100%; }
html, body{
  width:100%;
  overflow-x:hidden;
}

img, video{
  max-width:100%;
  height:auto;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
  color:var(--text);
  background:#faf8f8;
}
input, select, textarea{
  font-size:16px;
}
a{ color:var(--brand-1); text-decoration:none; }
a:hover{ text-decoration:underline; }

.list-group-item{ padding-top:.6rem; padding-bottom:.6rem; }

/* --------------------------------------------------------------------- */
/* 3) HEADER / NAVBAR (sticky glass + air waves)                           */
/* --------------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1030;

  /* fallback if glass class removed */
  background: linear-gradient(90deg, var(--brand,#1e0082), var(--brand-1));
  color:#fff;

  overflow: visible;
}

/* Taller header */
.site-header.navbar{
  padding-top: var(--header-pad-y);
  padding-bottom: var(--header-pad-y);
}

/* Brand + tagline sizing */
.site-header .navbar-brand{
  color:#fff;
  line-height:1.05;
  font-size: var(--brand-size);
}

.site-header .navbar-brand small{
  font-size: var(--tagline-size);
  opacity:.86;
}

/* Nav links */
.site-header .nav-link{
  color: var(--header-link);
  font-weight:600;
  padding:.45rem .65rem;
  border-radius:999px;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
@media (max-width: 991.98px){
  .site-header .navbar-nav{
    padding-top:.75rem;
  }

  .site-header .nav-link{
    display:block;
    padding:.65rem .75rem;
  }
}

.site-header .nav-link:hover{
  color: var(--header-link-hover);
  background: rgba(255,255,255,.12);
  text-decoration:none;
  transform: translateY(-1px);
}

.site-header.site-header--glass{
  background: linear-gradient(
    90deg,
    var(--header-bg-start),
    var(--header-bg-end)
  ) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.site-header-waves{
  position:absolute;
  inset:0;
  pointer-events:none;

  /* breath / fog wisps: soft, random, not water */
  background:
    radial-gradient(140% 70% at 12% 18%, rgba(255,255,255,.14), rgba(255,255,255,0) 62%),
    radial-gradient(110% 60% at 52%  6%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    radial-gradient(130% 75% at 88% 28%, rgba(255,255,255,.12), rgba(255,255,255,0) 66%),
    radial-gradient(90%  55% at 34% 46%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);

  filter: blur(22px);
  opacity: .55;
  mix-blend-mode: screen;
}

/* 4) TABS (Active / Answered)                                             */
/* --------------------------------------------------------------------- */
.prayer-tabs{
  /* Keep the Active/Answered tabs pinned under the navbar */
  position: sticky;
  top: 64px;            /* <-- adjust if your navbar is taller/shorter */
  z-index: 60;

  display:flex;
  gap:10px;
  justify-content:center;

  width: fit-content;
  margin: 0 auto 18px;

  /* gives a nice readable “sticky” look over scrolling content */
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
}

.prayer-tab{
  padding:.55rem .95rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}

.prayer-tab:hover{
  transform: translateY(-1px);
  text-decoration:none;
}

.prayer-tab.active{
  background: rgba(255,255,255,.88);
  border-color: rgba(0,0,0,.16);
}

/* --------------------------------------------------------------------- */
/* 5) PRAYER CARD GRID + CARD LOOK                                         */
/* --------------------------------------------------------------------- */
.prayer-tile-wall{ margin: 1.5rem 0; }

/* Base "glass" prayer card */
.card.prayer-tile{
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(0,0,0,.08);
  border-left: 4px solid var(--brand-2, #1f5131);

  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);

  padding: .75rem .9rem;
  height: var(--prayer-tile-h);
  display:flex;
  flex-direction:column;

  transition: transform .15s ease, box-shadow .15s ease;
}

.card.prayer-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.09);
}

/* Urgent / Answered tint states (still glass) */
.card.prayer-tile.prayer-urgent{
  background: rgba(220,53,69,.10);
  border-left-color: #dc3545;
}

.card.prayer-tile.prayer-answered{
  background: rgba(25,135,84,.10);
  border-left-color: #198754;
}
/* Make cards a positioning container for the bottom-right menu */
.card.prayer-tile{
  position: relative;
}

/* Card actions menu (single tiny icon) */
.prayer-tile { position: relative; }

.card-actions{
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
}

.card-actions-btn{
  width: 34px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.card-actions-btn:hover{
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.16);
}

/* Tiny helper text */
.prayer-note{ font-size:1rem; color:var(--muted); font-weight:600; letter-spacing:.2px; }

/* --------------------------------------------------------------------- */
/* 6) INLINE PRAISE HEADER (scrollable) INSIDE ANSWERED CARDS              */
/* --------------------------------------------------------------------- */
.praise-inline{
  margin-bottom: .6rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.praise-inline-head{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .65rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(47,143,106,.10); /* soft brand tint */
}

.praise-inline-icon{ font-size: 1.05rem; line-height: 1; }

.praise-inline-title{
  font-weight: 700;
  letter-spacing: .2px;
}

.praise-inline-box{
  max-height: 88px;  /* scrollbar height */
  overflow-y: auto;
  padding: .55rem .65rem;
  font-size: .95rem;
  line-height: 1.25rem;
  word-break: break-word;
}

/* Scrollbar polish (optional) */
.praise-inline-box::-webkit-scrollbar{ width: 10px; }
.praise-inline-box::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.6);
}
.reaction-pill-wrap{
  position: relative;
  display: inline-block;
}

.reaction-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.32rem .6rem;
  border:1px solid #e6e9f2;
  border-radius:999px;
  background:#fff;
  font-weight:700;
  line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  cursor:pointer;
}

.reaction-pill:hover{
  background:#f7fbff;
  border-color:#dfe6ff;
}

.reaction-pill .rx-label{
  opacity:.75;
  font-weight:500;
}

.reaction-pill .rx-total{
  font-weight:500;
  padding-left:.1rem;
}

.reaction-pill .rx-caret{
  opacity:.55;
  font-weight:500;
  margin-left:.1rem;
}

.rx-flyout{
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);

  /* Let content decide width */
  width: max-content;
  min-width: 220px;
  max-width: 420px;

  padding:.55rem .65rem;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  display:none;
  z-index: 10002;
}
/* Mobile: center the flyout so it can't go off-screen */
@media (max-width: 576px){
  .reaction-pill-wrap .rx-flyout{
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;

    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);

    max-height: calc(100vh - 160px);
    overflow: auto;

    /* keep your glass look */
    margin: 0;
  }
}
/* Reaction input row (clean + responsive) */
.rx-react-row{
  display:flex;
  gap:.45rem;
  margin-bottom:.55rem;
  flex-wrap:wrap;
  align-items:center;
}

/* Emoji-only buttons */
.rx-react-btn{
  position:relative;

  width:38px;
  height:38px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);

  cursor:pointer;
  transition: all .12s ease;
}

.rx-react-btn:hover{
  background:#f7fbff;
  border-color:#dfe6ff;
}

/* Selected reaction (shows what THIS user chose) */
.rx-react-btn.is-selected{
  background: rgba(79,70,229,0.14);
  border-color: rgba(79,70,229,0.55);
  box-shadow: 0 0 0 2px rgba(79,70,229,0.18);
  transform: translateY(-1px);
}

/* Selected reaction (what the user used) */
.rx-react-btn.is-selected{
  background: rgba(79, 70, 229, .12);     /* uses your brand vibe */
  border-color: rgba(79, 70, 229, .45);
  box-shadow: 0 6px 16px rgba(79, 70, 229, .18);
  transform: translateY(-1px);
}

.rx-react-btn.is-selected .rx-emoji{
  transform: scale(1.06);
}
.rx-emoji{
  font-size: .95rem;
  line-height: 1;
}

/* Tooltip bubble (does not affect layout) */
.rx-react-btn::after{
  content: attr(data-label);
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);

  display:none;
  padding:.28rem .5rem;
  border-radius:999px;

  background: rgba(20,20,24,.92);
  color:#fff;

  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  pointer-events:none;
  z-index: 10003;
}

/* Little pointer */
.rx-react-btn::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(100% + 4px);

  display:none;
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid rgba(20,20,24,.92);
  pointer-events:none;
  z-index: 10003;
}

/* Mobile: allow JS to toggle tooltip briefly */
.rx-react-btn.show-help::after,
.rx-react-btn.show-help::before{
  display:block;
}

/* “Open” class is for touch/click pinning */
.reaction-pill-wrap.open .rx-flyout{
  display:block;
}

.rx-row{
  display:flex;
  gap:.5rem;
  align-items:flex-start;
  margin-bottom:.35rem;
}

.rx-row:last-child{ margin-bottom:0; }

.rx-e{ width: 1.4rem; }
.rx-n{
  width: 1.6rem;
  font-weight:500;
  opacity:.8;
}

.rx-users{
  flex:1;
  min-width:0;
  white-space: nowrap;
}
.rx-user{
  font-weight: 500;
  text-decoration: none;
}
.rx-user:hover{
  text-decoration: underline;
}
.rx-more{
  opacity:.7;
  font-weight:500;
  white-space: nowrap;
}

/* --------------------------------------------------------------------- */
/* 8) PRAISE REPORTS LIST (optional block on Active page)                  */
/* --------------------------------------------------------------------- */
.praise-wrap{ border-radius:16px; }

.praise-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:14px 14px 12px;
  border-radius:16px 16px 0 0;

  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border:1px solid rgba(0,0,0,.06);
  border-bottom:0;

  position:relative;
  overflow:hidden;
}

.praise-header::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background: var(--brand-2, #2f8f6a);
}

.praise-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.praise-icon{ font-size:1.3rem; line-height:1; }

.praise-h{ font-weight:700; letter-spacing:.2px; }

.praise-sub{
  font-size:.92rem;
  opacity:.75;
  margin-top:2px;
}

.praise-badge{
  background: var(--brand-2, #2f8f6a);
  color:#fff;
  border:0;
  padding:.35rem .55rem;
  border-radius:999px;
}

/* Scrollable list wrapper */
.answered-list-box{
  background:#fff;
  border:1px solid #e9ecef;
  border-top:0;
  border-radius:0 0 16px 16px;

  box-shadow:0 2px 8px rgba(0,0,0,.04);

  max-height:320px;
  overflow-y:auto;
  padding:0;
}

/* List items look like “testimony cards” */
.praise-item{
  padding:14px 14px;
  background: rgba(255,255,255,.92);
}

.praise-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
}

.praise-main{ flex:1; min-width:0; }

.praise-from{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.praise-dot{
  width:9px; height:9px;
  border-radius:999px;
  background: var(--brand-2, #2f8f6a);
  flex:0 0 auto;
}

.praise-user{ font-size:.92rem; opacity:.7; }

.praise-block{
  border-left:3px solid rgba(0,0,0,.08);
  padding-left:10px;
  margin-top:10px;
}

.praise-label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.7;
  margin-bottom:2px;
}

.praise-text{ word-break:break-word; }

.praise-answer{
  border-left-color: var(--brand-2, #2f8f6a);
  background: rgba(47,143,106,.08);
  border-radius:10px;
  padding:10px 10px 10px 12px;
}

.praise-meta{
  flex:0 0 auto;
  text-align:right;
  font-size:.85rem;
  opacity:.75;
  white-space:nowrap;
}

.praise-meta-line{ font-weight:700; opacity:.8; }

.praise-meta-date{
  margin-top:2px;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* --------------------------------------------------------------------- */
/* 9) BUTTONS                                                             */
/* --------------------------------------------------------------------- */
.btn-primary{
  background: linear-gradient(135deg, var(--brand-2), var(--brand-1));
  border:none;
  color: rgba(255,255,255,.95);
  font-weight:700;
}
.btn-primary:hover{ filter: brightness(.96); }

.btn-warning{
  background: linear-gradient(90deg, var(--btn-warning-start), var(--btn-warning-end));
  border:none;
  color:#020202 !important;
  font-weight:700;
}
.btn-warning:hover{
  background: linear-gradient(90deg, var(--btn-warning-hover-start), var(--btn-warning-hover-end));
  filter: brightness(.98);
}

/* Report button styling (kept “blue”, with matching hover) */
.btn.btn-report{
  background-color: #357bdc;
  border-color: rgba(0,0,0,.25);
  color:#fff;
  font-weight:700;
}
.btn.btn-report:hover,
.btn.btn-report:focus{
  background-color: #285ea8;
  border-color: #285ea8;
  color:#fff;
}

/* --------------------------------------------------------------------- */
/* 10) AVATARS                                                            */
/* --------------------------------------------------------------------- */
.prayer-avatar-sm{
  width:32px;
  height:32px;
  border-radius:6px;   /* slightly rounded square */
  object-fit:cover;
  display:block;
}

.prayer-avatar-fallback{
  width:32px;
  height:32px;
  border-radius:6px;
  background: var(--brand-2, #495057);
  color:#fff;
  font-size:0.8rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
}

/* --------------------------------------------------------------------- */
/* 11) PROFILE PHOTO CROPPER (edit profile page)                           */
/* --------------------------------------------------------------------- */
.crop-preview-wrapper{
  margin-top:0.5rem;
  display:flex;
  justify-content:flex-start;
}

#crop-box{
  width:220px;
  height:220px;
  border-radius:12px;
  overflow:hidden;
  background:#f8f9fa;
  border:1px solid rgba(0,0,0,0.12);
  position:relative;
}

#crop-box img{
  max-width:none;
  position:absolute;
  top:0;
  left:0;
  transform-origin:0 0;
}

/* --------------------------------------------------------------------- */
/* 12) HERO HEADER (if you’re using it somewhere)                          */
/* --------------------------------------------------------------------- */
.prayer-hero{
  background: linear-gradient(135deg, var(--brand-2, #1f5131), var(--brand-1, #3b7b4c));
  color:#fff;
  border-radius:1rem;
  padding:1.75rem 1.5rem;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.prayer-hero-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem;
}

.prayer-hero-text{ max-width:600px; }

.prayer-hero-kicker{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-weight:700;
  opacity:0.85;
}

.prayer-hero-title{
  font-size:1.75rem;
  margin:0.2rem 0 0.4rem;
  font-weight:700;
}

.prayer-hero-sub{
  margin:0;
  font-size:0.95rem;
  opacity:0.9;
}

.prayer-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.6rem 0.9rem;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  font-size:0.85rem;
  white-space:nowrap;
}

.hero-icon{ font-size:1.25rem; }
.hero-label{ font-weight:600; }

/* Mobile adjustments */
@media (max-width: 767.98px){
  .prayer-hero{ padding:1.25rem 1rem; }
  .prayer-hero-inner{ flex-direction:column; align-items:flex-start; }
  .prayer-hero-title{ font-size:1.4rem; }
  .prayer-hero-badge{ margin-top:0.5rem; }
}


/* make sure cards can stack above each other */
.card.prayer-tile{
  overflow: visible;
  z-index: 1;
}
.modal{
  max-height: calc(100dvh - 20px);
}

.modal-body{
  overflow-y:auto;
}
/* when anything inside the card is focused (like clicking the "…" button), lift the whole card */
.card.prayer-tile:focus-within{
  z-index: 9998;
}

/* also lift the dropdown itself when open */
.card-actions.dropdown.show{
  z-index: 9999;
}
.card-actions.dropdown.show .dropdown-menu{
  z-index: 10000;
}

.site-header--glass{
  /* Intentionally empty: glass background is defined in .site-header.site-header--glass above */
}
/* ===== Emoji row layout (no duplicate rx-react-btn definitions) ===== */
.rx-bar{ position: relative; }

.rx-emoji-row{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-wrap:wrap;
}

/* total number + flyout wrapper */
.rx-total-wrap{
  display:inline-block;
  position:relative;
}

.rx-total-pill{
  margin-left:.35rem;
  padding:.25rem .55rem;
  font-size:.75rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#f3f3f3;
  cursor:pointer;
  transition:all .15s ease;
}

.rx-total-pill:hover{
  background:#e6e6e6;
}
@media (max-width: 576px){
  .card.prayer-tile{
    height:auto;
    min-height:180px;
  }
}

/* --------------------------------------------------------------------- */
/* 13) MOBILE PILOT — member-first touch usability (360–430px)             */
/* --------------------------------------------------------------------- */
@media (max-width: 575.98px){
  main.container{
    padding-left: 12px;
    padding-right: 12px;
    max-width: 100%;
  }

  .site-header .navbar > .container{
    padding-left: 12px;
    padding-right: 12px;
  }

  .site-header .navbar-brand{
    max-width: calc(100vw - 4.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.1rem;
  }

  .site-header .navbar-brand small{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .site-header .navbar-toggler{
    min-width: 44px;
    min-height: 44px;
    padding: 0.4rem 0.55rem;
  }

  .site-header .nav-link,
  .site-header .navbar-nav button.nav-link{
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .prayer-tabs{
    width: calc(100% - 4px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    top: 56px;
    padding: 6px 8px;
    border-radius: 12px;
  }

  .prayer-tab{
    flex: 1 1 calc(33.333% - 6px);
    min-width: 5.5rem;
    padding: 0.5rem 0.5rem;
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.2;
  }

  .prayer-tile-wall > [class*="col-"]{
    flex: 0 0 100%;
    max-width: 100%;
  }

  .card.prayer-tile .card-body{
    padding-bottom: 2.75rem;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .card.prayer-tile .card-body > p{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .card.prayer-tile .card-body > .d-flex.justify-content-between.align-items-start{
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .card.prayer-tile .card-body > .d-flex.justify-content-between .d-flex.gap-1{
    flex-wrap: wrap;
  }

  .rx-react-btn{
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .rx-emoji{
    font-size: 1.1rem;
  }

  .rx-total-pill,
  .rx-answered-detail-btn{
    min-height: 40px;
    padding: 0.35rem 0.6rem;
  }

  .rx-answered-detail-btn{
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
    text-align: left;
    line-height: 1.3;
  }

  .card-actions{
    right: 8px;
    bottom: 8px;
  }

  .card-actions-btn{
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .card-actions .dropdown-menu{
    min-width: 11rem;
  }

  .card-actions .dropdown-item{
    padding: 0.65rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .reaction-pill-wrap .rx-flyout,
  .rx-answered-detail-wrap .rx-flyout{
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(70vh, calc(100dvh - 120px));
    overflow: auto;
    margin: 0;
  }

  .rx-flyout .rx-users{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .prayer-modal-mobile{
    margin: 0.5rem auto;
    max-width: calc(100% - 1rem);
    width: calc(100% - 1rem);
  }

  .modal.prayer-modal-mobile,
  .modal .prayer-modal-mobile{
    max-height: calc(100dvh - 1rem);
  }

  .modal-body textarea.form-control{
    min-height: 8rem;
  }

  .btn-primary.w-100,
  main .text-center.mb-4 > .btn-primary{
    min-height: 44px;
    width: 100%;
    max-width: 100%;
  }

  #crop-box{
    width: min(220px, 100%);
    max-width: 100%;
  }

  .crop-preview-wrapper{
    max-width: 100%;
  }

  .archive-mobile-card .btn{
    min-height: 44px;
  }
}

@media (max-width: 767.98px){
  h3.mb-3,
  .card.mb-4 .card-header{
    font-size: 1.1rem;
  }

  .row > .col-lg-6{
    flex: 0 0 100%;
    max-width: 100%;
  }

  .card-body[style*="max-height"]{
    max-height: none !important;
    overflow-y: visible !important;
  }

  .list-group-item .d-flex.justify-content-between{
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  .list-group-item .d-flex.flex-column.gap-1.ms-2{
    margin-left: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  .list-group-item .btn-sm{
    min-height: 40px;
    flex: 1 1 auto;
  }

  .table-responsive{
    -webkit-overflow-scrolling: touch;
  }

  .card.mb-4 form .btn{
    min-height: 44px;
  }

  .alert.d-flex.flex-wrap{
    flex-direction: column;
    align-items: flex-start !important;
  }
}