/*
 * Osclass Pay Redesign — CSS
 * Uporablja opr-* classe (brez konflikta z osp-* iz style-child.css)
 * ─────────────────────────────────────────────────────────────────
 */

/* =============================================================
   INLINE PROMOTE — gumb "Promoviraj" na user-items
   ============================================================= */
#opr-promos,
.opr-promote-wrap {
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
    background: none;
}

.opr-promote-btn {
    font-size: 13px;
    margin: 0 10px 0 0;
    color: #111;
    float: left;
    font-weight: normal;
    padding: 4px 6px;
    line-height: 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    background: none;
}

.opr-promote-btn:hover {
    border-color: rgba(0, 0, 0, 0.2);
    color: #111;
    text-decoration: none;
}

.opr-elem {
    font-size: 13px;
    margin: 0 10px 0 0;
    color: #111;
    float: left;
    padding: 4px 6px;
    line-height: 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: none;
}

.opr-elem.opr-warn {
    border-color: #e67e22;
    color: #e67e22;
}

.opr-elem.opr-inactive {
    border-color: #ccc;
    color: #999;
}

/* =============================================================
   CHECKOUT — "Spremeni izbiro" link
   ============================================================= */
.opr-change-selection {
    margin: 15px 0;
    clear: both;
}

.opr-change-selection a {
    color: #555;
    font-size: 13px;
    text-decoration: none;
}

.opr-change-selection a:hover {
    color: #111;
    text-decoration: underline;
}


/* =============================================================
   SELECTOR PAGE — Pricing redesign
   ============================================================= */

/* ─── ITEM BAR ─── */
.opr-item-bar {
  background: #fafafa;
  border-bottom: 1px solid #eee;
  padding: 12px 0;
}
.opr-item-bar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.opr-item-bar img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.opr-item-bar-info {
  flex: 1;
  min-width: 0;
}
.opr-item-bar-info h3 {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}
.opr-item-bar-info span {
  font-size: 14px;
  font-weight: 700;
  color: #2a6b50;
}
.opr-item-bar-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #777;
  text-decoration: none;
  border: 1px solid #ddd;
  padding: 7px 14px;
  border-radius: 20px;
  transition: all 0.15s;
}
.opr-item-bar-link a:hover {
  border-color: #bbb;
  color: #444;
}
.opr-item-bar-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ─── PAGE CONTAINER ─── */
.opr-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 0;
}

/* ─── HERO ─── */
.opr-hero {
  text-align: center;
  margin-bottom: 10px;
}
.opr-hero-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: linear-gradient(288deg, #123659, #5d8d6a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}
.opr-hero h1 {
  font-size: 30px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
}
.opr-hero p {
  font-size: 15px;
  color: #888;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ─── PRICING CARDS ─── */
.opr-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 20px;
  padding: 30px 0;
}

.opr-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 14px;
  padding: 32px 24px 28px;
  text-align: center;
  position: relative;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.opr-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.09);
  border-color: #ccc;
}

.opr-card.opr-popular {
  background: #fff;
  border: 2px solid #2a6b50;
  padding-top: 40px;
  box-shadow: 0 8px 32px rgba(18,54,89,0.14);
}

.opr-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
}
.opr-badge-popular {
  background: linear-gradient(288deg, #123659, #5d8d6a);
  color: #fff;
}
.opr-badge-default {
  background: #f0f0f0;
  color: #666;
}
.opr-badge-value {
  background: #e8f0eb;
  color: #3a7a56;
}

.opr-duration {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}

.opr-duration-sub {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 20px;
}
.opr-popular .opr-duration-sub {
  color: #999;
}

.opr-recommend-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2a6b50;
  margin-bottom: 4px;
}

.opr-price {
  font-size: 36px;
  font-weight: 800;
  color: #111;
  line-height: 1;
  margin-bottom: 4px;
}

.opr-daily {
  font-size: 13px;
  color: #aaa;
  margin-bottom: 24px;
}

