/*==================================================================================

	FOREX RISK PERCENTAGE CALCULATOR — MODULE CSS

	App ka poora dhancha global-custom-web.css ke .wiz-* classes se. Yahan
	SIRF is module ki cheezein:

		1. natije ki patti     (.rp-case)
		2. qadam ba qadam hisaab    (.rp-steps)
		3. broker ka khulne wala hissa (.rp-broker)
		4. multi ke checkbox, summary, saved grid

	Rang, radius, shadow sab global tokens (--wiz-*) se.

==================================================================================*/


/*----------------------------------------------------------
	001 — COMMISSION KI PATTI
----------------------------------------------------------*/

.rp-case{
	display:flex;
	gap:.85rem;
	align-items:flex-start;
	margin:.9rem 1.1rem .25rem;
	padding:.9rem 1.05rem;
	border:1px solid var(--wiz-border);
	border-left-width:4px;
	border-radius:var(--wiz-radius-card);
	background:var(--wiz-surface-2);
	transition:border-color .18s ease, background .18s ease;
}

.rp-case-icon{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:2.1rem;
	height:2.1rem;
	border-radius:50%;
	font-size:1rem;
	color:#fff;
	background:var(--wiz-primary);
}

.rp-case-body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.rp-case-title{ font-size:.95rem; font-weight:600; color:var(--wiz-text); line-height:1.3; }
.rp-case-text{ font-size:.86rem; color:var(--wiz-text-muted); line-height:1.45; }
.rp-case-math{ font-family:var(--wiz-font-mono, ui-monospace, monospace); font-size:.82rem; color:var(--wiz-text-muted); word-break:break-word; }
.rp-case-math:empty{ display:none; }

/* neutral — aam hisaab */
.rp-case.is-neutral{ border-left-color:var(--wiz-primary); }
.rp-case.is-neutral .rp-case-icon{ background:var(--wiz-primary); }

