/* ─── Dealfin Gold Rates ──────────────────────────────────────────────────── */
.container-df {
	max-width: 1520px;
	margin:    0 auto;
	padding:   0 16px;
}
/* ─── Title ────────────────────────────────────────────────────────────────── */
h1.df-header-page__title {
	color: #1C1C1C;
	margin-bottom: 20px;
}
.dgr-title {
	margin-bottom: 16px;
}

/* ─── Top / Bottom text ─────────────────────────────────────────────────────── */
.dgr-top-text,
.dgr-bottom-text{
	margin-bottom: 50px;
}
.dgr-top-text p,
.dgr-bottom-text p{
	margin: 0 0 16px;
}
.dgr-top-text p a,
.dgr-bottom-text p a{
	color: #1C1C1C;
	text-decoration: underline;
}
.dgr-top-text table,
.dgr-bottom-text table {
	margin: 1rem 0;
}
/* ─── Section: chart ─────────────────────────────────────────────────────────── */
.dgr-section-chart {
	position:      relative;
	margin-bottom: 10px;
}

/* Currency switcher — top-right above the chart */
.dgr-currency-switcher {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.dgr-currency-switcher .dgr-currency-btn {
	padding: 9px 20px;
    border: 1px solid #0A1389;
	background-color: #fff;
    border-radius: 10px;
    color: #0A1389;
	font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    outline: none;
    text-align: center;
    transition: background-color .3s;
	cursor: pointer;
}

.dgr-currency-switcher .dgr-currency-btn:hover {
	background:   #0A1389;
	border-color: #0A1389;
	color: #fff;
}

.dgr-currency-switcher .dgr-currency-btn.is-active {
	background:   #0A1389;
	color:        #ffffff;
	border-color: #0A1389;
}
.dgr-currency-switcher .dgr-currency-btn.is-active:hover {
	
	background:   #3643de;
	border-color: #3643de;
}

/* Chart container */
.dgr-chart-container {
	min-height:  200px;
	margin-top: 24px; 
	transition:  opacity 0.2s;
	background-color: #F5F5F5;
	border-radius: 10px;
}

.dgr-chart-container.is-loading {
	opacity:        0.45;
	pointer-events: none;
}

/* Tooltip badge */
.dgr-tooltip-badge {
	background:    #0A1389;
	color:         #ffffff;
	padding:       3px 7px;
	border-radius: 6px;
	font-size:     13px;
	font-weight:   400;
	white-space:   nowrap;
}
svg .apexcharts-xaxis .apexcharts-xaxis-texts-g text:first-child{
	transform: translateX(25px) !important;
	
}
/* ─── Section: links ─────────────────────────────────────────────────────────── */
.dgr-section-links {
	margin-bottom: 40px;
}

.dgr-blocks {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   40px;
}
.apexcharts-yaxis-label {
	position: relative;
}
.apexcharts-yaxis-label:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 4px;
	z-index: 1;
}
.dgr-block {
	border:        1px solid #D9D9D9;
	border-radius: 10px;
	padding: 20px 0;
}

.dgr-block__title {
	font-size:      20px;
	line-height: 28px;
	font-weight:    700;
	letter-spacing: 0;
	text-transform: uppercase;
	color:          #1C1C1C;
	margin:         0 0 10px;
	padding: 0 20px 20px;
	border-bottom:  1px solid #1C1C1C;
}

.dgr-block__list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.dgr-block__list li {
	position: relative;
	margin-bottom: 8px;
}

.dgr-block__list li:last-child {
	margin-bottom: 0;
}

.dgr-block__list li::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #FF9F1C 0%, rgba(255, 159, 28, 0) 100%);
	backdrop-filter: blur(8.33px);
	opacity: 0;
	transition: opacity 0.8s ease; /* fade-out — повільно */
	z-index: 1;
}

.dgr-block__list li:hover::before {
	opacity: 1;
	transition: opacity 0.1s ease; /* fade-in — швидко */
}


.dgr-block__list a {
	position: relative;
	z-index: 2;
	color:           #1C1C1C;
	text-decoration: none;
	font-size:       18px;
	line-height:     26px;
	display:         block;
	padding:         10px 20px;
	text-transform:  lowercase;
}

.dgr-block__list a.is-current {
	color:       #1C1C1C;
}
.blog-block-gold {
	background-color: #fff;
}
.blog-block-gold  .popular-posts {
	background-color: #fff;
}
.dgr-title-row {
	position: relative;
	text-align: center;
	margin-bottom: 27px;
}
.dgr-title-row:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	width: 100%;
	border-top:1px solid #0A1389;
}

.products-gold-rates-title {
	color: #0A1389;
	font-size: 30px;
	line-height: 38px;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
	padding: 0 20px;
	background-color: #fff;
	position: relative;
}
.dgr-section-products ul.products.columns-5 {
	gap: 60px 5px;
	justify-content: space-between;
}
.dgr-section-products ul.products.columns-5 li.product {
	margin-right: 0;
	width: 19%;
}




/* ─── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
	.dgr-section-products ul.products.columns-5 {
	    gap: 24px;
	}
	.dgr-section-products ul.products.columns-5 li.product{
		width: 26%;
	}
}
@media (max-width: 991px) {
	.dgr-section-products ul.products.columns-5 {
	    gap: 24px;
	}
	.dgr-section-products ul.products.columns-5 li.product{
		width: 31%;
		margin-bottom: 0;
	}
}
@media (max-width: 900px) {
	.dgr-blocks {
		grid-template-columns: 1fr 1fr;
	}
	.dgr-block--period {
		grid-column: 1 / -1;
	}
}
@media (max-width: 768px) {
	.dgr-section-products ul.products.columns-5 {
	    gap: 24px;
	}
	.dgr-section-products ul.products.columns-5 li.product{
		width: calc(33.3% - 20px);
	}
	.dgr-blocks {
		gap: 24px;
	}
}
@media (max-width: 700px) {
	
	.dgr-section-products ul.products.columns-5 li.product{
		width: calc(50% - 20px);
	}
}
@media (max-width: 600px) {
	.dgr-blocks {
		grid-template-columns: 1fr;
	}
	.dgr-block--period {
		grid-column: auto;
	}

	.dgr-currency-switcher {
		position:   static;
		margin-bottom: 8px;
		justify-content: flex-end;
	}

	.dgr-chart-container {
		padding-top: 0;
	}
	.dgr-top-text table,
	.dgr-bottom-text table {
		margin: 1rem 0;
	}
	.apexcharts-xaxis-texts-g text {
		font-size: 6px;
	}
	svg .apexcharts-xaxis .apexcharts-xaxis-texts-g text:first-child{
		transform: translateX(6px) !important;
	}
	svg .apexcharts-yaxis-texts-g text {
		font-size: 11px;
	}
	.dgr-block__list {
		padding: 6px 20px;
	}
	.dgr-block {
		padding: 14px 0;
	}
	.dgr-block__title {
		font-size: 18px;
		line-height: 22px;
		padding: 0 20px 14px;
	}
	.dgr-section-bottom-text .faq_section .section_top h2,
	.products-gold-rates-title {
		font-size: 22px;
		line-height: 28px;
	}
}

@media (max-width: 420px) {
	
	.dgr-section-products ul.products.columns-5 li.product{
		width: 100%;
	}
}