/* Select button */
.opr-select-btn {
  display: block;
  width: 100%;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.15s;
}

.opr-card .opr-select-btn {
  background: #f0f4f2;
  color: #123659;
  border: none;
}
.opr-card .opr-select-btn:hover {
  background: #e2ebe6;
}

.opr-card.opr-popular .opr-select-btn {
  background: linear-gradient(288deg, #123659, #5d8d6a);
  color: #fff;
  border: none;
}
.opr-card.opr-popular .opr-select-btn:hover {
  background: linear-gradient(288deg, #0e2a47, #4a7a59);
}

/* ─── BACK LINK ─── */
.opr-back-link {
  text-align: center;
  padding-bottom: 48px;
}
.opr-back-link a {
  color: #aaa;
  font-size: 13px;
  text-decoration: none;
}
.opr-back-link a:hover {
  color: #666;
  text-decoration: underline;
}

/* ─── BENEFITS SECTION ─── */
.opr-benefits-section {
  background: #f5f5f5;
  padding: 56px 0 48px;
}
.opr-benefits-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
.opr-benefits-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
}
.opr-benefits-divider {
  width: 48px;
  height: 3px;
  background: linear-gradient(288deg, #123659, #5d8d6a);
  border-radius: 2px;
  margin: 0 auto 44px;
}
.opr-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.opr-benefit-card {
  text-align: left;
}
.opr-benefit-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
}
.opr-benefit-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
}
.opr-benefit-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.6;
}

/* ─── SOCIAL PROOF ─── */
.opr-proof-section {
  background: #fff;
  padding: 56px 0 60px;
  border-top: 1px solid #eee;
}
.opr-proof-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
.opr-proof-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}
.opr-proof-subtitle {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-bottom: 32px;
}
.opr-proof-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.opr-proof-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  pointer-events: none;
  user-select: none;
}
.opr-proof-thumb {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
}
.opr-proof-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.opr-proof-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: linear-gradient(288deg, #123659, #5d8d6a);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.2;
}
.opr-proof-item-info {
  flex: 1;
  min-width: 0;
}
.opr-proof-item-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.opr-proof-item-info span {
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

/* ─── MOBILE CTA BOX (hidden on desktop) ─── */
.opr-mobile-cta {
  display: none;
  background: #f7f8f9;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.opr-mobile-cta-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.opr-mobile-cta-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #444;
  line-height: 1.4;
}
.opr-mobile-cta-list li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.opr-mobile-cta-btn {
  display: block;
  width: 100%;
  padding: 14px 0;
  border-radius: 10px;
  background: linear-gradient(288deg, #123659, #5d8d6a);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-align: center;
}
.opr-mobile-cta-btn:hover {
  background: linear-gradient(288deg, #0e2a47, #4a7a59);
}

/* =============================================================
   MODAL — Izpostavi oglas popup
   ============================================================= */

/* Header znižanje med odprtim modalom */
body.opr-modal-active header.site-header {
    z-index: 1 !important;
}

/* Overlay */
.opr-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999999;
    background: rgba(0, 0, 0, 0.72);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.opr-modal-overlay.opr-modal-open {
    display: flex;
}

/* Modal card */
.opr-modal {
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px 32px;
    max-width: 440px;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
    animation: oprModalIn 0.2s ease-out;
}

@keyframes oprModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Close button */
.opr-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    line-height: 1;
    border-radius: 8px;
    transition: all 0.15s;
}

.opr-modal-close:hover {
    color: #333;
    background: #f0f0f0;
}

/* Title & description */
.opr-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px;
    line-height: 1.3;
}

.opr-modal-desc {
    font-size: 14px;
    color: #777;
    margin: 0 0 24px;
    line-height: 1.5;
}

/* Options container */
.opr-modal-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

/* Option label (radio card) */
.opr-modal-option {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f7f7f7;
    border: 1.5px solid transparent;
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}

.opr-modal-option:hover {
    background: #f2f2f2;
}

/* Selected state (class dodana z JS) */
.opr-modal-option.opr-selected {
    background: #eef4ff;
    border-color: #2563eb;
    border-style: solid;
}

/* Hidden native radio */
.opr-modal-option input[type="radio"] {
    display: none;
}

/* Custom radio circle */
.opr-modal-radio {
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s;
}

.opr-modal-option.opr-selected .opr-modal-radio {
    border-color: #2563eb;
}

.opr-modal-option.opr-selected .opr-modal-radio::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    background: #2563eb;
    border-radius: 50%;
}

