/* ========================================================================
   Step-by-Step Wizard — layered on top of Classimall Ads' own stylesheet
   (loaded after it, and every rule is scoped to .cmat-wizard so nothing
   else on the page is touched). Colours come from the active colour combo.
   ======================================================================== */
.cma-front.cmat-wizard{max-width:1040px;margin-left:auto;margin-right:auto;padding:28px;}

/* Two columns: the steps, and a sticky price summary */
.cmat-wizard .cma-grid.cmat-wizard-grid{grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;}
.cmat-wizard-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:12px;}
.cmat-wizard .cmat-aside-note{margin:0;padding:0 4px;font-size:12px;line-height:1.5;color:var(--cma-text-muted);}
.cmat-wizard .cma-summary-card .cma-price{font-size:36px;}

/* Progress indicator */
.cmat-wizard .cmat-steps{list-style:none;margin:0 0 22px;padding:0;display:flex;align-items:flex-start;}
.cmat-wizard .cmat-step-item{flex:1;position:relative;text-align:center;font-size:12px;color:var(--cma-text-muted);}
.cmat-wizard .cmat-step-item::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--cma-border);z-index:0;}
.cmat-wizard .cmat-step-item:first-child::before{display:none;}
.cmat-wizard .cmat-step-item.is-active::before,
.cmat-wizard .cmat-step-item.is-done::before{background:var(--cma-marigold);}
.cmat-wizard .cmat-step-dot{
	position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
	width:32px;height:32px;border-radius:50%;background:var(--cma-panel-alt);border:2px solid var(--cma-border);
	font-weight:800;font-size:13px;color:var(--cma-text-muted);transition:background .2s,border-color .2s,box-shadow .2s;
}
.cmat-wizard .cmat-step-label{display:block;margin-top:6px;font-weight:600;}
.cmat-wizard .cmat-step-item.is-active .cmat-step-dot{
	background:var(--cma-marigold);border-color:var(--cma-marigold);color:var(--cma-marigold-text);
	box-shadow:0 0 0 4px color-mix(in srgb,var(--cma-marigold) 25%,transparent);
}
.cmat-wizard .cmat-step-item.is-active .cmat-step-label{color:var(--cma-text);}
.cmat-wizard .cmat-step-item.is-done .cmat-step-dot{background:var(--cma-green);border-color:var(--cma-green);color:var(--cma-green-text);}
.cmat-wizard.cmat-js .cmat-step-item.is-done{cursor:pointer;}

/* Step panels — only hidden once the script has marked the wrapper .cmat-js,
   so the form is never left unusable if the script fails to load. */
.cmat-wizard .cmat-panel{background:var(--cma-panel);border:1px solid var(--cma-border);border-radius:16px;padding:24px;}
.cmat-wizard.cmat-js .cmat-panel{display:none;}
.cmat-wizard.cmat-js .cmat-panel.is-active{display:block;animation:cmatFade .25s ease;}
@keyframes cmatFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.cmat-wizard .cmat-panel-title{margin:0 0 18px;font-size:20px;font-weight:800;letter-spacing:-.3px;}

/* Cards inside a panel sit one shade up from the panel itself */
.cmat-wizard .cmat-panel .cma-preview-card,
.cmat-wizard .cmat-panel .cma-dims-card,
.cmat-wizard .cmat-panel .cma-slot-availability-card{background:var(--cma-panel-alt);}

.cmat-wizard .cmat-panel-error{margin:6px 0 0;padding:10px 12px;border-radius:8px;background:#2a1414;color:#e0663f;border:1px solid #e0663f;font-size:13px;}
.cmat-wizard .cmat-panel-error[hidden]{display:none;}

.cmat-wizard .cmat-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;}
.cmat-wizard .cmat-nav-back-only{justify-content:flex-start;margin-top:14px;}
.cmat-wizard .cmat-btn{
	appearance:none;border:1px solid var(--cma-border);background:var(--cma-panel-alt);color:var(--cma-text);
	padding:11px 24px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;transition:border-color .15s,background .15s;
}
.cmat-wizard .cmat-btn:hover{border-color:var(--cma-text-muted);}
.cmat-wizard .cmat-btn-primary{background:var(--cma-marigold);border-color:var(--cma-marigold);color:var(--cma-marigold-text);}
.cmat-wizard .cmat-btn-primary:hover{background:var(--cma-marigold-light);border-color:var(--cma-marigold-light);}

/* Review of the advertiser's choices, built by the script on the last step */
.cmat-wizard .cmat-recap{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px;margin-bottom:22px;padding:12px 16px;background:var(--cma-panel-alt);border:1px solid var(--cma-border);border-radius:12px;font-size:13px;}
.cmat-wizard .cmat-recap:empty{display:none;}
.cmat-wizard .cmat-recap-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--cma-border);}
.cmat-wizard .cmat-recap-row span{color:var(--cma-text-muted);}
.cmat-wizard .cmat-recap-row b{text-align:right;}

/* Narrow screens: one column, price pinned to the bottom of the screen */
@media (max-width:860px){
	.cma-front.cmat-wizard{padding:16px;}
	.cmat-wizard .cma-grid.cmat-wizard-grid{grid-template-columns:1fr;gap:16px;}
	.cmat-wizard-aside{position:sticky;top:auto;bottom:8px;z-index:20;}
	.cmat-wizard .cmat-aside-note{display:none;}
	.cmat-wizard .cmat-step-item:not(.is-active) .cmat-step-label{display:none;}
	.cmat-wizard .cmat-panel{padding:18px;}
	.cmat-wizard .cma-fields{grid-template-columns:1fr;}
	.cmat-wizard .cmat-recap{grid-template-columns:1fr;}
}