/**
 * Derahyar Frontend Styles
 * Brand: #004851 (primary) / #92842c (accent)
 *
 * @package Derahyar
 */

.derahyar-gateway-wrapper {
	--om-b: var(--dy-primary, #004851);
	--om-a: var(--dy-accent, #92842c);
	--om-b-soft: var(--dy-selected, #e6eef0);
	--om-b-light: var(--dy-border-strong, #b3c8cc);
	--om-a-soft: var(--dy-accent-soft, #f5f1e0);
	--om-gray-1: var(--dy-text, #1d2327);
	--om-gray-2: var(--dy-text-soft, #555);
	--om-gray-3: var(--dy-text-muted, #6b6f76);
	--om-gray-4: var(--dy-border, #ececec);
	--om-white: var(--dy-surface, #fff);

	direction: rtl;
	text-align: right;
	margin: 24px 0;
	font-family: Tahoma, 'Segoe UI', 'IRANSans', Arial, sans-serif;
	box-sizing: border-box;
}

.derahyar-gateway-wrapper *,
.derahyar-gateway-wrapper *::before,
.derahyar-gateway-wrapper *::after {
	box-sizing: border-box;
}

/* Heading */
.derahyar-gateway-heading { margin-bottom: 12px; }
.derahyar-gateway-heading-text {
	font-size: 15px;
	font-weight: 700;
	color: var(--om-gray-1);
	line-height: 1.6;
}

/* Payment Card */
.derahyar-pay-card {
	border: 2px solid var(--om-b-light);
	background: var(--om-b-soft);
	border-radius: 14px;
	padding: 18px 20px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.derahyar-pay-card--active {
	border-color: var(--om-b);
	box-shadow: 0 4px 14px rgba(0, 72, 81, 0.10);
}

/* Card Header */
.derahyar-pay-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}
.derahyar-pay-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
}
.derahyar-pay-card-title h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--om-b);
	line-height: 1.4;
}
.derahyar-pay-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--om-b);
	flex-shrink: 0;
}
.derahyar-pay-card-dot {
	width: 22px;
	height: 22px;
	border: 2px solid var(--om-b);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--om-white);
}
.derahyar-pay-card-dot span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--om-b);
	display: block;
}
.derahyar-pay-card-desc {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--om-gray-3);
	line-height: 1.7;
}

/* Gateway Items Grid */
.derahyar-gateway-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-top: 8px;
}

/* Gateway Item */
.derahyar-gateway-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 10px;
	background: var(--om-white);
	border: 2px solid var(--om-gray-4);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	min-height: 96px;
	user-select: none;
	outline: none;
}
.derahyar-gateway-item:hover {
	border-color: var(--om-b-light);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 72, 81, 0.08);
}
.derahyar-gateway-item:focus-visible {
	border-color: var(--om-b);
	box-shadow: 0 0 0 3px rgba(0, 72, 81, 0.18);
}
.derahyar-gateway-item.is-selected {
	border-color: var(--om-b);
	background: var(--om-white);
	box-shadow: 0 0 0 2px rgba(0, 72, 81, 0.15);
}

/* Logo */
.derahyar-gateway-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
}
.derahyar-gateway-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(15%);
	opacity: 0.9;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.derahyar-gateway-item:hover .derahyar-gateway-logo img,
.derahyar-gateway-item.is-selected .derahyar-gateway-logo img {
	filter: grayscale(0%);
	opacity: 1;
}

/* Name */
.derahyar-gateway-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--om-gray-2);
	line-height: 1.4;
	text-align: center;
}
.derahyar-gateway-item.is-selected .derahyar-gateway-name {
	color: var(--om-b);
}

/* Check Icon */
.derahyar-gateway-check {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--om-a);
	color: var(--dy-on-accent, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.2s ease;
	box-shadow: 0 2px 6px rgba(146, 132, 44, 0.35);
}
.derahyar-gateway-item.is-selected .derahyar-gateway-check {
	opacity: 1;
	transform: scale(1);
}