/* Option text */
.opr-modal-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.opr-modal-option-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.opr-modal-option-text small {
    font-size: 12px;
    color: #999;
    font-weight: 400;
}

/* Price wrap */
.opr-modal-option-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 1px;
}

.opr-modal-option-price {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
}

.opr-modal-option-daily {
    font-size: 11px;
    font-weight: 400;
    color: #999;
    white-space: nowrap;
}

.opr-modal-option-daily.opr-modal-daily-best {
    color: #8b1a1a;
}

/* Best value badge */
.opr-modal-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: #111;
    color: #fff;
    padding: 3px 10px;
    border-radius: 6px;
    line-height: 1.4;
}

/* Submit button */
.opr-modal-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 0;
    border: none;
    border-radius: 50px;
    background: #111;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 16px;
}

.opr-modal-submit:hover {
    background: #333;
}


/* Validation error */
.opr-modal-error {
    font-size: 12px;
    color: #c0392b;
    text-align: center;
    margin: 8px 0 0;
}

/* Secure note */
.opr-modal-secure {
    font-size: 12px;
    color: #aaa;
    text-align: center;
    margin: 10px 0 0;
}

/* ─────────────────────────────────────────────
   TRUST BADGES (pod submit gumbom, nad pay icons)
   ───────────────────────────────────────────── */
.opr-modal-trust-row {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    margin: 4px 0 14px !important;
    padding: 10px 6px !important;
    border-top: 1px solid #f1f2f4 !important;
    border-bottom: 1px solid #f1f2f4 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.opr-trust {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #6b7280 !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}
.opr-trust svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0;
    stroke: #059669;
}

/* ─────────────────────────────────────────────
   PAYMENT ICONS — unified svetlo sive, full width
   ───────────────────────────────────────────── */
.opr-modal-pay-icons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Unified modifier — poenotena svetlo siva, razširjeno na full width (= submit gumb) */
.opr-modal-pay-icons-unified .opr-mpi {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 32px !important;
    padding: 0 6px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    color: #9aa0a6 !important;   /* svetlo siva — brand tokens */
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    transition: color 150ms ease, border-color 150ms ease;
}
.opr-modal-pay-icons-unified .opr-mpi:hover {
    color: #5f6368 !important;
    border-color: #d1d5db !important;
}

