/* Update 4: subscriptions detail matches approved Savings sheet and Loan tile design.
   UI-only: no payment, account, date or financial calculation changes. */

/* Payment detail tiles should sit on the frosted sheet, not on a second white
   rectangle/card. The grid remains readable on light and dark themes. */
body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sb-detail-modal .u4sb-setup.u4sb-setup-modern {
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:6px 2px 12px!important;
  margin-bottom:10px!important;
}
body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sb-detail-modal .u4sb-setup-modern .detail-list {
  background:none!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
}
body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sb-detail-modal .u4sb-setup-modern .subscription-section-head-v75 {
  margin:0 0 13px!important;
  padding:0 4px!important;
}
body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sb-detail-modal .u4sb-setup-modern .detail-line.u4sb-setup-tile {
  background:color-mix(in srgb,#b8e6d1 17%,var(--card,#fff))!important;
  border:1px solid color-mix(in srgb,#087b59 12%,transparent)!important;
  border-radius:17px!important;
}
@media(max-width:540px) {
  /* Previous sheet was full width but its inset content was noticeably narrower
     than Savings. Bring the hero, insight, and tiles to the same content gutters. */
  body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sb-detail-modal {
    box-sizing:border-box!important;
    width:calc(100vw - 18px)!important;
    max-width:calc(100vw - 18px)!important;
    min-width:0!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sb-detail-modal .u4sb-detail-scroll {
    padding-left:1px!important;
    padding-right:1px!important;
  }
  body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sb-detail-modal .u4sb-detail-head {
    padding-inline:4px!important;
  }
}
html[data-theme="dark"] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sb-detail-modal .u4sb-setup-modern .detail-line.u4sb-setup-tile {
  background:#203b34!important;
  border-color:rgba(159,222,190,.17)!important;
}