/* ============================================================
   Dunav Shop — Premium UI
   Zadržani su svi postojeći klasni nazivi (JS/markup netaknuti),
   ali je ceo vizuelni identitet podignut na viši nivo.
   ============================================================ */

:root {
--dmsf-primary: #003b71;
--dmsf-primary-dark: #00294f;
--dmsf-primary-grad: linear-gradient(135deg, #004a8f 0%, #003b71 55%, #00294f 100%);
--dmsf-accent: #00CDE5;
--dmsf-accent-grad: linear-gradient(135deg, #36dbf0 0%, #00CDE5 100%);
--dmsf-bg: #f5f7fa;
--dmsf-bg-soft: #eef3f8;
--dmsf-border: #dce4ee;
--dmsf-text: #1f2a38;
--dmsf-muted: #66788f;
--dmsf-error: #d13438;
--dmsf-ok: #1f9d55;
--dmsf-shadow-sm: 0 2px 6px rgba(0, 35, 70, 0.06);
--dmsf-shadow-md: 0 8px 24px rgba(0, 35, 70, 0.10);
--dmsf-shadow-lg: 0 24px 60px rgba(0, 25, 55, 0.18);
--dmsf-radius-sm: 10px;
--dmsf-radius: 16px;
--dmsf-radius-lg: 24px;
--dmsf-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.dmsf-shop {
font-family: var(--dmsf-font);
color: var(--dmsf-text);
max-width: 920px;
margin: 0 auto;
padding: 8px 0 32px;
line-height: 1.55;
}

.dmsf-shop-title {
font-size: 2rem;
font-weight: 800;
text-align: center;
margin: 0 0 12px;
background: var(--dmsf-primary-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.02em;
}

/* ── purpose type cards ── */
.dmsf-shop-purpose {
margin-bottom: 32px;
text-align: center;
}
.dmsf-shop-purpose-desc {
font-size: 1.05rem;
color: var(--dmsf-muted);
margin: 0 0 22px;
}
.dmsf-shop-purpose-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
button.dmsf-shop-purpose-card {
flex: 1 1 240px;
max-width: 290px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 34px 24px 28px;
background: #fff !important;
border: 2px solid var(--dmsf-border) !important;
border-radius: var(--dmsf-radius) !important;
cursor: pointer;
text-align: center;
box-shadow: var(--dmsf-shadow-sm);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
position: relative;
overflow: hidden;
}
button.dmsf-shop-purpose-card::after {
content: "";
position: absolute;
inset: 0;
background: var(--dmsf-bg-soft);
opacity: 0;
transition: opacity 0.18s ease;
z-index: 0;
}
button.dmsf-shop-purpose-card > * {
position: relative;
z-index: 1;
}
button.dmsf-shop-purpose-card:hover {
transform: translateY(-4px);
box-shadow: var(--dmsf-shadow-md);
border-color: var(--dmsf-primary) !important;
}
button.dmsf-shop-purpose-card:hover::after {
opacity: 1;
}
button.dmsf-shop-purpose-card.selected {
border-color: var(--dmsf-primary) !important;
background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%) !important;
box-shadow: 0 10px 28px rgba(0, 59, 113, 0.18);
}
.dmsf-shop-purpose-card-title {
font-weight: 800;
font-size: 1.2rem;
color: var(--dmsf-primary);
}
.dmsf-shop-purpose-card-desc {
font-size: 0.85rem;
color: var(--dmsf-muted);
}
/* Slika na kartici tipa osiguranja (opciono — samo ako je uploadovana) */
.dmsf-shop-purpose-card-img {
width: 100%;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border-radius: calc(var(--dmsf-radius) - 6px);
overflow: hidden;
background: var(--dmsf-bg-soft);
}
.dmsf-shop-purpose-card-img img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
display: block;
}

/* ── stepper (arrow/chevron style) ── */
.dmsf-shop-steps {
display: flex;
align-items: center;
justify-content: center;
margin: 8px 0 36px;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
overflow: hidden;
border-radius: var(--dmsf-radius);
}
.dmsf-shop-step {
flex: 1 1 0;
min-width: 0;
text-align: center;
position: relative;
padding: 14px 18px 14px 30px;
font-size: 0.82rem;
font-weight: 700;
color: var(--dmsf-muted);
background: #eef2f7;
border: 1px solid var(--dmsf-border);
border-right: none;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.2s ease;
cursor: default;
}
.dmsf-shop-step:first-child {
border-radius: var(--dmsf-radius) 0 0 var(--dmsf-radius);
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
padding-left: 18px;
}
.dmsf-shop-step:last-child {
border-radius: 0 var(--dmsf-radius) var(--dmsf-radius) 0;
border-right: 1px solid var(--dmsf-border);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
padding-right: 20px;
}
.dmsf-shop-step.active {
background: var(--dmsf-primary-grad);
border-color: var(--dmsf-primary-dark);
color: #fff;
box-shadow: 0 6px 18px rgba(0, 59, 113, 0.35);
z-index: 2;
}
.dmsf-shop-step.done {
background: var(--dmsf-ok);
border-color: #1a8449;
color: #fff;
}
.dmsf-shop-step.done + .dmsf-shop-step,
.dmsf-shop-step.active + .dmsf-shop-step {
border-left-color: transparent;
}
.dmsf-shop-step.active + .dmsf-shop-step.done {
border-left-color: transparent;
}

/* ── panels ── */
.dmsf-shop-panel {
display: none;
background: #fff;
border: 1px solid var(--dmsf-border);
border-radius: var(--dmsf-radius);
padding: 36px;
margin-bottom: 26px;
box-shadow: var(--dmsf-shadow-md);
animation: dmsfFadeIn 0.3s ease;
}
.dmsf-shop-panel-active {
display: block;
}
@keyframes dmsfFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.dmsf-shop-panel-title {
font-size: 1.45rem;
font-weight: 800;
margin: 0 0 8px;
color: var(--dmsf-primary);
letter-spacing: -0.01em;
}
.dmsf-shop-panel-desc {
color: var(--dmsf-muted);
margin: 0 0 26px;
font-size: 0.95rem;
}
.dmsf-shop-subtitle {
font-size: 1.1rem;
font-weight: 700;
margin: 26px 0 10px;
color: var(--dmsf-primary);
}

/* ── fields ── */
.dmsf-shop-field {
margin-bottom: 20px;
}

/* ── honeypot (anti-bot) — sakrij od ljudi, ostavi botovima ── */
.dmsf-shop-hp {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.dmsf-shop-hp input {
width: 1px;
height: 1px;
}
.dmsf-shop-field label {
display: block;
font-weight: 600;
margin-bottom: 8px;
font-size: 0.88rem;
color: var(--dmsf-text);
}
.dmsf-shop-input,
.dmsf-shop-select {
width: 100%;
padding: 13px 15px;
border: 1.5px solid var(--dmsf-border);
border-radius: var(--dmsf-radius-sm);
background: #fbfcfe;
font-size: 0.95rem;
color: var(--dmsf-text);
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.dmsf-shop-input:hover,
.dmsf-shop-select:hover {
border-color: #c6d3e3;
}
.dmsf-shop-input:focus,
.dmsf-shop-select:focus {
outline: none;
border-color: var(--dmsf-primary);
background: #fff;
box-shadow: 0 0 0 4px rgba(0, 59, 113, 0.10);
}
.dmsf-shop-input[readonly] {
background: var(--dmsf-bg-soft);
color: var(--dmsf-muted);
cursor: default;
}
.dmsf-shop-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}

/* ── schema grid (width: full zauzima cijeli red) ── */
.dmsf-shop-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: start;
}
.dmsf-shop-grid .dmsf-shop-width-full {
grid-column: 1 / -1;
}
.dmsf-shop-grid .dmsf-shop-categories,
.dmsf-shop-grid .dmsf-shop-checkboxes {
flex-wrap: wrap;
}

/* ── category cards ── */
.dmsf-shop-categories {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.dmsf-shop-category {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
border: 1.5px solid var(--dmsf-border);
border-radius: 999px;
cursor: pointer;
background: #fff;
font-weight: 600;
font-size: 0.92rem;
transition: all 0.15s ease;
}
.dmsf-shop-category:hover {
border-color: var(--dmsf-primary);
transform: translateY(-1px);
}
.dmsf-shop-category.selected {
border-color: var(--dmsf-primary);
background: var(--dmsf-primary-grad);
color: #fff;
box-shadow: 0 6px 16px rgba(0, 59, 113, 0.28);
}
.dmsf-shop-category input {
display: none;
}

/* ── add-ons checkboxes ── */
.dmsf-shop-checkboxes {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.dmsf-shop-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1.5px solid var(--dmsf-border);
border-radius: var(--dmsf-radius-sm);
padding: 13px 18px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.15s ease;
}
.dmsf-shop-checkbox:hover {
border-color: var(--dmsf-accent);
}
.dmsf-shop-checkbox:has(input:checked) {
border-color: var(--dmsf-accent);
background: linear-gradient(135deg, #fffdf7, #fdf3e1);
box-shadow: 0 4px 12px rgba(232, 163, 61, 0.18);
}
.dmsf-shop-checkbox input {
accent-color: var(--dmsf-accent);
width: 17px;
height: 17px;
cursor: pointer;
}

/* ── insured rows ── */
.dmsf-shop-insured {
background: linear-gradient(135deg, #fbfcfe 0%, #f4f8fc 100%);
border: 1.5px solid var(--dmsf-border);
border-radius: var(--dmsf-radius);
padding: 24px 24px 20px;
margin-bottom: 18px;
position: relative;
box-shadow: var(--dmsf-shadow-sm);
transition: border-color 0.15s;
}
.dmsf-shop-insured:hover {
border-color: #c6d3e3;
}
.dmsf-shop-insured .dmsf-shop-remove {
position: absolute;
top: 14px;
right: 14px;
background: rgba(209, 52, 56, 0.08);
border: none;
color: var(--dmsf-error);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
padding: 5px 10px;
border-radius: 8px;
transition: background 0.15s;
}
.dmsf-shop-insured .dmsf-shop-remove:hover {
background: rgba(209, 52, 56, 0.16);
}

/* ── review / totals ── */
.dmsf-shop-review {
margin-bottom: 8px;
}
.dmsf-shop-review h4 {
font-size: 0.95rem;
font-weight: 700;
margin: 20px 0 12px;
color: var(--dmsf-primary);
border-bottom: 2px solid var(--dmsf-bg-soft);
padding-bottom: 10px;
letter-spacing: 0.02em;
}
.dmsf-shop-review-row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 8px 0;
font-size: 0.93rem;
}
.dmsf-shop-review-row span:last-child {
font-weight: 600;
text-align: right;
color: var(--dmsf-text);
}
.dmsf-shop-total {
background: var(--dmsf-primary-grad);
color: #fff;
border-radius: var(--dmsf-radius);
padding: 24px;
margin-top: 24px;
text-align: center;
font-size: 1.05rem;
box-shadow: 0 10px 26px rgba(0, 59, 113, 0.22);
}
.dmsf-shop-total strong {
display: block;
font-size: 1.9rem;
margin-top: 6px;
color: var(--dmsf-accent);
font-weight: 800;
}

/* ── agreements ── */
.dmsf-shop-agree {
background: #fbfcfe;
border: 1px solid var(--dmsf-border);
border-radius: var(--dmsf-radius-sm);
padding: 14px 18px;
margin: 18px 0 14px;
}
.dmsf-shop-agree:first-of-type {
margin-top: 26px;
}
.dmsf-shop-agree label {
display: flex;
align-items: flex-start;
gap: 10px;
font-weight: 400;
font-size: 0.9rem;
cursor: pointer;
line-height: 1.5;
}
.dmsf-shop-agree input {
margin-top: 5px;
accent-color: var(--dmsf-primary);
width: 17px;
height: 17px;
}

/* ── payment / success ── */
.dmsf-shop-payment {
text-align: center;
padding: 16px 0;
}
.dmsf-shop-success {
text-align: center;
padding: 48px 24px;
}
.dmsf-shop-success .dmsf-shop-success-icon {
width: 84px;
height: 84px;
margin: 0 auto 24px;
border-radius: 50%;
background: linear-gradient(135deg, #22c55e, #15803d);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
box-shadow: 0 14px 34px rgba(21, 128, 61, 0.35);
animation: dmsfPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dmsfPop {
0% { transform: scale(0.4); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.dmsf-shop-success h3 {
color: var(--dmsf-ok);
margin-bottom: 14px;
font-size: 1.5rem;
font-weight: 800;
}

/* ── nav ── */
.dmsf-shop-nav {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 24px;
}
button.dmsf-shop-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
border-radius: 999px;
border: none !important;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.15s ease;
background: var(--dmsf-primary-grad) !important;
color: #fff !important;
box-shadow: 0 8px 20px rgba(0, 59, 113, 0.25);
}
button.dmsf-shop-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 59, 113, 0.32);
background: var(--dmsf-primary-dark) !important;
}
button.dmsf-shop-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Loader/spinner unutar dugmeta — pokazuje se dok traje AJAX */
.dmsf-shop-btn .dmsf-spinner {
display: none;
width: 16px;
height: 16px;
margin-right: 8px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: dmsf-spin 0.7s linear infinite;
vertical-align: -3px;
}
button.dmsf-shop-btn.is-loading .dmsf-spinner {
display: inline-block;
}
@keyframes dmsf-spin {
to { transform: rotate(360deg); }
}
button.dmsf-shop-prev {
background: #eef1f5 !important;
color: var(--dmsf-text) !important;
box-shadow: var(--dmsf-shadow-sm);
}
button.dmsf-shop-prev:hover {
background: #e2e8f0 !important;
}
button.dmsf-shop-add,
button.dmsf-shop-pay {
background: var(--dmsf-accent-grad) !important;
color: var(--dmsf-primary-dark) !important;
box-shadow: 0 8px 20px rgba(0, 205, 229, 0.35);
}
button.dmsf-shop-add:hover,
button.dmsf-shop-pay:hover {
background: #0ab8cf !important;
color: var(--dmsf-primary-dark) !important;
}

/* ── inline field errors ── */
.dmsf-shop-field-error {
color: var(--dmsf-error);
font-size: 0.8rem;
margin-top: 6px;
font-weight: 600;
line-height: 1.3;
}
.dmsf-shop-input.dmsf-shop-invalid,
.dmsf-shop-select.dmsf-shop-invalid {
border-color: var(--dmsf-error);
background: #fff8f8;
}
.dmsf-shop-input.dmsf-shop-invalid:focus,
.dmsf-shop-select.dmsf-shop-invalid:focus {
box-shadow: 0 0 0 4px rgba(209, 52, 56, 0.12);
}

/* ── Tom Select overrides ── */
.dmsf-shop .ts-wrapper {
position: relative;
z-index: 2;
}
.dmsf-shop .ts-wrapper .ts-control,
.dmsf-shop .ts-wrapper.single .ts-control {
border: 1.5px solid var(--dmsf-border);
border-radius: var(--dmsf-radius-sm);
padding: 11px 14px;
font-size: 0.95rem;
color: var(--dmsf-text);
background: #fbfcfe;
cursor: pointer;
transition: all 0.15s;
}
.dmsf-shop .ts-wrapper .ts-control:hover {
border-color: #c6d3e3;
}
.dmsf-shop .ts-wrapper.focus .ts-control,
.dmsf-shop .ts-wrapper.focus .ts-control:hover {
border-color: var(--dmsf-primary);
background: #fff;
box-shadow: 0 0 0 4px rgba(0, 59, 113, 0.10);
}
.dmsf-shop .ts-dropdown,
.dmsf-shop .ts-wrapper .ts-dropdown {
position: absolute;
z-index: 9999 !important;
border: 1px solid var(--dmsf-border);
border-radius: var(--dmsf-radius-sm);
box-shadow: var(--dmsf-shadow-md);
font-size: 0.9rem;
background: #fff;
overflow: visible;
}
.dmsf-shop .ts-dropdown .active {
background: var(--dmsf-bg-soft);
color: var(--dmsf-primary);
}
.dmsf-shop .ts-dropdown [data-selectable].option.highlight,
.dmsf-shop .ts-dropdown .option.active {
background: var(--dmsf-bg-soft);
color: var(--dmsf-primary);
}
.dmsf-shop .ts-wrapper .ts-control .item {
color: var(--dmsf-text);
}
.dmsf-shop .ts-wrapper.single .ts-control:after {
border-color: var(--dmsf-muted) transparent transparent transparent;
}

/* ── Flatpickr overrides ── */
.dmsf-shop .flatpickr-calendar {
border-radius: var(--dmsf-radius);
box-shadow: var(--dmsf-shadow-lg);
border: 1px solid var(--dmsf-border);
}
.dmsf-shop .flatpickr-day.selected,
.dmsf-shop .flatpickr-day.selected:hover {
background: var(--dmsf-primary);
border-color: var(--dmsf-primary);
}
.dmsf-shop .flatpickr-day.today {
border-color: var(--dmsf-accent);
}

/* ── modal ── */
.dmsf-shop-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(10, 25, 45, 0.6);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.2s;
}
.dmsf-shop-modal.open {
opacity: 1;
}
.dmsf-shop-modal-box {
position: relative;
width: 100%;
max-width: 460px;
background: #fff;
border-radius: var(--dmsf-radius-lg);
padding: 36px 32px 28px;
box-shadow: var(--dmsf-shadow-lg);
transform: translateY(10px) scale(0.97);
transition: transform 0.2s;
}
.dmsf-shop-modal.open .dmsf-shop-modal-box {
transform: translateY(0) scale(1);
}
.dmsf-shop-modal-close {
position: absolute;
top: 14px;
right: 16px;
background: var(--dmsf-bg-soft);
border: none;
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 1.1rem;
line-height: 1;
color: var(--dmsf-muted);
cursor: pointer;
transition: background 0.15s;
}
.dmsf-shop-modal-close:hover {
background: #dfe7f0;
}
.dmsf-shop-modal-icon {
width: 60px;
height: 60px;
margin: 0 auto 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
font-weight: 700;
}
.dmsf-shop-modal-icon.error {
background: #fee2e2;
color: #b91c1c;
}
.dmsf-shop-modal-icon.success {
background: #dcfce7;
color: #15803d;
}
.dmsf-shop-modal-icon.confirm {
background: #e0f2fe;
color: #0369a1;
}
.dmsf-shop-modal-icon.info {
background: var(--dmsf-bg-soft);
color: var(--dmsf-primary);
}
.dmsf-shop-modal-title {
text-align: center;
font-size: 1.15rem;
font-weight: 800;
margin: 0 0 8px;
color: var(--dmsf-text);
}
.dmsf-shop-modal-body {
text-align: center;
font-size: 0.93rem;
color: var(--dmsf-muted);
line-height: 1.6;
margin-bottom: 18px;
}
.dmsf-shop-modal-actions {
display: flex;
justify-content: center;
gap: 10px;
}
button.dmsf-shop-btn-primary {
background: var(--dmsf-primary-grad) !important;
color: #fff !important;
}
button.dmsf-shop-btn-primary:hover {
background: var(--dmsf-primary-dark) !important;
}
button.dmsf-shop-btn-ghost {
background: #eef1f5 !important;
color: var(--dmsf-text) !important;
box-shadow: none;
}
button.dmsf-shop-btn-ghost:hover {
background: #e2e8f0 !important;
}

/* ── responsive ── */
@media (max-width: 700px) {
.dmsf-shop-row {
grid-template-columns: 1fr;
gap: 0;
}
.dmsf-shop-grid {
grid-template-columns: 1fr;
gap: 0;
}
.dmsf-shop-step {
font-size: 0.62rem;
padding: 10px 8px 10px 20px;
}
.dmsf-shop-step:first-child {
padding-left: 12px;
}
.dmsf-shop-step:last-child {
padding-right: 14px;
}
.dmsf-shop-panel {
padding: 22px 18px;
}
.dmsf-shop-steps {
padding: 0;
}
.dmsf-shop-nav {
flex-direction: column;
}
.dmsf-shop-nav .dmsf-shop-btn {
width: 100%;
}
.dmsf-shop-modal-box {
padding: 30px 22px 22px;
}
button.dmsf-shop-purpose-card {
padding: 26px 18px 22px;
}
.dmsf-shop-title {
font-size: 1.6rem;
}
}

/* ── Overlay loader (globalni, tokom AJAX-a) ───────────── */
.dmsf-shop-loading {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
}
.dmsf-shop-loading.open {
opacity: 1;
visibility: visible;
}
.dmsf-shop-loading-box {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
padding: 14px 26px;
box-shadow: 0 12px 32px rgba(0, 59, 113, 0.18);
}
.dmsf-shop-loading-spinner {
width: 22px;
height: 22px;
border: 3px solid rgba(0, 59, 113, 0.2);
border-top-color: var(--dmsf-primary);
border-radius: 50%;
animation: dmsf-spin 0.7s linear infinite;
}
.dmsf-shop-loading-text {
font-weight: 600;
color: var(--dmsf-primary);
font-size: 0.95rem;
}