/* 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: block;
 }

 :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: 100px;
 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: 0 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: 40px 10px;
 grid-template-columns: repeat(auto-fill, minmax(293px, 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);
 }

 :where(.subs-entry-card,.subs-success-card) .subs-entry-picture {
 border-radius: var(--card-border-radius);
 }

 :where(.subs-entry-card) .subs-entry-picture {
 padding: 7px 7px 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: 24px;
 padding-block: 32px 24px;
 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: 86px;
 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-top: 24px;
 padding-top: 24px;
 border-top: 1px solid var(--card-border-color, currentColor);
 }

 :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 */
 .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: 32px;
 }

 :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;
 }

 :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*/

}

/*СТИЛИ ЗАХАРОВ*/
:root{
 --brand:#069200;
 --white:#FFFFFF;
 --radius:10px;
 --space:16px;
 --space-sm:10px;
}

/* Карточка */
.subs-entry-card{
 background:var(--white);
 border:1px solid rgba(6,146,0,.18);
 border-radius:var(--radius);
}
.subs-entry-inner{ padding:var(--space); }
.subs-entry-body > * + *{ margin-top:var(--space-sm); }

/* Заголовки */
.subs-page-header h2,
.subs-entry-title{
 color:var(--brand);
 margin:0 0 var(--space-sm);
 line-height:1.2;
 font-weight:600;
}

/* Цена */
.price{
 font-size:2.75rem;
 font-weight:600;
 color:var(--brand);
}
.subs-entry-period{ font-size:.9375rem; }

/* Кнопка и ссылки */
.subs-entry-actions button, .button-link{
 display:inline-block;
 padding:.625rem 1rem;
 border-radius:.5rem;
 background:var(--brand);
 color:var(--white);
 text-decoration:none;
 border:1px solid var(--brand);
}
.button-link:focus-visible{
 outline:2px solid var(--brand);
 outline-offset:2px;
}
.subs-entry-body a:not(.button-link){
 color:var(--brand);
 text-decoration:underline;
}

/* Преимущества */
.subs-advantages-list{
 margin:var(--space) 0 0;
 padding:0 0 0 1.1em;
}
.subs-advantages-list li{ margin:.35em 0; }
a:hover {
 color: white;
}