/* Brand-specific resets within unified mode — reuse original classes but neutralize */
.opr-modal-pay-icons-unified .opr-mpi-visa       { background: #fff !important; border-color: #e5e7eb !important; color: #9aa0a6 !important; }
.opr-modal-pay-icons-unified .opr-mpi-visa i     { color: currentColor !important; font-style: italic; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.opr-modal-pay-icons-unified .opr-mpi-mc svg     { width: 26px !important; height: 16px !important; }
.opr-modal-pay-icons-unified .opr-mpi-mc svg circle:first-child { fill: currentColor !important; opacity: 0.75; }
.opr-modal-pay-icons-unified .opr-mpi-mc svg circle:last-child  { fill: currentColor !important; opacity: 0.5;  }
.opr-modal-pay-icons-unified .opr-mpi-pp i       { color: currentColor !important; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 0; }
.opr-modal-pay-icons-unified .opr-mpi-apple      { background: #fff !important; border-color: #e5e7eb !important; color: #9aa0a6 !important; font-family: inherit !important; font-size: 11px !important; font-weight: 600 !important; gap: 2px; }
.opr-modal-pay-icons-unified .opr-mpi-apple svg  { fill: currentColor !important; }
.opr-modal-pay-icons-unified .opr-mpi-gpay       { font-size: 11px !important; letter-spacing: 0 !important; }
.opr-modal-pay-icons-unified .opr-mpi-gpay b     { color: currentColor !important; font-weight: 700; }

/* ─────────────────────────────────────────────
   LEGACY payment icons (staro barvno) — ohranjeno
   za obratno združljivost, če bi se pay-icons
   uporabile brez .opr-modal-pay-icons-unified
   ───────────────────────────────────────────── */
.opr-mpi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 66px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #555 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.opr-mpi b  { font-weight: 700; font-style: normal; }
.opr-mpi i  { font-style: italic; }

/* Legacy brand colors (samo če ni .opr-modal-pay-icons-unified) */
.opr-modal-pay-icons:not(.opr-modal-pay-icons-unified) .opr-mpi-visa                    { background: #1a1f71 !important; border-color: #1a1f71 !important; }
.opr-modal-pay-icons:not(.opr-modal-pay-icons-unified) .opr-mpi-visa i                  { color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.5px; }
.opr-modal-pay-icons:not(.opr-modal-pay-icons-unified) .opr-mpi-mc svg circle:first-child  { fill: #EB001B !important; }
.opr-modal-pay-icons:not(.opr-modal-pay-icons-unified) .opr-mpi-mc svg circle:last-child   { fill: #F79E1B !important; }
.opr-modal-pay-icons:not(.opr-modal-pay-icons-unified) .opr-mpi-mc svg path                { fill: #FF5F00 !important; }
.opr-modal-pay-icons:not(.opr-modal-pay-icons-unified) .opr-mpi-pp                       { font-style: italic; }
.opr-modal-pay-icons:not(.opr-modal-pay-icons-unified) .opr-mpi-apple                    { background: #000 !important; border-color: #000 !important; color: #fff !important; font-family: -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 9px !important; font-weight: 500 !important; }
.opr-modal-pay-icons:not(.opr-modal-pay-icons-unified) .opr-mpi-gpay                     { font-size: 9px !important; letter-spacing: -0.3px !important; }


/* ─── MODAL RESPONSIVE ─── */
@media (max-width: 720px) {
    .opr-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .opr-modal {
        border-radius: 20px 20px 0 0;
        padding: 28px 20px 24px;
        max-width: 100%;
        animation: oprModalSlideUp 0.25s ease-out;
    }

    @keyframes oprModalSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .opr-modal-title {
        font-size: 20px;
    }

    .opr-modal-option {
        padding: 14px 14px;
    }

    .opr-modal-option-price {
        font-size: 15px;
    }
}


/* ─── RESPONSIVE ─── */
@media (max-width: 720px) {
  .opr-page { padding-top: 24px; }
  .opr-hero h1 { font-size: 22px; }
  .opr-hero p { font-size: 13px; }

  /* Pricing → horizontal chips */
  .opr-pricing {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 16px 0;
    margin-bottom: 0;
  }
  .opr-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
  }
  .opr-card.opr-popular {
    padding: 0;
  }
  .opr-badge {
    display: none;
  }
  .opr-duration {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    background: #e8e8e8;
    margin: 0;
    padding: 7px 0;
    width: 100%;
    order: 1;
  }
  .opr-card.opr-popular .opr-duration {
    background: linear-gradient(288deg, #123659, #5d8d6a);
    color: #fff;
  }
  .opr-recommend-label {
    font-size: 9px;
    margin: 6px 0 0;
    order: 2;
  }
  .opr-price {
    font-size: 20px;
    margin-bottom: 1px;
    padding-top: 6px;
    order: 3;
  }
  .opr-card:not(.opr-popular) .opr-price {
    padding-top: 14px;
  }
  .opr-daily {
    font-size: 10px;
    color: #999;
    margin-bottom: 0;
    padding-bottom: 14px;
    order: 4;
  }
  .opr-duration-sub {
    display: none;
  }
  .opr-select-btn {
    display: none;
  }

  /* Mobile CTA box */
  .opr-mobile-cta {
    display: block;
  }

  /* Item bar */
  .opr-item-bar-inner {
    gap: 10px;
  }
  .opr-item-bar img {
    width: 40px;
    height: 40px;
  }
  .opr-item-bar-link { display: none; }

  /* Benefits */
  .opr-benefits-section { padding: 36px 0 32px; }
  .opr-benefits-title { font-size: 20px; }
  .opr-benefits-divider { margin-bottom: 28px; }
  .opr-benefits-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
    gap: 24px;
  }

  /* Social proof */
  .opr-proof-section { padding: 36px 0 40px; }
  .opr-proof-title { font-size: 18px; }
  .opr-proof-list { gap: 10px; }
  .opr-proof-thumb { width: 56px; height: 56px; }
}


/* =============================================================
   CHECKOUT V2 — Mockup redesign (v2.0.0)
   2-stolpična mreža plačilnih metod, black pill CTA, trust badges.
   Popoln override osclass_pay .osp-pay-button stilov.
   ============================================================= */

/* ─── Outer container — centriran, svetlo ozadje ─── */
.opr-checkout-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #111;
}

/* ─── Back link — nad kartico ─── */
.opr-chk-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #888;
    text-decoration: none;
    margin: 0 auto 10px;
    max-width: 560px;
    width: 100%;
    transition: color 0.15s;
}
.opr-chk-back:hover { color: #333; }
.opr-chk-back svg   { flex-shrink: 0; }

/* ─── Glavna kartica ─── */
.opr-chk-card {
    background: #fff;
    border-radius: 20px;
    padding: 24px 28px 20px;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
}

/* ─── Header ─── */
.opr-chk-header {
    text-align: center;
    margin-bottom: 16px;
}
.opr-chk-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}
.opr-chk-header p {
    font-size: 13px;
    color: #888;
    margin: 0;
    line-height: 1.4;
}

/* ─── Divider ─── */
.opr-chk-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 0 -28px 16px;
}

/* ─── Povzetek naročila ─── */
.opr-chk-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f9f9f9;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.opr-chk-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.opr-chk-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.opr-chk-thumb svg {
    display: block;
}

.opr-chk-info {
    flex: 1;
    min-width: 0;
}
.opr-chk-title {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.opr-chk-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.opr-chk-badge {
    font-size: 11px;
    font-weight: 600;
    background: #eef5f0;
    color: #2a7a50;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.opr-chk-dur {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}
.opr-chk-price {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ─── Methods label ─── */
.opr-chk-methods-label {
    font-size: 11px;
    font-weight: 700;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* =============================================================
   PAYMENT METHODS — 2-stolpična mreža
   Reset vseh osclass_pay .osp-pay-button stilov.
   ============================================================= */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods {
    list-style: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    overflow: visible !important;
    /* 2-col grid */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

/* ─── Skrij originalni label ─── */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > label {
    display: none !important;
}

/* =============================================================
   CHECK MODE — li.osp-chk-pay-btn kot kartica
   ============================================================= */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn {
    /* Card dizajn */
    background: #fff !important;
    border: 2px solid #e8e8e8 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s !important;
    height: auto !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    position: relative !important;
}
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn:hover {
    border-color: #ccc !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    transform: translateY(-1px) !important;
}
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn.osp-selected {
    border-color: #111 !important;
    box-shadow: 0 0 0 1px #111 !important;
    transform: none !important;
}

/* osp-chk-main: vertikalni stolpec (logo → ime → opis) */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn .osp-chk-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 12px 12px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    cursor: pointer !important;
    min-height: 96px !important;
}

/* Skrij radio input (ostane v DOM-u za JS logiko) */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn .osp-inp {
    display: none !important;
}

/* Logo — premakni na vrh z order */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn .osp-logo {
    order: -1 !important;
    margin: 0 0 6px !important;
    height: 32px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn .osp-logo img {
    height: 28px !important;
    width: auto !important;
    max-width: 90px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Data (ime + opis) */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn .osp-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 3px !important;
    flex: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn .osp-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #222 !important;
    line-height: 1.3 !important;
    display: block !important;
    white-space: normal !important;
}
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn .osp-info-short {
    font-size: 11px !important;
    color: #bbb !important;
    line-height: 1.4 !important;
    font-weight: normal !important;
    display: block !important;
    white-space: normal !important;
}

/* Skrij originalni <a> gumb znotraj li (CHECK mode ga ne potrebuje) */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn > a {
    display: none !important;
}

/* Disabled */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* =============================================================
   STANDARD MODE — li.payment > a.button kot kartica
   ============================================================= */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.payment,
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.payment > a.button,
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a[class*="osp-btn-"] {
    /* Reset */
    display: flex !important;
    position: static !important;
    height: auto !important;
    min-height: 96px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    overflow: hidden !important;
    /* Kartica */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 12px 12px !important;
    gap: 0 !important;
    background: #fff !important;
    border: 2px solid #e8e8e8 !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s !important;
    width: 100% !important;
    color: #222 !important;
}
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.payment > a.button:hover,
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a[class*="osp-btn-"]:hover {
    border-color: #ccc !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    transform: translateY(-1px) !important;
}

/* Skrij ::after checkmark */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a::after {
    display: none !important;
}

/* Logo span (standard mode) */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.payment > a.button > span,
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a > span.osp-i2,
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a > span.osp-i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a > span.osp-i2 em {
    display: inline !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    color: #555 !important;
    vertical-align: middle !important;
}
/* Logotipi znotraj spana */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a img,
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a > span img {
    display: block !important;
    height: 28px !important;
    width: auto !important;
    max-width: 90px !important;
    object-fit: contain !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
/* SVG ikone */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a > span.osp-i2 svg {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    fill: #888 !important;
}

/* Gateway ime (strong) */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.payment > a.button > strong,
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a > strong {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #222 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    letter-spacing: 0 !important;
}

/* Disabled */
.opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.payment > a.button.osp-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* =============================================================
   CTA GUMB — "Plačaj s [method]" (CHECK mode)
   osp_buttons_js() posodablja .osp-txt z imenom gateway-a
   ============================================================= */
.opr-chk-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 15px 0 !important;
    margin-bottom: 14px !important;
    border: none !important;
    border-radius: 50px !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    letter-spacing: -0.1px !important;
    transition: background 0.15s, transform 0.1s !important;
    box-sizing: border-box !important;
}
.opr-chk-cta:hover {
    background: #222 !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.opr-chk-cta svg        { flex-shrink: 0; }
.opr-chk-cta .osp-txt   { flex: none; }
.opr-chk-cta .osp-icn-alt { flex-shrink: 0; }
/* Skrij ::after iz osclass_pay */
.opr-chk-cta::after { display: none !important; }

/* =============================================================
   TRUST BADGES
   ============================================================= */
.opr-chk-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
}
.opr-chk-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #aaa;
    white-space: nowrap;
}
.opr-chk-trust-item svg {
    flex-shrink: 0;
    color: #bbb;
}

/* =============================================================
   IKONE PLAČILNIH METOD
   ============================================================= */
.opr-chk-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.opr-chk-icon {
    height: 22px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #888;
    letter-spacing: 0.3px;
    line-height: 1;
}
.opr-chk-icon-visa   { background: #fff; color: #1a1f71; font-style: italic; letter-spacing: -0.5px; font-size: 10px; }
.opr-chk-icon-mc     { background: #fff; padding: 3px 5px; }
.opr-chk-icon-mc svg { display: block; }
.opr-chk-icon-amex   { background: #fff; color: #006fcf; }
.opr-chk-icon-pp     { background: #fff; font-style: italic; color: #003087; }
.opr-chk-icon-pp em  { color: #009cde; font-style: italic; }
.opr-chk-icon-stripe { background: #fff; color: #32325d; letter-spacing: 0; }

/* =============================================================
   DISCLAIMER
   ============================================================= */
.opr-chk-disclaimer {
    text-align: center;
    font-size: 11px;
    color: #ccc;
    line-height: 1.6;
    margin: 0;
}
.opr-chk-disclaimer a {
    color: #bbb;
    text-decoration: underline;
}
.opr-chk-disclaimer a:hover {
    color: #666;
}

/* =============================================================
   RESPONSIVE — mobile
   ============================================================= */
@media (max-width: 600px) {
    .opr-checkout-v2 {
        padding: 0 0 40px;
    }
    .opr-chk-back {
        padding: 16px 16px 0;
        max-width: 100%;
    }
    .opr-chk-card {
        border-radius: 0 0 20px 20px;
        padding: 24px 20px 28px;
        box-shadow: none;
        border: none;
    }
    .opr-chk-divider {
        margin: 0 -20px 20px;
    }
    .opr-chk-header h2 {
        font-size: 22px;
    }
    .opr-chk-summary {
        padding: 12px 14px;
        gap: 10px;
    }
    .opr-chk-thumb {
        width: 44px;
        height: 44px;
    }
    .opr-chk-price {
        font-size: 17px;
    }
    /* Mobile: ena stolpec za plačilne metode */
    .opr-checkout-v2 ul.osp-pay-button.opr-chk-methods {
        grid-template-columns: 1fr !important;
    }
    .opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn .osp-chk-main {
        flex-direction: row !important;
        text-align: left !important;
        min-height: auto !important;
        padding: 14px 16px !important;
        gap: 14px !important;
    }
    .opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn .osp-logo {
        order: -1 !important;
        width: 64px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    .opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.osp-chk-pay-btn .osp-data {
        align-items: flex-start !important;
        text-align: left !important;
    }
    /* Standard mode mobile */
    .opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.payment > a.button,
    .opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a[class*="osp-btn-"] {
        flex-direction: row !important;
        min-height: auto !important;
        text-align: left !important;
        padding: 14px 16px !important;
        gap: 14px !important;
    }
    .opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.payment > a.button > span,
    .opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a > span.osp-i2 {
        width: 64px !important;
        min-width: 64px !important;
        height: 36px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    .opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li.payment > a.button > strong,
    .opr-checkout-v2 ul.osp-pay-button.opr-chk-methods > li > a > strong {
        text-align: left !important;
        flex: 1 !important;
    }
    .opr-chk-trust {
        gap: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════
   PROMO STATUS BAR — info vrstica pod ceno
   ═══════════════════════════════════════════════════════════ */
.opr-promo-status {
    margin-top: 6px;
    padding: 6px 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 280px;
}
.opr-promo-status-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1.3;
    color: #15803d;
}
.opr-promo-status-icon {
    flex-shrink: 0;
    color: #f59e0b;
}
.opr-promo-status-text {
    color: #374151;
}
.opr-promo-status-text strong {
    font-weight: 600;
    color: #111827;
}
.opr-promo-status-bar {
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}
.opr-promo-status-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Podaljšaj gumb */
.opr-promote-btn.opr-promote-btn-extend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: #6b7280;
    border: 1px solid #d1d5db;
    background: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.opr-promote-btn.opr-promote-btn-extend:hover {
    color: #111827;
    border-color: #9ca3af;
    background: #f9fafb;
}

@media (max-width: 540px) {
    .opr-promo-status {
        max-width: 100%;
    }
}