:root {
	--bg:         #F7F8FA;
	--surface:    #FFFFFF;
	--border:     #DDE1E8;
	--border-focus: #3B6FE8;
	--text-main:  #1A1D23;
	--text-sub:   #abafb7;
	--text-label: #374151;
	--accent:     #3B6FE8;
	--accent-light: #EBF0FD;
	--danger:     #D63B3B;
	--danger-light: #FDF0F0;
	--success:    #1E8A5E;
	--success-light: #EAF6F1;
	--warning:    #C07A00;
	--warning-light: #FEF5E7;
	--step-done:  #1E8A5E;
	--radius:     8px;
	--radius-sm:  4px;
	--shadow:     0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
	
	--color-wh: #ffffff;
	--color-whRGB: 255,255,255;
	--color-bl: #000000;
	--color-blRGB: 0,0,0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    background-color: transparent !important;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: rgba(var(--color-blRGB), 0.35);
	font-style: italic;
	font-size: 0.875rem;
    font-weight: 500;
	letter-spacing: -0.025em;
}
::-moz-placeholder { /* Firefox 19+ */
	color: rgba(var(--color-blRGB), 0.35);
	font-style: italic;
	font-size: 0.875rem;
    font-weight: 500;
	letter-spacing: -0.025em;
}
:-ms-input-placeholder { /* IE 10+ */
	color: rgba(var(--color-blRGB), 0.35);
	font-style: italic;
	font-size: 0.875rem;
    font-weight: 500;
	letter-spacing: -0.025em;
}
:-moz-placeholder { /* Firefox 18- */
	color: rgba(var(--color-blRGB), 0.35);
	font-style: italic;
	font-size: 0.875rem;
    font-weight: 500;
	letter-spacing: -0.025em;
}

a.item:link, a.item:visited, a.item:hover, a.item:active {
	text-decoration: none;
	color:inherit;
}
a.item:hover{
	text-decoration: underline;
	color:#535353;
}

body {
	background: var(--bg);
	color: var(--text-main);
	min-height: 100vh;
	padding: 32px 16px 64px;
	
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
    letter-spacing: -0.015em;
	font-size: 16px;
}

b, strong {
	font-weight: 600;
}

/* === HEADER === */
.page-header {
    max-width: 960px;
    margin: 0 auto 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}

.page-header .logo-slot {
	display: flex; 
	align-items: center; 
	justify-content: center;
	flex-shrink: 0;
}
.page-header .title-slot {
	text-align:right;
}

.page-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
}
.page-header p {
	font-size: .82rem;
	color: var(--text-sub);
	margin-top: 2px;
}

/* === STEP INDICATOR === */
.step-bar {
	max-width: 960px;
	margin: 0 auto 28px;
	display: flex;
	align-items: center;
	gap: 0;
	justify-content: space-between;
	flex-direction: row;
}
.step-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .8rem;
	font-weight: 700;
	color: var(--text-sub);
	flex: 1;
	justify-content: space-evenly;
	white-space: nowrap;
	max-width: fit-content;
}
.step-item.active { 
	color: var(--accent);
}
.step-item.done   {
	color: var(--step-done);
}
.step-dot {
	width: 28px; 
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--border);
	background: var(--surface);
	display: flex; 
	align-items: center; 
	justify-content: center;
	font-size: .75rem; 
	font-weight: 800;
	flex-shrink: 0;
	transition: all .25s;
}
.step-item.active .step-dot { 
	border-color: var(--accent); 
	color: var(--accent); 
}
.step-item.done .step-dot { 
	border-color: var(--step-done); 
	background: var(--step-done);
	color: #fff;
}
.step-line {
	flex: 1;
	height: 2px;
	background: var(--border);
	margin: 0 8px;
	transition: background .25s;
}
.step-line.done { 
	background: var(--step-done); 
}

#sb1 {
    justify-content: flex-start;
    max-width: fit-content;
    margin: 0 auto 0 0;
}

#sb3 {
    justify-content: flex-end;
}

/* === CARD === */
.card {
	max-width: 960px;
	margin: 0 auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 32px;
}
.card.savemode {
	border-radius:0;
}

/* === TWO-COL LAYOUT === */
.form-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 40px;
	align-items: start;
}

/* === FORM FIELDS === */
.dati-nascosti {
	visibility: hidden;
	color: var(--text-sub);
	font-size: .7rem;
}
.card.savemode .dati-nascosti {
	visibility: visible;
	z-index:10;
	position: relative;
}
.field-group { 
	margin-bottom: 20px;
}
.field-group label {
	display: block;
	font-size: .8rem;
	font-weight: 700;
	color: var(--text-label);
	margin-bottom: 5px;
	z-index:10;
	position: relative;
}
.field-group label span.req { color: var(--accent); margin-left: 2px; }