/* Error */
.derahyar-gateway-error {
	margin-top: 10px;
	padding: 10px 14px;
	background: var(--dy-error-surface, #fef2f2);
	border: 1px solid var(--dy-error-border, #fecaca);
	border-radius: 8px;
	color: var(--dy-error-text, #b91c1c);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

/* Responsive */
@media screen and (max-width: 768px) {
	.derahyar-pay-card { padding: 16px; }
	.derahyar-pay-card-title h3 { font-size: 15px; }
	.derahyar-gateway-items {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 10px;
	}
	.derahyar-gateway-item { padding: 12px 8px; min-height: 88px; }
	.derahyar-gateway-logo { height: 36px; }
	.derahyar-gateway-name { font-size: 11px; }
}

@media screen and (max-width: 480px) {
	.derahyar-gateway-items { grid-template-columns: repeat(2, 1fr); }
	.derahyar-pay-card-desc { font-size: 12px; margin-bottom: 12px; }
	.derahyar-gateway-logo { height: 32px; }
}

@media screen and (max-width: 360px) {
	.derahyar-gateway-items { grid-template-columns: 1fr; }
	.derahyar-gateway-item {
		flex-direction: row;
		justify-content: flex-start;
		gap: 12px;
		padding: 12px 14px;
		min-height: auto;
	}
	.derahyar-gateway-logo { width: 50px; height: 32px; flex-shrink: 0; }
	.derahyar-gateway-name { font-size: 13px; text-align: right; }
	.derahyar-gateway-check {
		top: 50%;
		left: 10px;
		transform: translateY(-50%) scale(0.5);
	}
	.derahyar-gateway-item.is-selected .derahyar-gateway-check {
		transform: translateY(-50%) scale(1);
	}
}
/* =====================================================
   Derahyar Premium Gateway UI UX Update
   Donation-style modern payment selector
   ===================================================== */
.derahyar-pay-card{
    border-radius:24px!important;
    border:1px solid var(--dy-border, #e4eceb)!important;
    background:var(--dy-surface, #fff)!important;
    box-shadow:0 18px 45px rgba(0,72,81,.10)!important;
    padding:28px!important;
}
.derahyar-pay-card-title h3{
    color:var(--dy-primary, #004851)!important;
    font-size:20px!important;
    font-weight:800!important;
}
.derahyar-gateway-items{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
}
.derahyar-gateway-item{
    min-height:88px!important;
    border:1.5px solid var(--dy-option-border, #d9e5e5)!important;
    border-radius:16px!important;
    background:var(--dy-surface, #fff)!important;
    transition:.25s ease!important;
    padding:18px!important;
}
.derahyar-gateway-item:hover{
    border-color:var(--dy-primary, #004851)!important;
    box-shadow:0 8px 22px rgba(0,72,81,.10)!important;
}
.derahyar-gateway-item.is-selected{
    border-color:var(--dy-primary, #004851)!important;
    background:var(--dy-selected, #f2f8f7)!important;
    box-shadow:0 10px 28px rgba(0,72,81,.12)!important;
}
.derahyar-gateway-name{
    color:var(--dy-text, #183034)!important;
    font-size:15px!important;
    font-weight:700!important;
}
.derahyar-gateway-check{
    background:var(--dy-accent, #92842c)!important;
}
.derahyar-submit-button,
.derahyar-pay-card button[type="submit"]{
    height:54px!important;
    border-radius:14px!important;
    background:var(--dy-button, #004851)!important;
    color:var(--dy-on-button, #fff)!important;
    font-size:16px!important;
    font-weight:800!important;
    box-shadow:0 10px 25px rgba(0,72,81,.18)!important;
}
.derahyar-submit-button:hover,
.derahyar-pay-card button[type="submit"]:hover{
    background:var(--dy-button-hover, #003239)!important;
}
@media(max-width:768px){
 .derahyar-gateway-items{grid-template-columns:1fr!important;}
 .derahyar-pay-card{padding:18px!important;border-radius:18px!important;}
}

/* Verified payment response shell. This page is rendered directly after the
   server validates the paid transaction, before page-builder form output. */
.derahyar-confirmation-shell{
	width:100%;
	max-width:1200px;
	min-height:55vh;
	margin:0 auto;
	padding:36px 16px 64px;
}
.derahyar-confirmation-fallback{
	width:100%;
	max-width:560px;
	margin:32px auto;
	padding:36px 28px;
	border:1px solid var(--dy-border, #e1e9e8);
	border-radius:22px;
	background:var(--dy-surface, #fff);
	box-shadow:0 18px 48px rgba(0,72,81,.12);
	text-align:center;
	color:var(--dy-text, #183034);
}
.derahyar-confirmation-fallback__icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:72px;
	height:72px;
	margin:0 auto 20px;
	border-radius:50%;
	background:var(--dy-selected, #e8f5f2);
	color:var(--dy-primary, #004851);
	font-size:38px;
	font-weight:800;
}
.derahyar-confirmation-fallback h1{
	margin:0 0 12px;
	color:var(--dy-primary, #004851);
	font-size:24px;
	font-weight:800;
}
.derahyar-confirmation-fallback p{
	margin:0 0 24px;
	font-size:15px;
	line-height:2;
}
.derahyar-confirmation-fallback a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:48px;
	padding:10px 26px;
	border-radius:12px;
	background:var(--dy-accent, #92842c);
	color:var(--dy-on-accent, #fff)!important;
	font-weight:700;
	text-decoration:none!important;
}
@media(max-width:600px){
	.derahyar-confirmation-shell{padding:20px 10px 44px;}
	.derahyar-confirmation-fallback{margin:16px auto;padding:28px 18px;border-radius:16px;}
	.derahyar-confirmation-fallback h1{font-size:20px;}
}

/* Appearance bridge: client-side only, scoped to Derahyar components.
 * Manual light wins over the OS dark setting. No storage or payment hooks. */
:is(.dh-wrapper, .derahyar-gateway-wrapper, .derahyar-confirmation-fallback) {
 color-scheme: var(--dy-color-scheme, light);
}
@media screen {
:root:is([data-mr-theme="dark"], [data-oe-color-scheme="dark"], [data-omid-theme="dark"], [data-theme="dark"], [data-color-scheme="dark"]) :is(.dh-wrapper, .derahyar-gateway-wrapper, .derahyar-confirmation-fallback) {

 --dy-color-scheme:dark;
 --dy-primary:#78d2d2;
 --dy-primary-hover:#a0e4e3;
 --dy-selected:#1d3c40;
 --dy-hover:#213237;
 --dy-border-strong:#55747c;
 --dy-option-border:#435c63;
 --dy-accent:#c4b268;
 --dy-accent-soft:#353321;
 --dy-text:#edf5f5;
 --dy-text-soft:#d0dee0;
 --dy-text-muted:#bdcdd0;
 --dy-surface:#17272c;
 --dy-border:#435c63;
 --dy-scroll-track:#122126;
 --dy-error-surface:#3a2028;
 --dy-error-border:#925465;
 --dy-error-accent:#f898a8;
 --dy-error-text:#ffbcc7;
 --dy-on-accent:#152124;
 --dy-button:#78d2d2;
 --dy-button-hover:#a0e4e3;
 --dy-on-button:#122126;
}
}
@media screen and (prefers-color-scheme:dark) {
:root:not([data-mr-theme]):not([data-oe-color-scheme]):not([data-omid-theme]):not([data-theme]):not([data-color-scheme]) :is(.dh-wrapper, .derahyar-gateway-wrapper, .derahyar-confirmation-fallback) {

 --dy-color-scheme:dark;
 --dy-primary:#78d2d2;
 --dy-primary-hover:#a0e4e3;
 --dy-selected:#1d3c40;
 --dy-hover:#213237;
 --dy-border-strong:#55747c;
 --dy-option-border:#435c63;
 --dy-accent:#c4b268;
 --dy-accent-soft:#353321;
 --dy-text:#edf5f5;
 --dy-text-soft:#d0dee0;
 --dy-text-muted:#bdcdd0;
 --dy-surface:#17272c;
 --dy-border:#435c63;
 --dy-scroll-track:#122126;
 --dy-error-surface:#3a2028;
 --dy-error-border:#925465;
 --dy-error-accent:#f898a8;
 --dy-error-text:#ffbcc7;
 --dy-on-accent:#152124;
 --dy-button:#78d2d2;
 --dy-button-hover:#a0e4e3;
 --dy-on-button:#122126;
}
}

/* A selected bank keeps its original logo; only the surrounding surface changes. */
@media screen {
 .derahyar-gateway-wrapper .derahyar-gateway-item.is-selected .derahyar-gateway-check { color:var(--dy-on-accent, #fff); }
 .derahyar-confirmation-fallback p { color:var(--dy-text, #183034); }
}

/* Appearance-2: cached forms may still define --dh-white:#fff.
 * The reserved ID in :is gives per-form legacy CSS equivalent specificity.
 * Only visual tokens change; gateway values and handlers remain untouched. */
@media screen {
 :is(.dh-wrapper,.derahyar-gateway-wrapper,.derahyar-confirmation-fallback) {
  --dh-primary:var(--dy-primary,#004851)!important;
  --dh-primary-dark:var(--dy-primary-hover,#003239)!important;
  --dh-primary-light:var(--dy-selected,#e8f0f1)!important;
  --dh-primary-lighter:var(--dy-hover,#f4f8f8)!important;
  --dh-primary-border:var(--dy-border-strong,#d1dee0)!important;
  --dh-accent:var(--dy-accent,#92842c)!important;
  --dh-accent-light:var(--dy-accent-soft,#f7f3e0)!important;
  --dh-text:var(--dy-text,#1a2b2e)!important;
  --dh-text-soft:var(--dy-text-soft,#5a6668)!important;
  --dh-text-muted:var(--dy-text-muted,#8a9598)!important;
  --dh-white:var(--dy-surface,#fff)!important;
  --dh-border:var(--dy-border,#e5ecee)!important;
 }
 :is(#derahyar-appearance-scope,.dh-wrapper).dh-premium-payment-card { background:var(--dy-surface,#fff)!important; border-color:var(--dy-border,#e5ecee)!important; }
 :is(#derahyar-appearance-scope,.dh-wrapper) :is(.dh-select,.dh-dropdown,.dh-option:not(.is-selected):not(:hover)) { background:var(--dy-surface,#fff)!important; }
 :is(#derahyar-appearance-scope,.dh-wrapper) .dh-option { border-color:var(--dy-option-border,#dbe6e8)!important; }
 :is(#derahyar-appearance-scope,.dh-wrapper) .dh-option:hover { background:var(--dy-hover,#f4f8f8)!important; }
 :is(#derahyar-appearance-scope,.dh-wrapper) .dh-option.is-selected { background:var(--dy-selected,#e8f0f1)!important; color:var(--dy-primary,#004851)!important; }
 :is(#derahyar-appearance-scope,.dh-wrapper) :is(.dh-select,.dh-dropdown) { border-color:var(--dy-primary,#004851)!important; }
 :is(#derahyar-appearance-scope,.dh-wrapper) :is(.dh-section-title,.dh-selected-name) { color:var(--dy-text,#1a2b2e)!important; }
 :is(#derahyar-appearance-scope,.dh-wrapper) .dh-arrow { color:var(--dy-primary,#004851)!important; }
 :is(#derahyar-appearance-scope,.dh-wrapper) .dh-select:focus-visible { outline:2px solid var(--dy-primary,#004851)!important; outline-offset:3px!important; }
}

/* The legacy RTL honeypot used left:-10000px; that enlarges the page's
 * scrollable area in Firefox. Right anchoring resolves the over-constrained
 * RTL position inside the component; clipping keeps it non-visible. */
.dh-wrapper .derahyar-payment-trap {
 right:0!important; top:0!important;
 clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important;
 pointer-events:none!important;
}