h3 { font-size: 1.25rem; }
.page-login, main {
	background: #F5F7F9;
}
.page-login header .container { margin: 0 auto; }
.page-login .topnav nav#main_nav .mainnav_options { display: none; }
.page-login main {
	display: grid;
	justify-items: center;
	align-items: center;
}
.page-login .box {
	background: #ffffff;
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 0.05);
	padding: 2rem;
	max-width: calc(480px - 4rem);
	width: calc(100% - 4rem);
    margin: 2rem auto;
}
.page-login .box h1 {
	margin: 0 auto;
	font-size: 2rem;
	text-align: center;
}
.page-login .box form, .page-login .box .form-actions { 
    display: flex; 
    flex-flow: column; 
	gap: 1rem;
}
.page-login .box .headlines p { 
	text-align: center;
	padding-bottom: 1rem;
}
.page-login .box .form-actions button { width: 100%; }
.subscription .form-actions { padding: 1rem 0; }

.page-manage header .container { margin-bottom: 2.5rem; }
main.manage h1 { margin: 0; }
main.manage .container { 
	display: grid; 
	gap: 1.5rem;
	padding-top: 2rem;
	padding-bottom: 3rem;
}
.card.subscription-info ul {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin: 0;
	padding: 0.5rem 0 0 0;
	list-style: none;
	justify-content: space-between;
}
.card.subscription-info ul li { width: calc(20% - 2rem); }
.card.subscription-info ul li p { 
	font-weight: bold; 
	margin: 0.35rem 0 0 0;
	color: #000000;
}
.card.subscription-info ul li span {
	color: rgba(88,88,88,0.75);
	font-size: 0.875rem;
}
.card.alert {
	box-shadow: none; 
	color: rgba(88,88,88,0.75);
}
.card.warning {
	background: #FEF9F0;
	border: 1px solid #F0B02F;
}
.card.alert h4 {
	position: relative;
	padding-left: 0.85rem;
}
.card.alert h4::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 0.5rem;
	position: absolute;
	left: 0;
	top: 0.35rem;
}
.card.warning h4::before { background-color: #F0B02F; }
.card.success h4::before { background-color: #00b259; }
.card.info h4::before { background-color: #7cc8e8; }
.card.alert p {
	margin: 0.5rem 0 0 0;
	font-size: 0.875rem;
}

.tabs {
	background: #F5F7F9;
	border-radius: 0.25rem;
	font-weight: 600;
	font-size: 0.875rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-align: center
}
.tab {
	text-decoration: none;
	color: #000000;
	margin: 0.25rem;
	padding: 0.5rem;
	display: inline-grid;
}
.tab.active {
	background: white;
	border-radius: 0.25rem;
	box-shadow: 0 1px 1px rgba(0,0,0,0.075);
}

.tab-panel.hidden { display: none; }
.tab-panel {
	margin-top: 1rem;
	border: 1px solid #DCDCDC;
	border-radius: 0.5rem;
	padding: 1rem;
}
.tab-panel#tab-pages {
	padding: 0;
	border: 0;
	display: grid;
	gap: 1rem;
}
.page-box {
	border: 1px solid #DCDCDC;
	border-radius: 0.5rem;
	padding: 1rem;
	overflow: hidden;
}
.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
.page-header h3 { 
	margin: 0; 
	font-size: 1.25rem; 
	font-weight: 600;
}
.page-content { display: none; }
.page-box.open .page-content { 
	display: grid; 
	gap: 1rem;
}

/* стрелката сочи надолу, когато е отворено; надясно – когато е затворено */
.page-box .toggle-indicator { transform: rotate(-180deg); }
.page-box.open .toggle-indicator { transform: rotate(0deg); }

.hidden { display: none!important; }

.grid-2 { 
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}
.card.user-profile { position: relative; }
.card.user-profile #deleteForm { 
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

  .dropzone .dz-preview .dz-image {
	width: 120px;
	height: 107px;
	border-radius: 8px;
	overflow: hidden;
  }

  .dropzone .dz-preview .dz-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;   /* crop по рамката */
	object-position: center;
	display: block;
  }
  .dropzone.dz-page, .dropzone.dz-docs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: .75rem;
	padding: .5rem;
	border: 2px dashed #d0d7de;
	border-radius: 10px;
	background: #fafbfc;
  }
  .dropzone .dz-message {
	grid-column: 1 / -1; /* съобщението да заема цял ред */
	text-align: center;
	color: #6a737d;
	padding: .75rem 0;
}
.dz-disabled .dz-preview {
	opacity: 0.6;
	filter: grayscale(1);
	pointer-events: none;
}
.dz-disabled .dz-remove { display: none !important; }
.plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}
.plan-option {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1rem;
	text-align: center;
	transition: 0.2s;
}
.plan-option .selected { position: relative; }
.plan-option .selected::before {
	content: "";
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	bottom: -0.5rem;
	left: -0.5rem;
	background: rgba(79, 19, 192, 0.05);
	border: 1px solid rgba(79, 19, 192, 0.25);
	border-radius: 0.5rem;
}
.form-field .muted { display: block; }
.form-actions { padding: 1.5rem 0; }