/* flag — min/max laga, ya kuch batana hai (amber) */
.rp-case.is-flag{ border-left-color:var(--wiz-warning, #d97706); }
.rp-case.is-flag .rp-case-icon{ background:var(--wiz-warning, #d97706); }

/* missing — conversion rate darkar (amber, danger-soft bg) */
.rp-case.is-missing{
	border-left-color:var(--wiz-warning, #d97706);
	background:var(--wiz-danger-soft, rgba(220,38,38,.06));
}
.rp-case.is-missing .rp-case-icon{ background:var(--wiz-warning, #d97706); }
.rp-case.is-missing .rp-case-title{ color:var(--wiz-warning, #d97706); }


/*----------------------------------------------------------
	002 — QADAM BA QADAM HISAAB
----------------------------------------------------------*/

.rp-steps{
	width:100%;
	margin-top:.85rem;
	padding-top:.75rem;
	border-top:1px dashed var(--wiz-border);
	display:flex;
	flex-direction:column;
	gap:.4rem;
	text-align:left;
}
.rp-step-line{ display:flex; justify-content:space-between; gap:1rem; font-size:.83rem; line-height:1.4; }
.rp-step-line span:first-child{ color:var(--wiz-text-muted); }
.rp-step-line span:last-child{ font-family:var(--wiz-font-mono, ui-monospace, monospace); color:var(--wiz-text); white-space:nowrap; }
.rp-step-line.is-total{ margin-top:.15rem; padding-top:.4rem; border-top:1px solid var(--wiz-border); font-weight:600; }
.rp-step-line.is-total span{ color:var(--wiz-text); }


/*----------------------------------------------------------
	003 — BROKER KA KHULNE WALA HISSA
----------------------------------------------------------*/

.rp-broker{
	margin:0 1.1rem 1rem;
	border:1px solid var(--wiz-border);
	border-radius:var(--wiz-radius-sm);
	background:var(--wiz-surface-2);
	overflow:hidden;
}
.rp-broker > summary{
	display:flex;
	align-items:center;
	gap:.5rem;
	padding:.65rem .85rem;
	cursor:pointer;
	font-size:.84rem;
	font-weight:600;
	color:var(--wiz-text);
	list-style:none;
	user-select:none;
}
.rp-broker > summary::-webkit-details-marker{ display:none; }
.rp-broker > summary i{ color:var(--wiz-text-muted); }
.rp-broker > summary small{ margin-left:auto; font-weight:400; color:var(--wiz-text-muted); }
.rp-broker > summary::after{
	content:'';
	margin-left:.6rem;
	width:.5rem;
	height:.5rem;
	border-right:2px solid var(--wiz-text-muted);
	border-bottom:2px solid var(--wiz-text-muted);
	transform:rotate(45deg) translate(-2px, -2px);
	transition:transform .15s ease;
}
.rp-broker[open] > summary::after{ transform:rotate(-135deg) translate(-2px, -2px); }
.rp-broker > summary:focus-visible{ outline:2px solid var(--wiz-primary); outline-offset:-2px; }
.rp-broker[open] > summary{ border-bottom:1px solid var(--wiz-border); }
.rp-broker[open] > summary i.twh-icon-rm-cogs{ color:var(--wiz-primary); }
.rp-broker .wiz-head-row{ padding:.35rem .85rem .85rem; margin:0; }


/*----------------------------------------------------------
	004 — CUSTOM PAIR / UPPER / PRICE / NA
----------------------------------------------------------*/

.rp-pair-custom{ display:flex; align-items:center; gap:.4rem; }
.rp-pair-custom > span{ flex:0 0 auto; color:var(--wiz-text-muted); font-weight:600; }
.rp-pair-custom .wiz-input{ text-transform:uppercase; }
.rp-upper{ text-transform:uppercase; }
.rp-price{ font-variant-numeric:tabular-nums; }

.rp-na{ color:var(--wiz-text-muted); font-size:.82rem; }
.rp-missing-out{ color:var(--wiz-warning, #d97706); font-weight:600; }
.rp-sub-label{ margin-top:.25rem; }
.rp-flag{ color:var(--wiz-warning, #d97706); }


/*----------------------------------------------------------
	005 — MULTI CHECKBOX GRID
----------------------------------------------------------*/

.rp-check-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
	gap:.5rem;
	margin:.5rem 0 1rem;
}
.rp-check{
	display:flex;
	align-items:center;
	gap:.5rem;
	padding:.5rem .7rem;
	border:1px solid var(--wiz-border);
	border-radius:var(--wiz-radius-sm, .5rem);
	background:var(--wiz-surface);
	font-size:.85rem;
	cursor:pointer;
	transition:border-color .15s ease;
}
.rp-check:hover{ border-color:var(--wiz-primary); }
.rp-check input{ accent-color:var(--wiz-primary); }
.rp-check input:checked ~ span{ color:var(--wiz-text); font-weight:500; }


/*----------------------------------------------------------
	006 — SUMMARY CARD
----------------------------------------------------------*/

.rp-summary{
	margin-top:1rem;
	border:1px solid var(--wiz-border);
	border-radius:var(--wiz-radius-card);
	background:var(--wiz-surface);
	overflow:hidden;
}
.rp-summary-row{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 1rem; font-size:.87rem; }
.rp-summary-row + .rp-summary-row{ border-top:1px solid var(--wiz-border); }
.rp-summary-row span:first-child{ color:var(--wiz-text-muted); }
.rp-summary-row span:last-child{ font-weight:600; color:var(--wiz-text); text-align:right; font-family:var(--wiz-font-mono, ui-monospace, monospace); }
.rp-summary-row.is-head{ background:var(--wiz-surface-2); font-weight:600; }
.rp-summary-row.is-head span{ color:var(--wiz-text); font-family:inherit; }


/*----------------------------------------------------------
	007 — SAVED SETUPS GRID
----------------------------------------------------------*/

.rp-saved-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
	gap:.85rem;
	margin-top:1rem;
}
.rp-saved-card{
	display:flex;
	flex-direction:column;
	gap:.5rem;
	padding:.9rem 1rem;
	border:1px solid var(--wiz-border);
	border-radius:var(--wiz-radius-card);
	background:var(--wiz-surface);
}
.rp-saved-name{ font-size:.92rem; font-weight:600; color:var(--wiz-text); word-break:break-word; }
.rp-saved-meta{ font-size:.8rem; color:var(--wiz-text-muted); line-height:1.45; }
.rp-saved-actions{ display:flex; gap:.4rem; margin-top:.15rem; }


/*----------------------------------------------------------
	008 — CHHOTI SCREEN
----------------------------------------------------------*/

@media screen and (max-width:767.98px){
	.rp-case,
	.rp-broker{ margin-left:.85rem; margin-right:.85rem; }
}

@media (max-width:575.98px){
	.rp-case{ flex-direction:column; gap:.55rem; }
	.rp-step-line{ flex-direction:column; gap:.1rem; }
	.rp-step-line span:last-child{ white-space:normal; }
	.rp-summary-row{ flex-direction:column; gap:.15rem; }
	.rp-summary-row span:last-child{ text-align:left; }
}


/*----------------------------------------------------------
	009 — LAAGAT SHAAMIL KARNE KE TOGGLE (context bar)
----------------------------------------------------------*/

.rp-toggles-field{ min-width:0; }
.rp-toggles{
	display:flex;
	flex-wrap:wrap;
	gap:.4rem;
}
.rp-toggle{
	display:inline-flex;
	align-items:center;
	gap:.35rem;
	padding:.32rem .6rem;
	border:1px solid var(--wiz-border);
	border-radius:var(--wiz-radius-sm, .5rem);
	background:var(--wiz-surface);
	font-size:.82rem;
	color:var(--wiz-text-muted);
	cursor:pointer;
	user-select:none;
	transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.rp-toggle:hover{ border-color:var(--wiz-primary); }
.rp-toggle input{ accent-color:var(--wiz-primary); }
.rp-toggle input:checked ~ span{ color:var(--wiz-text); font-weight:500; }
.rp-toggle:has(input:checked){ border-color:var(--wiz-primary); background:var(--wiz-primary-soft, rgba(124,58,237,.07)); }


/*----------------------------------------------------------
	010 — BREAK-EVEN PATTI KE HAAL (credit / cost)
----------------------------------------------------------*/

/* cost — break-even entry se door (aam) */
.rp-case.is-cost{ border-left-color:var(--wiz-primary); }
.rp-case.is-cost .rp-case-icon{ background:var(--wiz-primary); }

/* credit — swap credit ne break-even ghata diya (sabz) */
.rp-case.is-credit{ border-left-color:var(--wiz-success, #16a34a); }
.rp-case.is-credit .rp-case-icon{ background:var(--wiz-success, #16a34a); }
.rp-case.is-credit .rp-case-title{ color:var(--wiz-success, #16a34a); }