/* default subscriptions module style */
@layer module-subscriptions { @layer base { @keyframes spin {from {transform:rotate(0deg);}to{transform: rotate(360deg);}}
 picture, img:where(:not(.uadm-subi img)) { display: inline; object-fit: contain; } }
 :where(.subs-payments-list) input[type="radio"], .my-subs-base h4, .subs-page-header :is(h1, h2, p), .subs-checkout-success :is(h2, p) { margin: 0; }
 .subs-status-badge { --status-color-1: #7f7f7f; --status-color-2: #4cd46a; --status-color-3: #eb5757; --status-color-4: #ffa916; --status-color-5: #2196f3;
 border-radius: 4px; font-size: 13px; line-height: 18px; max-width: 130px; outline: 1px solid currentColor; padding: 5px 8px; width: fit-content; display: inline-block;
&.color-gray { color: var(--status-color-1); }
&.color-green { color: var(--status-color-2); }
&.color-red { color: var(--status-color-3); }
&.color-orange { color: var(--status-color-4); }
&.color-blue { color: var(--status-color-5); }
} 

 /*module layout style*/
 .subs-page-header { margin-block: 20 32px; }
 .subs-page-header p { margin-top: 8px; }
 .subs-no-entries { text-align: center; margin-top: 80px; }
 .subs-no-entries p { margin-top: 8px; }
 .subs-no-entries .button-link { margin-top: 24px; }
 .subs-entries-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
 /* end module layout style*/

 /* Entry card style*/
 .subs-success-card, .subs-entry-card {
 /*--card-border-color: #eaeaec;*/
 --card-fl-border-color: #507fff; --card-fl-label-bg-color: #e6edff; --card-title-color: #252634; --card-desc-color: #6a6e7b; --card-border-radius: 16px; --card-price-color: #252634; --card-old-price-color: #ff4d4f;
 border: 1px solid var(--card-border-color, currentColor); border-radius: var(--card-border-radius); width: 100%; margin: 20px auto 0px auto; }
 :where(.subs-entry-card,.subs-success-card) .subs-entry-picture { border-radius: var(--card-border-radius); }
 :where(.subs-entry-card) .subs-entry-picture { padding: 5px 5px 0; }
 :where(.subs-entry-card, .subs-success-card) .subs-entry-picture img { border-radius: 12px; width: 100%; height: auto; aspect-ratio: 277 / 210; object-fit: cover; }
 :where(.subs-entry-card) .subs-entry-body { padding-inline: 10px; padding-block: 20px 10px; border-radius: var(--card-border-radius); }
 :where(.subs-entry-card, .subs-success-card) .subs-entry-title { color: var(--card-title-color); word-break: break-all; text-wrap: balance; }
 :where(.subs-entry-card, .subs-success-card) :is(.subs-entry-period,.subs-entry-subtitle) { color: var(--card-desc-color); }
 :where(.subs-entry-card,.subs-success-card) .subs-entry-subtitle { margin-top: 8px; }
 :where(.subs-entry-card) .subs-entry-price-box { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-top: 12px; min-height: 80px; justify-content: end; }
 :where(.subs-entry-card .subs-entry-price-box) .old-price { color: var(--card-old-price-color); }
 :where(.subs-entry-card .subs-entry-price-box) .price { color: var(--card-price-color); }
 :where(.subs-entry-card) .subs-entry-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; margin-top: 20px }
 :where(.subs-entry-card,.subs-success-card) .subs-entry-advantages { margin: 0px; padding-top: 10px; }
 :where(.subs-entry-card,.subs-success-card) .subs-advantages-list { --icon-size: 16px; --icon-bg: #4cd46a; --icon-color: #fff; }
 :where(:where(.subs-entry-card, .subs-success-card) .subs-advantages-list) li:has(+ li) { margin-bottom: 12px; }
 :where(:where(.subs-entry-card, .subs-success-card) .subs-advantages-list) li { display: grid; align-items: center; gap: 6px; grid-template-columns: var(--icon-size) minmax(0, 1fr); }
 :where(:where(.subs-entry-card, .subs-success-card) .subs-advantages-list) .check-marker { width: var(--icon-size); height: var(--icon-size); border-radius: var(--icon-size);
 display: flex; align-items: center; justify-content: center; background-color: var(--icon-bg); }
 :where(:where(.subs-entry-card, .subs-success-card) .subs-advantages-list) .check-marker:before { content: ""; width: 7px; height: 4px; border-bottom: 1px solid var(--icon-color);
 border-left: 1px solid var(--icon-color); transform: rotate(-45deg); translate: 0 -1px; }
 .subs-entry-flagged { position: relative; border-color: var(--card-fl-border-color); }
 :where(.subs-entry-card) .flagged-label { background-color: var(--card-fl-label-bg-color); border-radius: 6px; border: 1px solid var(--card-fl-border-color); color: var(--card-fl-border-color);
 left: 50%; padding: 5px 11px 7px; position: absolute; top: 0; translate: -50% -50%; }
 .subs-success-card { container: subs-success-card / inline-size; }
 :where(.subs-success-card) .subs-entry-inner { padding: 23px; }
 :where(.subs-success-card) .subs-entry-body:has(.subs-entry-picture) { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 164px; grid-template-areas: 'info img'; align-items: start; }
 :where(.subs-success-card) .subs-entry-picture { grid-area: img; }
 :where(.subs-success-card) .subs-entry-info { grid-area: info; }
 :where(.subs-success-card) .price { color: var(--card-title-color); font-weight: 500; margin-top: 12px; }

 @container subs-success-card (width < 450px) { .subs-entry-inner { padding: 16px; }
 .subs-entry-body:has(.subs-entry-picture) { grid-template-columns: 130px minmax(0, 1fr); grid-template-areas: 'img info'; } }
 /* End entry card style*/

 /*subs modal style*/
 .myWinGrid:has(+ .subs-modal) { min-height: 100dvh; }
 body:has(.myWinGrid + .subs-modal) { overflow: hidden; padding-right: var(--scrollbar-width, 0px); }
 :where(.subs-modal) .subs-modal-fluid-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); text-align: center; gap: 16px; margin-top: 24px; }
 :where(.subs-modal) .subs-modal-actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
 :where(.subs-modal) .subs-modal-actions.trigger-right { justify-content: end; }
 :where(.subs-modal) .myWinCont { justify-content: end; }
 :where(.subs-modal) .subs-modal-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; margin-top: 24px; }
 /*subs modal style end */


 /* CHECKOUT PAGE */
 .subs-entry-advantages ul { padding-inline-start: 0px; } 
 .checkout-entries { padding-block: 20px; border-top: 1px solid; border-bottom: 1px solid; }
 .checkout-entry-card { container: checkout-entry-card / inline-size; }
 .checkout-entry-card-inner:where(:has(.checkout-entry-picture)) { display: grid; gap: 24px; grid-template-columns: 198px minmax(0, 1fr); align-items: center; }
 .checkout-entry-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
 .checkout-entry-picture img { display: block; width: 100%; height: auto; aspect-ratio: 198 / 150; object-fit: cover; border-radius: 12px; }
 .pay-method-desc, .checkout-entry-detail { margin-top: 4px; }
 .checkout-entry-name { margin-bottom: 8px; }

 @container checkout-entry-card (width < 512px) { .checkout-entry-card-inner:where(:has(.checkout-entry-picture)) { gap: 16px; grid-template-columns: 140px minmax(0, 1fr); }
 .checkout-entry-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
 .checkout-entry-picture img { aspect-ratio: 140 / 128; }
 .checkout-entry-name { margin-bottom: 4px; } }

 .subs-checkout-section { margin-top: 10px; }
 :where(.subs-checkout-section) .checkout-section-title { margin-bottom: 16px; }
 .subs-payments-list { display: flex; flex-direction: column; gap: 16px; }
 .subs-payments-list li { display: flex; align-items: start; gap: 8px; }
 .subs-checkout-fields { --max-width-value: 480px; display: flex; flex-direction: column; gap: 16px; }
 .subs-checkout-fields .field-input { max-width: var(--max-width-value); }
 .field-block { display: flex; flex-direction: column; gap: 8px; }
 .field-marker-required { color: var(--field-marker-color, #eb5757); padding-left: 4px; }
 .subs-checkout-summary { padding: 24px; border-radius: 16px; }
 .checkout-summary-detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
 .checkout-summary-detail:has(+.checkout-summary-detail) { margin-bottom: 8px; }
 .summary-accent { font-weight: 600; }
 .checkout-summary-action { margin-top: 24px; text-align: right; }
 .subs-checkout-note { margin-top: 24px; }
 .subs-checkout-note p:has(+p) { margin-bottom: 4px; }
 .donate-summary { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 2px dashed lightgray; container: donate-summary / inline-size; }

 .donate-summary-inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "input" "hint"; gap: 8px 16px;
 &:has(.donate-summary-offers) { grid-template-areas: "label label" "input offers" "hint hint"; }
 :where(&) .donate-summary-label { grid-area: label; }
 :where(&) .donate-summary-input { grid-area: input; }
 :where(&) .donate-summary-hint { grid-area: hint; }
 :where(&) .donate-summary-offers { grid-area: offers; display: flex; align-items: center; gap: 8px; }
 @container (width <= 680px) { &:has(.donate-summary-offers) { grid-template-areas: "label" "input" "hint" "offers"; }
 :where(&) .donate-summary-offers { margin-top: 8px; } }
 @container (width < 480px) { :where(&) .donate-summary-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } }
 /* END CHECKOUT PAGE */

 /* CHECKOUT SUCCESS PAGE*/
 .subs-success-container { max-width: 500px; width: 100%; margin: 40px auto 0; }
 .subs-entry-actions a { border: 1px solid #f69321; border-radius: 5px; cursor: pointer; } 
 :where(.subs-success-container) .subs-checkout-success { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; margin-bottom: 24px; text-wrap: balance; }
 :where(.subs-success-container) .subs-success-actions { margin-top: 24px; display: flex; justify-content: center; text-align: center; }
 
 /* END CHECKOUT SUCCESS PAGE*/

 /* MY SUBSCRIPTION PAGE*/
 .subs-my-item { border-top: 1px solid; container: my-subs-item / inline-size; padding-block: 28px; }
 .subs-my-item:last-child { border-bottom: 1px solid; }

 .my-subs-card { align-items: center; color: var(--card-text-color, #6a6e7b); display: grid; gap: 16px 24px;
 grid-template-areas: "base price end status" "act act act act"; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 180px)) minmax(0, 120px); }

 :where(.my-subs-card) .my-subs-base { grid-area: base; }
 :where(.my-subs-card) .my-subs-price { grid-area: price; }
 :where(.my-subs-card) .my-subs-end { grid-area: end; }
 :where(.my-subs-card) .my-subs-status { grid-area: status; display: flex; justify-content: end; }
 :where(.my-subs-card) .my-subs-actions { align-items: center; display: flex; gap: 8px; justify-content: start; grid-area: act; }
 :where(.my-subs-card) :is(.price, h4) { color: var(--card-title-color); }
 :where(.my-subs-card) .price { font-weight: 500; }

 @container my-subs-item (width > 800px) { .my-subs-actions a:has(+a) { padding-right: 8px; border-right: 1px solid var(--card-border-color, #9a9da7); }
 .my-subs-end { color: var(--card-title-color); font-weight: 500; } }

 @container my-subs-item (width <= 800px) {
 .my-subs-card { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; grid-template-areas:"base status""end status""price status""act act"; align-items: start; }
 .my-subs-actions { justify-content: space-between; margin-top: 20px; }
 .my-subs-base h4 { margin-bottom: 8px; } }
 /* END MY SUBSCRIPTION PAGE*/

/* SUBSCRIPTION PAYMENT HISTORY*/
 .subs-payments-history { container: payments-history / inline-size; }
 .payments-header { display: none; color: var(--hint-color,inherit); }
 .payment-item { border-bottom: 1px solid; }

 @container payments-history (width > 800px) {
 .subs-payments-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; }
 .payments-header { padding: 16px; }
 .payment-item { padding: 24px 16px; }
 .payments-header, .payment-item { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; gap: inherit; }
 .cell-name { font-weight: 500; } }
 
 @container payments-history (width <= 800px) { .payment-item { padding: 20px 0; }
 :where(.payments-header) + .payment-item{ border-top: 1px solid; }
 .payment-cell[data-label]:before { content: attr(data-label); }
 .cell-name { grid-area: name; font-weight: 600; padding-bottom: 4px; }
 .cell-date { grid-area: date; color: var(--hint-color, inherit); }
 .cell-price { grid-area: price; text-align: right; font-weight: 600; }
 .cell-type { grid-area: type; color: var(--hint-color, inherit); }
 .cell-status { grid-area: status; text-align: right; padding-top: 12px; }
 .payment-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; grid-template-areas:"name price""date status""type status"; } }
/* END SUBSCRIPTION PAYMENT HISTORY*/