.field-input {
	width: 100%;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 40px;
	align-content: center;
	justify-content: space-between;
	align-items: center;
	justify-items: stretch;
}
.field-group input[type="text"],
.field-group input[type="email"],
.field-group input[type="date"] {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: .9rem;
	color: var(--text-main);
	background: var(--surface);
	transition: border-color .18s, box-shadow .18s;
	outline: none;
	font-family: inherit;
}
.field-group input:focus {
	border-color: var(--border-focus);
	box-shadow: 0 0 0 3px rgba(59,111,232,.12);
}
.field-group input.error {
	border-color: var(--danger);
	box-shadow: 0 0 0 3px rgba(214,59,59,.10);
}
.field-hint {
	font-size: .74rem;
	color: var(--text-sub);
	font-weight: 600;
	margin-top: 4px;
}
.card.savemode .field-hint {
	visibility: hidden !important;
}
.field-error {
	font-size: 0.875rem;
	color: var(--danger);
	font-weight: 700;
	margin-top: 4px;
	display: none;
}
.field-error.visible { display: block; }

.card.savemode .field-error {
	display: none !important;
}
/* === GUIDA VISIVA LATERALE === */
.guide-panel {
	position: sticky;
	top: 24px;
}
.guide-panel h3 {
	font-size: .78rem;
	font-weight: 700;
	color: var(--text-main);
	text-transform: uppercase;
	margin-bottom: 14px;
}
.order-preview {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-main);
	overflow: hidden;
}
/* .img-ordine {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: top;
	display: block;
} */
.order-preview .op-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	border-bottom: 1px solid var(--border);
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.order-preview .op-shop { font-weight: 700; font-size: .85rem; }
.order-preview .op-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--accent-light);
	color: var(--accent);
	border-radius: 20px;
	padding: 2px 8px;
	font-size: .7rem;
	font-weight: 700;
}
.order-preview .op-field {
	display: flex;
	gap: 6px;
	margin-bottom: 5px;
	align-items: flex-start;
}
.op-num {
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}
.op-key { color: var(--text-sub); min-width: 72px; }
.op-val { color: var(--text-main); font-weight: 600; }
.op-highlight {
	background: #FFFBCC;
	border-radius: 2px;
	padding: 0 2px;
}