.info-box {
	background: rgba(79, 19, 192, 0.02);
	border: 1px solid rgba(79, 19, 192, 0.25);
	border-radius: 0.5rem;
	padding: 1rem;
	margin: 0.75rem auto;
}
.info-box p { margin: 0; }
.info-box ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	padding: 0;
	margin-bottom: 0;
	list-style: none;
	font-size: 0.875rem;
	color: rgba(88, 88, 88, 0.75);
}

.upgrade-box ul {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1.5rem 0;
	padding-left: 0;
	padding-top: 0.25rem;
	list-style: none;
}
.upgrade-box ul li {
	text-align: left;
	font-size: 0.875rem;
	color: rgba(88,88,88,0.75);
	background: url("../img/icon-checkmark.svg") no-repeat left top;
	min-height: 1rem;
	padding-left: 1.75rem;
}
.plan-actions { 
	display: flex; 
	flex-wrap: wrap;
	gap: 0.75rem; 
	align-items: baseline; 
	text-align: left;
}
.plan-actions .option-yearly { 
	display: flex; 
	gap: 0.5rem;
	align-items: center;
}
.plan-option h4 {
	margin: 0 0 0.75rem 0;
	font-family: "Inter", sans-serif;
	font-size: 1.25rem;
	font-weight: bold;
	color: #1A1A1A;
	text-align: left;
}
.plan-option .price {
	text-align: left;
	margin: 0;
	font-size: 1.25rem;
	color: #1a1a1a;
}
.price-options {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 3rem;
}
.price button { 
	display: block;
	margin-top: 0.75rem;
}
.plan-option .price .amount { 
	font-size: 1.5rem; 
	font-weight: bold;
}
.plan-option .price .currency { font-weight: bold; }
.price .additional_currency, .price .period { 
	opacity: 0.5; 
	font-size: 1.25rem; 
}
.support-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1rem auto;
}
.support-grid .option {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1rem;
	text-align: center;
	display: grid;
	width: 100%;
	justify-items: center;
	gap: 1rem;
}
.uploader { 
	max-width: 100%; 
	overflow: hidden;
}

@media screen and (max-width: 720px) {
	.info-box ul { grid-template-columns: 1fr; }
	.price-options { gap: 1.75rem; }
	.plan-option .price { width: 100%; }
	.form-actions.two-btns > * { flex: 1; /* да делят пространството поравно, когато са на един ред */ }
	.form-actions.two-btns button { width: 100%; }
	.card.subscription-info ul { 
		display: grid; 
		gap: 1rem; 
		grid-template-columns: repeat(3, 1fr); 
	}
	.card.subscription-info ul li { width: 100%; }
}
@media (max-width: 600px) {
	.form-actions.two-btns > * {
		flex: 1 1 100%;
	}
	.tab { font-size: 0.7rem; text-transform: uppercase; }
	.grid-2 { grid-template-columns: 1fr; }
	.card.subscription-info ul { grid-template-columns: 1fr 1fr; }
	.page-login main { padding: 0 1rem; }
}
@media (max-width: 420px) { 
	.form-actions > * { flex: 1 1 100%; }
	.form-actions button { width: 100%; }
	.card.user-profile #deleteForm { position: unset; }
	.card.user-profile #deleteForm .form-actions { padding: 0; }
}

@media (max-width: 360px) { .card.subscription-info ul { grid-template-columns: 1fr; } }