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

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

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

}