/* === BUTTON === */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 24px;
	font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, transform .1s;
    font-family: inherit;
}
.btn-primary:hover { background: #2a58c8; }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { background: #9bb4f0; cursor: not-allowed; }

.btn-expired {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 24px;
	font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, transform .1s;
    font-family: inherit;
}
.btn-expired:hover { background: #2a58c8; color: #ffffff; }
.btn-expired:active { transform: scale(.98); }
.btn-expired:disabled { background: #9bb4f0; cursor: not-allowed; color: #ffffff; }

.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: var(--accent);
	border: 1.5px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 10px 24px;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s;
	font-family: inherit;
}
.btn-secondary.blue { background: var(--accent); color: #ffffff; }
.btn-secondary:hover { background: var(--accent-light); }
.btn-secondary.blue:hover { background: #2a58c8; color: #ffffff; }

.btn-danger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--danger);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	padding: 11px 24px;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s;
	font-family: inherit;
}
.btn-danger:hover { background: #b02e2e; }

.form-footer {
	margin-top: 14px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 16px;
}
.card.savemode .form-footer {
	visibility: hidden !important;
}

/* === LOADER === */
.spinner {
width: 18px; height: 18px;
border: 2px solid rgba(255,255,255,.4);
border-top-color: #fff;
border-radius: 50%;
animation: spin .6s linear infinite;
display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === ALERT BANNER === */
.alert {
	border-radius: var(--radius);
	padding: 14px 18px;
	font-size: .85rem;
	margin-bottom: 20px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	display: none;
}
.alert.visible { display: flex; }
.alert-icon { flex-shrink: 0; margin-top: 1px; }
.alert.danger  { background: var(--danger-light);  color: var(--danger);  border: 1px solid #f5c2c2; }
.alert.success { background: var(--success-light); color: var(--success); border: 1px solid #b3e0ce; }
.alert.warning { background: var(--warning-light); color: var(--warning); border: 1px solid #ffd98a; }
.alert strong { display: block; font-weight: 700; margin-bottom: 3px; }

.alert svg {
    width: 24px;
    height: 24px;
}

/* === STEP 2: PRODOTTI === */
#step2 { display: none; }
#step2.active { display: block; }

/* === STEP 3: CONFERMA === */
#step3 { display: none; }
#step3.active { display: block; }

.section-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--text-main);
	margin-bottom: 4px;
}
.section-sub {
    font-size: 1rem;
    margin-bottom: 20px;
    color: var(--text-main);
}

.product-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}

.product-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color .15s, background .15s;
user-select: none;
}
.product-row:hover { border-color: var(--accent); background: var(--accent-light); }
.product-row.selected { border-color: var(--accent); background: var(--accent-light); }

.product-row input[type="checkbox"] {
width: 17px; height: 17px;
accent-color: var(--accent);
cursor: pointer;
flex-shrink: 0;
}
.product-row .prod-info { flex: 1; }
.product-row .prod-name { font-size: .88rem; font-weight: 600; color: var(--text-main); }
.product-row .prod-sub  { font-size: .76rem; color: var(--text-sub); margin-top: 2px; }
.product-row .prod-price {
font-size: .88rem;
font-weight: 700;
color: var(--text-main);
white-space: nowrap;
}

.unit-badge {
display: inline-flex;
align-items: center;
background: var(--border);
color: var(--text-sub);
border-radius: 3px;
padding: 1px 6px;
font-size: .68rem;
font-weight: 700;
margin-left: 6px;
}

/* === RECAP === */
.recap-box {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 20px;
margin-bottom: 20px;
display: none;
}
.recap-box.visible { display: block; }
.recap-box h4 {
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
color: var(--text-sub);
margin-bottom: 10px;
}
.recap-item {
display: flex;
align-items: center;
gap: 8px;
font-size: .85rem;
color: var(--text-main);
padding: 4px 0;
border-bottom: 1px dashed var(--border);
}
.recap-item:last-child { border-bottom: none; }
.recap-item svg { color: var(--accent); flex-shrink: 0; }

/* === FUORI TERMINI === */
#step-expired {display: none;}
#step-expired.active { display: block; }

.expired-notice {
background: var(--warning-light);
border: 1px solid #ffd98a;
border-radius: var(--radius);
padding: 20px 24px;
margin-bottom: 20px;
}
.expired-notice h3 {
font-size: .95rem;
font-weight: 700;
color: var(--warning);
margin-bottom: 6px;
}
.expired-notice p { font-size: .84rem; color: #7c5200; }

/* === STEP DONE === */
#step-done {
	display: none;
}
#step-done.active { display: block; text-align: center; padding: 40px 20px; }
.done-icon {width: 64px;height: 64px; display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;align-content: center;}

#step-done h2 {font-size: 1.3rem;font-weight: 700;margin-bottom: 8px;text-align: center;}
#step-done p  {font-size: .88rem;color: var(--text-sub);max-width: 420px;margin: 0 auto;text-align: center;text-wrap: balance;}

/* === MOBILE === */
@media (max-width: 700px) {
	.form-layout { grid-template-columns: 1fr; }
	.guide-panel { position: static; order: -1; }
	.card { padding: 20px; }
	.step-item {
		justify-content: center;
		flex-direction: column;
		align-content: center;
		flex-wrap: nowrap;
	}
	div#sb2 { flex: 3; }
	.step-item {
		/* white-space: normal; */
		/* text-wrap: balance; */
		text-align: center;
	}
	.page-header {
		flex-direction: column;
		align-content: center;
		align-items: center;
	}
	.page-header .title-slot {
		text-align: center;
	}
}



  /* === IMMAGINE GUIDA + OVERLAY === */
  .img-preview-wrap {
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
  }
  .img-preview-wrap:hover .img-hint { opacity: 1; }
  .img-ordine {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
    transition: filter .2s;
  }
  .img-preview-wrap:hover .img-ordine { filter: brightness(.92); }
  .img-hint {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
  }

  /* OVERLAY LIGHTBOX */
  #imgOverlay, #loadingOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
  }
  #loadingOverlay { background: rgba(59,111,232,.82); }
  #loadingOverlay p { font-size: 1.25rem; color: #ffffff; font-weight: 600; }
  
  #imgOverlay.open, #loadingOverlay.open { display: flex; }
  #imgOverlay img {
    max-width: min(900px, 96vw);
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 8px 48px rgba(0,0,0,.6);
    cursor: default;
    animation: zoomIn .18s ease;
  }
  @keyframes zoomIn {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
  }
  #overlayClose {
    position: fixed;
    top: 16px;
    right: 20px;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.15);
    border: 2px solid rgba(255,255,255,1);
    border-radius: 50%;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 10000;
    font-weight: bold;
    /* font-family: monospace; */
  }
  #overlayClose:hover { background: rgba(255,255,255,.28); }
  
  
  /* === THUMBNAIL PRODOTTO === */
  .prod-thumb {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg);
  }
  .prod-thumb-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    border: 1px dashed var(--border);
    flex-shrink: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
  }
  /* Thumb pił piccola nel recap */
  .recap-thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg);
  }
  
.reso-badge {
    background-color: #D63B3B;
    color: #ffffff;
    width: 25px;
    height: 25px;
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: 50em;
    font-size: 11px;
    font-weight: 900;
    margin: 0 0 0 auto;
}