/* Generat din continutul paginii 12737 (widget-uri Custom HTML 4 si 10). Mutat in fisier ca sa existe o singura sursa pentru toate paginile cu calculator. */ /* === bloc 1: cardul calculatorului === */ .pricing-wrapper.v3{--v3-text:#101828;--v3-body:#364153;--v3-muted:#6a7282;--v3-muted2:#4a5565;--v3-brand:#1c398e;--v3-green:#008236;--v3-red:#e7000b;--v3-border:#e5e7eb;--v3-divider:#f3f4f6;--v3-bg-soft:#f9fafb;--v3-radius:14px;font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--v3-text);}.pricing-wrapper.v3 .calc-card{background:#fff;border:0.8px solid var(--v3-border);border-radius:var(--v3-radius);box-shadow:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.1);overflow:hidden;max-width:420px;margin:0 auto;width:100%;}.pricing-wrapper.v3 .calc-header{padding:24px 24px 16px;border-bottom:0.8px solid var(--v3-divider);}.pricing-wrapper.v3 .calc-title{font-size:24px;line-height:32px;font-weight:700;color:var(--v3-text);margin:0 0 4px;letter-spacing:0;}.pricing-wrapper.v3 .calc-subtitle{font-size:14px;line-height:20px;color:var(--v3-muted);margin:0;}.pricing-wrapper.v3 .calc-billing-wrap{padding:16px 24px;border-bottom:0.8px solid var(--v3-divider);position:relative;}.pricing-wrapper.v3 .calc-pill-group{position:relative;display:flex;gap:0;background:var(--v3-bg-soft);border-radius:10px;padding:4px;}.pricing-wrapper.v3 .calc-pill{flex:1 1 0;background:transparent;border:0;padding:7px 12px;font-size:14px;line-height:20px;font-weight:500;color:var(--v3-muted2);cursor:pointer;border-radius:8px;transition:background .15s,color .15s,box-shadow .15s;position:relative;font-family:inherit;}.pricing-wrapper.v3 .calc-pill.is-active{background:#fff;color:var(--v3-text);box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);}.pricing-wrapper.v3 .calc-pill-badge{position:absolute;top:-14px;right:-4px;background:#10b981;color:#fff;font-size:12px;line-height:16px;font-weight:500;padding:2px 8px;border-radius:999px;white-space:nowrap;}.pricing-wrapper.v3 .calc-section{padding:20px 24px;border-bottom:0.8px solid var(--v3-divider);}.pricing-wrapper.v3 .calc-section--services .calc-service-row + .calc-service-row{border-top:0.8px solid var(--v3-divider);}.pricing-wrapper.v3 .calc-section-title{font-size:18px;line-height:28px;font-weight:600;color:var(--v3-text);margin:0 0 12px;}.pricing-wrapper.v3 .calc-section--services .calc-section-title{font-size:16px;line-height:24px;}.pricing-wrapper.v3 .calc-users-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}.pricing-wrapper.v3 .calc-users-label{font-size:14px;line-height:20px;font-weight:500;color:var(--v3-body);}.pricing-wrapper.v3 .calc-stepper{display:flex;align-items:center;gap:8px;width:144px;}.pricing-wrapper.v3 .calc-stepper-btn{width:32px;height:32px;border:0.8px solid #d1d5dc;background:#fff;border-radius:8px;color:var(--v3-text);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit;transition:background .15s,border-color .15s;}.pricing-wrapper.v3 .calc-stepper-btn:hover{background:var(--v3-bg-soft);border-color:#9ca3af;}.pricing-wrapper.v3 .calc-stepper input[type="number"]{flex:1;text-align:center;border:0;background:transparent;font-size:16px;font-weight:500;color:var(--v3-text);width:40px;padding:0;-moz-appearance:textfield;font-family:inherit;}.pricing-wrapper.v3 .calc-stepper input[type="number"]::-webkit-inner-spin-button,.pricing-wrapper.v3 .calc-stepper input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}.pricing-wrapper.v3 .calc-meta-line{font-size:12px;line-height:16px;color:var(--v3-muted);margin-top:12px;}.pricing-wrapper.v3 .calc-big-price{font-size:24px;line-height:32px;font-weight:700;color:var(--v3-text);text-align:right !important;margin-top:12px;display:flex;justify-content:flex-end;align-items:baseline;gap:0;}.pricing-wrapper.v3 .calc-big-price__cur{margin-left:4px;}.pricing-wrapper.v3 .calc-big-price__period{font-weight:400;font-size:18px;color:var(--v3-text);}.pricing-wrapper.v3 .calc-economy{font-size:12px;line-height:16px;color:var(--v3-green);text-align:center;margin-top:8px;visibility:hidden;}.pricing-wrapper.v3 .calc-service-row{display:flex;align-items:center;gap:16px;padding:12px 0;}.pricing-wrapper.v3 .calc-service-info{flex:1 1 0;min-width:0;}.pricing-wrapper.v3 .calc-service-title{font-size:14px;line-height:20px;font-weight:500;color:var(--v3-text);display:flex;align-items:center;gap:6px;}.pricing-wrapper.v3 .calc-service-desc{font-size:12px;line-height:16px;color:var(--v3-muted);margin-top:2px;}.pricing-wrapper.v3 .calc-service-price{font-size:14px;font-weight:700;color:var(--v3-text);white-space:nowrap;}.pricing-wrapper.v3 .mefi-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;}.pricing-wrapper.v3 .mefi-switch input{opacity:0;width:0;height:0;position:absolute;}.pricing-wrapper.v3 .mefi-slider{position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:999px;transition:background .2s;}.pricing-wrapper.v3 .mefi-slider:before{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);transition:transform .2s;}.pricing-wrapper.v3 .mefi-switch input:checked + .mefi-slider{background:var(--v3-brand);}.pricing-wrapper.v3 .mefi-switch input:checked + .mefi-slider:before{transform:translateX(20px);}.pricing-wrapper.v3 .mefi-info{background:transparent;border:0;padding:0;cursor:pointer;color:var(--v3-muted);display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;}.pricing-wrapper.v3 .mefi-info__icon{width:14px;height:14px;border:1px solid currentColor;border-radius:50%;display:inline-block;position:relative;font-size:10px;font-weight:600;line-height:1;text-align:center;}.pricing-wrapper.v3 .mefi-info__icon:before{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;}.pricing-wrapper.v3 .calc-summary{background:var(--v3-bg-soft);padding:20px 24px;border-bottom:0.8px solid var(--v3-border);}.pricing-wrapper.v3 .calc-summary-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;line-height:20px;color:var(--v3-body);font-weight:500;margin-bottom:8px;}.pricing-wrapper.v3 .calc-summary-row strong{color:var(--v3-text);font-weight:700;}.pricing-wrapper.v3 .calc-summary-divider{border-top:0.8px solid #d1d5dc;margin:8px 0;}.pricing-wrapper.v3 .calc-summary-total{display:flex;justify-content:space-between;align-items:center;font-size:16px;line-height:24px;font-weight:600;color:var(--v3-text);}.pricing-wrapper.v3 .calc-summary-total strong{color:var(--v3-brand);font-size:20px;line-height:28px;font-weight:700;}.pricing-wrapper.v3 .calc-notes{background:var(--v3-bg-soft);padding:16px 24px;}.pricing-wrapper.v3 .calc-notes p{font-size:12px;line-height:16px;color:var(--v3-muted2);margin:0 0 4px;}.pricing-wrapper.v3 .calc-notes p:last-child{margin-bottom:0;}.pricing-wrapper.v3 .calc-actions{padding:20px 24px;display:flex;flex-direction:column;gap:12px;background:#fff;}.pricing-wrapper.v3 .calc-cta{border-radius:10px;}.pricing-wrapper.v3 .calc-cta--primary{background:var(--v3-brand);box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);}.pricing-wrapper.v3 .calc-cta--primary > a,.pricing-wrapper.v3 .calc-cta--primary > button{display:block;width:100%;text-align:center;color:#fff !important;font-weight:600;font-size:16px;line-height:24px;padding:12px 16px;text-decoration:none;cursor:pointer;background:transparent !important;border:0 !important;font-family:inherit;}.pricing-wrapper.v3 .calc-cta--primary:has(button[disabled]){background:#e5e7eb !important;box-shadow:none !important;border-color:#e5e7eb !important;}.pricing-wrapper.v3 .calc-cta--primary > button[disabled]{color:#9ca3af !important;cursor:not-allowed;}.pricing-wrapper.v3 .calc-cta--primary:has(button[disabled]):hover{transform:none !important;box-shadow:none !important;}.pricing-wrapper.v3 .calc-cta--secondary{background:#fff;border:1.6px solid var(--v3-brand);}.pricing-wrapper.v3 .calc-cta--secondary button{background:transparent !important;border:0 !important;color:var(--v3-brand) !important;font-weight:600;font-size:16px;line-height:24px;padding:10.4px 16px;width:100%;cursor:pointer;text-align:center;}.pricing-wrapper.v3 .calc-cta--secondary button[disabled]{opacity:.6;cursor:not-allowed;}.right_column_calc .pricing-wrapper.v3{padding:0 !important;background:transparent !important;box-shadow:none !important;border:0 !important;border-radius:0 !important;}@media (max-width:768px){.pricing-wrapper.v3 .calc-card{max-width:100%;}}.pricing-wrapper.v3 .reducere-table,.pricing-wrapper.v3 .calc-legacy-compat,.pricing-wrapper.v3 .abon-reducere{display:none !important;visibility:hidden !important;position:static !important;}.pricing-wrapper.v3 .pret-table{position:static !important;}.pricing-wrapper.v3.of500{height:auto !important;overflow:visible !important;}.right_column_calc .pricing-wrapper.v3{height:auto !important;overflow:visible !important;}.pricing-wrapper.v3 .calc-pill-group{position:relative;}.pricing-wrapper.v3 .calc-pill-group::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);transition:transform .32s cubic-bezier(0.4,0,0.2,1);z-index:0;pointer-events:none;}.pricing-wrapper.v3 .calc-pill-group:has(.calc-pill[data-billing="annual"].is-active)::before{transform:translateX(100%);}.pricing-wrapper.v3 .calc-pill{position:relative;z-index:1;background:transparent !important;box-shadow:none !important;transition:color .22s ease;}.pricing-wrapper.v3 .calc-pill.is-active{background:transparent !important;box-shadow:none !important;color:var(--v3-text) !important;}.pricing-wrapper.v3 .calc-pill:not(.is-active):hover{color:var(--v3-text);}.pricing-wrapper.v3 .calc-pill-badge{transition:transform .28s cubic-bezier(0.4,0,0.2,1),box-shadow .28s;transform-origin:center right;}.pricing-wrapper.v3 .calc-pill[data-billing="annual"].is-active .calc-pill-badge{transform:scale(1.05);box-shadow:0 2px 6px rgba(16,185,129,.35);}.pricing-wrapper.v3 .calc-big-price{transition:transform .22s ease,color .22s ease;will-change:transform;}.pricing-wrapper.v3 .calc-big-price.is-updating{transform:scale(1.04);}.pricing-wrapper.v3 .calc-big-price__period .f-luna,.pricing-wrapper.v3 .summary-period-label,.pricing-wrapper.v3 #summary-first-period{transition:opacity .18s ease;}.pricing-wrapper.v3 .is-swapping .f-luna,.pricing-wrapper.v3 .is-swapping.summary-period-label,.pricing-wrapper.v3 .is-swapping #summary-first-period{opacity:0;}.pricing-wrapper.v3 .calc-economy{visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .32s cubic-bezier(0.4,0,0.2,1),transform .32s cubic-bezier(0.4,0,0.2,1),visibility 0s linear .32s;}.pricing-wrapper.v3 .calc-economy.is-visible{visibility:visible;opacity:1;transform:translateY(0);transition:opacity .32s cubic-bezier(0.4,0,0.2,1),transform .32s cubic-bezier(0.4,0,0.2,1),visibility 0s linear 0s;}.pricing-wrapper.v3 .calc-summary-row strong,.pricing-wrapper.v3 .calc-summary-total strong{transition:color .22s ease;}.pricing-wrapper.v3 .calc-summary-row.is-updating strong,.pricing-wrapper.v3 .calc-summary-total.is-updating strong{color:var(--v3-brand);}.pricing-wrapper.v3 .calc-stepper-btn{transition:background .15s,border-color .15s,transform .1s ease;}.pricing-wrapper.v3 .calc-stepper-btn:active{transform:scale(0.94);}.pricing-wrapper.v3 .calc-cta{transition:transform .18s ease,box-shadow .22s ease,filter .22s ease;}.pricing-wrapper.v3 .calc-cta:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(28,57,142,.2),0 2px 4px rgba(28,57,142,.1);}.pricing-wrapper.v3 .calc-cta:active{transform:translateY(0);}.pricing-wrapper.v3 .calc-meta-line{transition:color .2s ease;}@media (prefers-reduced-motion:reduce){.pricing-wrapper.v3 *,.pricing-wrapper.v3 *::before,.pricing-wrapper.v3 *::after{transition:none !important;animation:none !important;}}.pricing-wrapper.v3 .calc-section--abonament{position:relative;}.pricing-wrapper.v3 .calc-section--abonament::after{content:"+";position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);width:30px;height:30px;background:#fff;border:1px solid var(--v3-border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;color:var(--v3-brand);z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.06);line-height:1;}.pricing-wrapper.v3 .calc-summary,.pricing-wrapper.v3 .calc-notes,.pricing-wrapper.v3 .calc-actions{background:#f8fafc !important;}.pricing-wrapper.v3 .calc-summary{padding-top:24px;}.pricing-wrapper.v3 .calc-actions{padding-top:8px;padding-bottom:24px;} /* === bloc 2: toggle si randuri rezumat === */ /* ===== mefi beautiful toggle ===== */ .mefi-switch-row{ display:flex; align-items:center; gap:14px; justify-content:space-between; padding:8px 0; } /* ascunde celula din dreapta by default (previne flash-ul) */ #proceduri-video-row #proceduri-impl-cell{ display:none; } /* afișează celula când bifa Proceduri video este ON (fără JS) */ #proceduri-video-row:has(#proceduri-video-optional:checked) #proceduri-impl-cell{ display: table-cell; } #abonament-meta{ font-size:13px; } /* Container switch */ .mefi-switch{ position:relative; display:inline-block; width:56px; height:32px; flex:0 0 auto; } /* Ascundem checkbox-ul nativ dar păstrăm accesibilitatea */ .mefi-switch input{ position:absolute; opacity:0; width:0; height:0; } /* Track */ .mefi-slider{ position:absolute; inset:0; background:#cfd6e4; border-radius:999px; box-shadow: inset 0 2px 6px rgba(16,24,40,.12); transition: background .25s ease, box-shadow .25s ease; } /* Knob */ .mefi-slider::before{ content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow: 0 2px 8px rgba(16,24,40,.18), 0 1px 2px rgba(16,24,40,.12); transition: transform .25s cubic-bezier(.22,.61,.36,1), width .2s ease; } /* Ripple subtil la check */ .mefi-slider::after{ content:""; position:absolute; inset:0; border-radius:999px; background: radial-gradient(closest-side, rgba(34,211,238,.25), transparent 70%); transform: scale(0); opacity:0; pointer-events:none; transition: transform .4s ease, opacity .4s ease; } /* State: checked */ .mefi-switch input:checked + .mefi-slider{ background: linear-gradient(135deg, #252299 0%, #252299 100%); box-shadow: inset 0 2px 6px rgba(16,24,40,.08); } .mefi-switch input:checked + .mefi-slider::before{ transform: translateX(24px); } .mefi-switch input:checked + .mefi-slider::after{ transform: scale(1); opacity:1; } /* Focus accesibil */ .mefi-switch input:focus-visible + .mefi-slider{ outline: 3px solid #93c5fd; outline-offset: 3px; } /* Hover micro-feedback */ .mefi-switch:hover .mefi-slider::before{ width:28px; } .mefi-switch input:checked:hover + .mefi-slider::before{ transform: translateX(22px); width:28px; } /* Respectă preferința de reducere mișcare */ @media (prefers-reduced-motion: reduce){ .mefi-slider, .mefi-slider::before, .mefi-slider::after{ transition:none !important; } } /* Layout pentru randul Abonament */ .table-module #abonament-summary-row td { vertical-align: middle; } .table-module #abonament-summary-row .abon-lhs { width: 60%; } .table-module #abonament-summary-row .abon-rhs { width: 40%; text-align: right; } .abon-total { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 700; } .abon-total .abon-pret { font-size: 18px; } .abon-total .euro { opacity: .9; } .abon-total .fara-tva { font-weight: 400; opacity: .7; margin-left: 6px; } .abon-total .abon-reducere { margin-left: 8px; padding: 2px 6px; border-radius: 6px; background: #ffe8e8; color: #b91c1c; font-weight: 700; font-size: 12px; } /* Toggle-urile mutate pe stanga */ .mefi-switch-row--left { justify-content: flex-start; gap: 12px; } #proceduri-video-row #proceduri-impl-cell, #training-row #training-price-cell{ display:none; } #proceduri-video-row:has(#proceduri-video-optional:checked) #proceduri-impl-cell, #training-row:has(#training-optional:checked) #training-price-cell{ display: table-cell; } small {font-size:12px;} /* === variantă mică pentru switch === */ .mefi-switch--sm{ width:44px; height:24px; } /* track rămâne același selector (.mefi-slider) dar stilat în scope-ul --sm */ .mefi-switch--sm .mefi-slider{ border-radius:999px; } /* knob mic + poziții corecte */ .mefi-switch--sm .mefi-slider::before{ width:18px; height:18px; top:3px; left:3px; } /* distanța corectă a knob-ului în starea checked: 44 (lățime track) - 18 (diametru knob) - 6 (padding total stânga/dreapta) = 20px */ .mefi-switch--sm input:checked + .mefi-slider::before{ transform: translateX(20px); } /* micro-hover pe varianta mică */ .mefi-switch--sm:hover .mefi-slider::before{ width:20px; } .mefi-switch--sm input:checked:hover + .mefi-slider::before{ transform: translateX(18px); width:20px; } /* focus accesibil (păstrează conturul) */ .mefi-switch--sm input:focus-visible + .mefi-slider{ outline: 3px solid #93c5fd; outline-offset: 3px; } /* ================= Base modal CSS (dacă nu e deja inclus) ================= */ .mefi-modal{position:fixed; inset:0; display:none; z-index:9999;} .mefi-modal.is-open{display:block;} .mefi-backdrop{position:absolute; inset:0; background:rgba(18,34,58,.45); backdrop-filter:saturate(120%) blur(2px); opacity:0; transition:opacity .2s ease;} .mefi-modal.is-open .mefi-backdrop{opacity:1;} .mefi-dialog{ position:absolute; left:50%; top:50%; transform:translate(-50%,-42%); min-width:min(92vw,520px); border-radius:14px; background:#fff; box-shadow:0 20px 60px rgba(16,24,40,.22), 0 4px 20px rgba(16,24,40,.12); opacity:0; transition:opacity .2s ease, transform .2s ease; } .mefi-modal.is-open .mefi-dialog{opacity:1; transform:translate(-50%,-50%);} .mefi-dialog-body{padding:22px 22px 16px;} .mefi-dialog-close{ position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:22px; line-height:1; color:#64748b; cursor:pointer; } .mefi-dialog-actions{display:flex; justify-content:center; gap:10px; padding:8px 0 12px;} .mefi-btn{border:1px solid transparent; padding:10px 16px; border-radius:10px; font-weight:600; cursor:pointer;} .mefi-btn-primary{background:#fc7010; color:#fff;} .mefi-btn-outline{background:#fff; border-color:#cfd6e4; color:#0f172a;} @media (prefers-reduced-motion: reduce){ .mefi-backdrop, .mefi-dialog{transition:none !important;} } /* ============== Styling pentru varianta pe beneficii ============== */ .mefi-dialog-body h5{ margin:0 0 12px; font-size:20px; font-weight:800; color:#0f172a; letter-spacing:.2px; } .mefi-benefits{ list-style:none; padding:0; margin:0 0 8px; display:grid; gap:8px; } .mefi-benefits li{ display:flex; align-items:flex-start; gap:10px; color:#334155; font-size:14px; line-height:1.5; background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; } .mefi-check{ display:inline-flex; width:22px; height:22px; border-radius:6px; background:#252299; flex:0 0 22px; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(16,24,40,.2); } .mefi-check svg{width:14px; height:14px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;} .mefi-dialog-note{ margin:8px 0 14px; color:#0f172a; font-size:14px; } .mefi-dialog-note em{color:#0ea5e9; font-style:normal; font-weight:700;} .mefi-benefits li::after {display:none} .mefi-dialog-note{ margin-top:8px; color:#0f172a; font-size:14px; } .mefi-dialog-note em{ color:#0ea5e9; font-style:normal; font-weight:700; } /* listă cu bife (reciclează stilul din modalul anterior) */ .mefi-benefits{ list-style:none; padding:0; margin:8px 0 12px; display:grid; gap:8px; } .mefi-benefits li{ display:flex; align-items:flex-start; gap:10px; color:#334155; font-size:14px; line-height:1.5; background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; } .mefi-check{ display:inline-flex; width:22px; height:22px; border-radius:6px; background:#252299; flex:0 0 22px; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(16,24,40,.2); } .mefi-check svg{width:14px; height:14px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;} /* fix icon ? să fie rotund perfect */ .mefi-info{ -webkit-appearance: none; appearance: none; padding: 0; /* elimină paddingul UA */ margin-left: 6px; border: 0; background: transparent; cursor: pointer; display: inline-grid; /* centrare perfectă */ place-items: center; width: 22px; height: 22px; aspect-ratio: 1 / 1; /* 1:1 => rotund, chiar dacă stilurile moștenite variază */ border-radius: 50%; vertical-align: middle; } /* containerul toggle-ului existent */