/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */


 .prayer-card {
   max-width: 700px;
   margin: 20px auto;
   padding: 30px 40px;
   background: #f7efe6;
   /* soft beige */
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
   font-family: 'Georgia', serif;
   color: #5a3825;
 }

 /* Header */
 .prayer-header {
   text-align: center;
   font-size: 2rem;
   font-weight: bold;
   color: #6b4c3b;
   margin-bottom: 20px;
 }

 /* Title */
 .prayer-title {
   font-size: 1.75rem;
   font-weight: bold;
   margin-bottom: 12px;
   color: #6b4c3b;
 }

 /* Meta info */
 .prayer-meta {
   font-size: 0.9rem;
   color: #8b5e3c;
   margin-bottom: 15px;
   border-bottom: 1px solid #d8bca6;
   padding-bottom: 8px;
 }

 /* Body and extract */
 .prayer-body p,
 .prayer-extract p {
   font-size: 1rem;
   line-height: 1.6;
 }

 .prayer-extract h3 {
   font-size: 1.2rem;
   margin-bottom: 6px;
   color: #7a5239;
   margin-top: 15px;
 }

 /* Actions */
 .prayer-actions {
   margin-top: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }

 .btn-small {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   font-size: 16px;
   border-radius: 50%;
   color: #fff;
   border: none;
   cursor: pointer;
   transition: background 0.2s;
 }

 .btn-small i {
   pointer-events: none;
 }

 .btn-small.edit {
   background-color: #9b7b5a;
 }

 .btn-small.edit:hover {
   background-color: #8b6a48;
 }

 .btn-small.destroy {
   background-color: #c94c3c;
 }

 .btn-small.destroy:hover {
   background-color: #b23d2f;
 }

 .btn-small.share {
   background-color: #8b5e3c;
 }

 .btn-small.share:hover {
   background-color: #7a5239;
 }

 /* Promo Section */
 .app-promo {
   margin-top: 25px;
   text-align: center;
   padding: 20px;
   background-color: #f0e1d6;
   border-radius: 10px;
   font-size: 1rem;
   color: #5a3825;
 }

 .btn-download {
   display: inline-block;
   margin-top: 12px;
   padding: 10px 20px;
   background-color: #8b5e3c;
   color: #fff;
   font-weight: bold;
   border-radius: 6px;
   text-decoration: none;
   transition: background 0.2s;
 }

 .btn-download:hover {
   background-color: #7a5239;
 }

 /* Responsive adjustments */
 @media (max-width: 600px) {
   .prayer-card {
     padding: 20px 15px;
   }

   .prayer-header {
     font-size: 1.75rem;
   }

   .prayer-title {
     font-size: 1.5rem;
   }

   .prayer-meta {
     font-size: 0.85rem;
   }

   .prayer-body p,
   .prayer-extract p {
     font-size: 0.95rem;
   }

   .btn-small {
     width: 36px;
     height: 36px;
     font-size: 14px;
   }

   .btn-download {
     padding: 8px 16px;
     font-size: 0.95rem;
   }
 }