@CHARSET "UTF-8"; /* Glyphicons font via CDN - fix voor cross-origin embedding */ /* NB: double quotes url("...") zodat de PHP CSS-combiner (str_replace url('https://shop.daanvanloenhout.nl/third-party/pj_fancybox/2.1.5/ ...)) ze NIET herschrijft */ @font-face { font-family: 'Glyphicons Halflings'; src: url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot"); src: url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix") format('embedded-opentype'), url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2") format('woff2'), url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff") format('woff'), url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf") format('truetype'), url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format('svg'); } /* ========================================================================== Focus-visible reset: verwijder browser standaard rode/oranje outline ========================================================================== */ #pjWrapperShoppingCart_theme1 *:focus-visible { outline: none !important; } .row-bg { border-bottom: 1px solid var(--borderColor); padding: 10px 0; display: inline-block; width: 100%; } p.qnty { text-align: right; } .pjScCheckout-lft table.table.table-striped .col-sm-6.col-md-7 { width: 100%; padding: 0; } /* ========================================================================== Kassabonnetje Styling — Checkout Sidebar ========================================================================== */ /* Flex layout op checkout/preview form zodat kolommen gelijke hoogte krijgen (nodig voor sticky) */ .pjScCheckout-page .scSelectorCheckoutForm, .pjScCheckout-page .scSelectorPreviewForm { display: flex; flex-wrap: wrap; } .pjScCheckout-b { background: #fff; border: none; border-radius: 0; overflow: visible; position: relative; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.10)) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08)); font-family: inherit; font-size: 13px; padding: 0; margin-top: 14px; margin-bottom: 28px; } /* Scheurrandje bovenaan */ .pjScCheckout-b::before { content: ""; display: block; position: absolute; top: -14px; left: 0; right: 0; width: 100%; height: 14px; background: linear-gradient(45deg, #fff 33.33%, transparent 33.33%) 0 0 / 14px 100%, linear-gradient(-45deg, #fff 33.33%, transparent 33.33%) 0 0 / 14px 100%; background-repeat: repeat-x; } /* Scheurrandje onderaan */ .pjScCheckout-b::after { content: ""; display: block; position: absolute; bottom: -14px; left: 0; right: 0; width: 100%; height: 14px; background: linear-gradient(135deg, #fff 33.33%, transparent 33.33%) 0 0 / 14px 100%, linear-gradient(-135deg, #fff 33.33%, transparent 33.33%) 0 0 / 14px 100%; background-repeat: repeat-x; } /* Header: kassabonnetje-stijl */ .pjScCheckout-lft .panel-heading { background: #fff !important; color: var(--textPrimary) !important; border-radius: 0 !important; text-align: center; letter-spacing: 3px; text-transform: uppercase; font-size: 11px; font-weight: 800; font-family: inherit; padding: 22px 16px 6px; border-bottom: none; } /* Decoratieve lijn onder header */ .pjScCheckout-lft .panel-heading::after { content: ""; display: block; width: 40px; height: 2px; background: var(--brandColor); margin: 10px auto 0; border-radius: 1px; } /* Verberg productafbeeldingen in de sidebar (te breed) */ .pjScCheckout-lft table.table td.hidden-xs { display: none !important; } /* Product items: compact kassabon regels */ .pjScCheckout-lft table.table { margin-bottom: 0; font-size: 13px; font-family: inherit; width: 100%; background: transparent; } /* Verwijder Bootstrap striped styling */ .pjScCheckout-lft table.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; } .pjScCheckout-lft table.table td { padding: 10px 16px !important; border-top: none !important; border-bottom: 1px solid var(--borderColor, #eee); vertical-align: top; } .pjScCheckout-lft table.table tr:last-child td { border-bottom: none; } /* Product item: flex row met qty+naam links, bedrag rechts */ .pjScCheckout-lft .sc-receipt-item { display: flex !important; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; margin: 0; border: none; padding: 0; gap: 8px; } .pjScCheckout-lft .sc-receipt-item-left { flex: 1; min-width: 0; padding: 0; } /* Aantal vóór productnaam */ .pjScCheckout-lft .sc-receipt-qty { font-weight: 600; color: var(--textSecondary, #666); font-size: 13px; margin-right: 6px; white-space: nowrap; } /* Productnaam in kassabon */ .pjScCheckout-lft table.table a.scProductLink, .pjScCheckout-lft .sc-receipt-item-left a.scProductLink { color: var(--textPrimary) !important; font-weight: 700; font-size: 13px; text-decoration: none; text-transform: none; letter-spacing: 0; line-height: 1.3; } /* Attributen: kleiner, maar leesbaar */ .pjScCheckout-lft table.table .text-muted, .pjScCheckout-lft .sc-receipt-item-left .text-muted { font-size: 11px; color: var(--textSecondary, #666) !important; margin: 2px 0 0 0; padding-left: 0; } /* Extra items: zelfde flex-structuur als productregels, maar kleiner/lichter */ .sc-receipt-item--extra { padding-top: 0 !important; } .sc-receipt-item--extra .sc-receipt-item-left { font-size: 11px; color: var(--textSecondary, #666); } .sc-receipt-item--extra .sc-receipt-amount { font-size: 11px; font-weight: 500; color: var(--textSecondary, #666); } .sc-receipt-extra-bullet { flex-shrink: 0; color: var(--brandColor, #8438df); font-size: 9px; margin-right: 2px; } /* Bedrag rechts uitgelijnd — vaste breedte kolom */ .pjScCheckout-lft .sc-receipt-amount { font-weight: 700; color: var(--textPrimary); font-size: 13px; text-align: right; white-space: nowrap; flex-shrink: 0; min-width: 70px; } /* Legacy selectors (backwards compat) */ .pjScCheckout-lft table.table td > .row { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0; border: none; padding: 0; } .pjScCheckout-lft table.table td > .row > .col-sm-6, .pjScCheckout-lft table.table td > .row > .col-md-7 { flex: 0 0 100%; width: 100%; padding: 0; } .pjScCheckout-lft table.table .qnty { font-weight: 600; color: var(--textSecondary, #666); font-size: 13px; text-align: right; white-space: nowrap; margin: 4px 0 0; flex-shrink: 0; } /* Carrier logo — vast canvas zodat alle logo's gelijk uitlijnen */ .sc-carrier-logo { width: 60px; height: 20px; object-fit: contain; object-position: center center; vertical-align: middle; flex-shrink: 0; } .sc-carrier-logo--sm { width: 50px; height: 16px; } .sc-receipt-carrier-logo { width: 50px; height: 16px; object-fit: contain; object-position: left center; vertical-align: middle; margin-right: 4px; } .pjScCheckout-lft table.table .sc-receipt-price { font-weight: 700; color: var(--textPrimary); font-size: 13px; text-align: right; white-space: nowrap; margin: 4px 0 0 auto; flex-shrink: 0; width: auto; padding-left: 12px; } /* Verberg mobile afbeelding blok */ .pjScCheckout-lft table.table .visible-xs { display: none !important; } /* Kolom layout */ .pjScCheckout-page .pjScCheckout-rt { padding-left: 15px; } .pjScCheckout-page .pjScCheckout-lft { padding-right: 0; padding-left: 20px; } .pjScPreviewOrder .pjScCheckoutPrice { color: var(--brandColor); text-align: right; } .chckout-btn .chckout-btn-lt:hover { background: var(--brandColorDark); color: #fff; } .chckout-btn .chckout-btn-lt { background-color: var(--accentColor); width: unset; padding: 10px 30px ; border-radius: 50px ; /* float: left; */ margin-right: 10px; } .chckout-btn .chckout-btn-rt { background: var(--brandColor); color: #ffffff; padding: 8px 20px; border-radius: 50px; border: none; transition: all 0.25s ease; } .chckout-btn .chckout-btn-rt:hover { background: var(--brandColorDark); color: #fff; box-shadow: 0 4px 12px var(--brandAlpha30); } .row.totalLastChild .row-bg { border: none; } .chckout-btn { text-align: right; } /* Checkout form controls: erft van globale #pjWrapperShoppingCart_theme1 .form-control in theme1.css */ /* ========================================================================== Modern Checkboxes & Radio Buttons ========================================================================== */ #pjWrapperShoppingCart_theme1 input[type="checkbox"], #pjWrapperShoppingCart_theme1 input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 20px; height: 20px; border: 2px solid #d0c8e0; background: #fff; cursor: pointer; vertical-align: middle; position: relative; margin: 0 8px 0 0; flex-shrink: 0; transition: all 0.2s ease; } #pjWrapperShoppingCart_theme1 input[type="checkbox"] { border-radius: 5px; } #pjWrapperShoppingCart_theme1 input[type="radio"] { border-radius: 50%; } /* Hover */ #pjWrapperShoppingCart_theme1 input[type="checkbox"]:hover, #pjWrapperShoppingCart_theme1 input[type="radio"]:hover { border-color: var(--brandColor); box-shadow: 0 0 0 3px var(--brandAlpha10); } /* Focus */ #pjWrapperShoppingCart_theme1 input[type="checkbox"]:focus, #pjWrapperShoppingCart_theme1 input[type="radio"]:focus { outline: none; border-color: var(--brandColor); box-shadow: 0 0 0 3px var(--brandAlpha15); } /* Checked checkbox */ #pjWrapperShoppingCart_theme1 input[type="checkbox"]:checked { background: var(--brandColor); border-color: var(--brandColor); } #pjWrapperShoppingCart_theme1 input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } /* Checked radio */ #pjWrapperShoppingCart_theme1 input[type="radio"]:checked { border-color: var(--brandColor); background: #fff; } #pjWrapperShoppingCart_theme1 input[type="radio"]:checked::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--brandColor); } /* Labels naast checkboxes/radios */ #pjWrapperShoppingCart_theme1 label input[type="checkbox"], #pjWrapperShoppingCart_theme1 label input[type="radio"], #pjWrapperShoppingCart_theme1 .checkbox label input[type="checkbox"], #pjWrapperShoppingCart_theme1 .radio label input[type="radio"] { margin-top: 0; top: 0; } #pjWrapperShoppingCart_theme1 .checkbox label, #pjWrapperShoppingCart_theme1 .radio label { display: inline-flex; align-items: center; padding-left: 0; cursor: pointer; font-weight: 400; line-height: 1.4; } /* Disabled state */ #pjWrapperShoppingCart_theme1 input[type="checkbox"]:disabled, #pjWrapperShoppingCart_theme1 input[type="radio"]:disabled { opacity: 0.5; cursor: not-allowed; } /* Checkout select: erft van globale select.form-control in theme1.css */ /* Checkout panel heading: erft van theme1.css #pjWrapperShoppingCart_theme1 .pjScCheckout .panel-heading */ /* Kassabon kolom layout overrides */ .pjScCheckout-rt { padding-left: 15px; } .pjScCheckout-lft { padding-left: 15px; } /* Kassabon: samenvatting labels (links) — subtieler dan productregels */ .pjScCheckout-lft .col-xs-6.text-right.text-muted.text-uppercase { text-align: left; font-weight: 400; color: var(--textSecondary, #888); font-size: 12px; font-family: inherit; text-transform: none; letter-spacing: 0; padding: 0; width: auto; flex: 1; } /* Kassabon: samenvatting bedragen (rechts) — subtieler dan productregels */ .pjScCheckout-lft .col-xs-6.text-muted.text-uppercase { text-align: right; color: var(--textSecondary, #555); font-weight: 500; font-size: 12px; font-family: inherit; padding: 0; width: auto; min-width: 70px; flex-shrink: 0; white-space: nowrap; } /* Kassabon: totaalprijs — zelfde rechterrand als bedragen erboven */ .pjScCheckout .pjScCheckout-lft .pjScCheckoutPrice, .pjScCheckout-lft .pjScCheckoutPrice { color: var(--brandColor); font-weight: 800; text-align: right !important; font-size: 20px !important; font-family: inherit; white-space: nowrap; padding: 0 !important; } .pjScCart-page table.table.table-striped tr a.scSelectorRemoveFromCart { color: var(--brandColor); } .pjScCart-page table.table.table-striped tr a.scProductLink.scSelectorProduct { color: var(--textPrimary); text-decoration: none; } /* Select opties: globale tekstkleur */ #pjWrapperShoppingCart_theme1 select.form-control option { color: var(--textPrimary); } .pjScCart-page .pjScCartPrice { color: var(--brandColor); text-align: right; } p.right-bt button.btn.btn-default:not(.pjScBtnPrimary):not(.pjScBtnSecondary) { background: var(--brandColorUltraLight); color: var(--brandColor); padding: 8px 20px; border-radius: 50px; border: none; transition: all 0.25s ease; } p.right-bt button.btn.btn-default:not(.pjScBtnPrimary):not(.pjScBtnSecondary):hover { background: var(--brandColor); color: #fff; box-shadow: 0 4px 12px var(--brandAlpha30); } p.right-bt button.btn.pjScBtnPrimary { background: var(--brandColor); color: #fff; padding: 8px 20px; border-radius: 50px; border: none; transition: all 0.25s ease; } p.right-bt button.btn.pjScBtnPrimary:hover { background: var(--brandColorDark); color: #fff; box-shadow: 0 4px 12px var(--brandAlpha30); } p.right-bt button.btn.pjScBtnSecondary { background: #fff; color: var(--brandColor); padding: 8px 20px; border-radius: 50px; border: 2px solid var(--borderColor); transition: all 0.25s ease; } p.right-bt button.btn.pjScBtnSecondary:hover { background: var(--brandColorUltraLight); border-color: var(--brandColor); color: var(--brandColorDark); } .cupn-bx button.btn.btn-info.scSelectorButton { position: absolute; top: 0; right: 0; height: 100%; border-radius: 0 8px 8px 0 !important; padding: 0 15px !important; background: var(--brandColor) !important; border-color: var(--brandColor) !important; color: #fff !important; line-height: 1; transition: all 0.25s ease; } .cupn-bx button.btn.btn-info.scSelectorButton:hover { background: var(--brandColorDark); border-color: var(--brandColorDark); } .cupn-bx { position: relative; } .cupn-bx input.form-control { padding-right: 110px !important; } .cupn-bx .scSelectorNoticeMsg { display: block; margin-top: 4px; font-size: 12px; } .cupn-bx .pjScBtnRemoveCode { margin-top: 6px; } /* Cart form controls: erft van globale .form-control en select.form-control in theme1.css */ .scContainer{ margin-top: 0; padding-top: 12px; padding-bottom: 24px; } .dropdown-menu{ margin-top: 0px ; } .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-radius: 0 8px 8px 8px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; border-radius: 8px 0 8px 8px; } .dropdown:hover > .dropdown-menu { display: block; } .form-group.required label.control-label:after{ content:" *"; color: #d73e31; } .form-group.required label.error{ color: #d73e31; font-weight: normal; padding-left: 0px; } /* ========================================================================== Moderne Validatie Styling ========================================================================== */ /* Error label styling — compact met icoon */ #pjWrapperShoppingCart_theme1 label.error, #pjWrapperShoppingCart_theme1 .form-group label.error, #pjWrapperShoppingCart_theme1 label.scError, #pjWrapperShoppingCart_theme1 .form-group label.scError { color: #d73e31; font-size: 12px; font-weight: 500; margin-top: 4px; margin-bottom: 0; padding: 3px 8px; background: #fef2f2; border-radius: 6px; border-left: 3px solid #d73e31; display: block; line-height: 1.4; animation: scShakeIn 0.3s ease; } #pjWrapperShoppingCart_theme1 label.error::before, #pjWrapperShoppingCart_theme1 label.scError::before { content: "\e101"; font-family: 'Glyphicons Halflings'; margin-right: 5px; font-size: 10px; } /* Shake-in animatie voor error labels */ @keyframes scShakeIn { 0% { opacity: 0; transform: translateX(-6px); } 50% { transform: translateX(3px); } 100% { opacity: 1; transform: translateX(0); } } /* Error state: input veld */ #pjWrapperShoppingCart_theme1 .has-error .form-control { border-color: #d73e31; box-shadow: 0 0 0 3px rgba(215, 62, 49, 0.08); background-color: #fffbfb; } #pjWrapperShoppingCart_theme1 .has-error .form-control:focus { border-color: #d73e31; box-shadow: 0 0 0 3px rgba(215, 62, 49, 0.15); background-color: #fff; } /* Success state: input veld */ #pjWrapperShoppingCart_theme1 .has-success .form-control { border-color: #0f9d58; box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.08); } #pjWrapperShoppingCart_theme1 .has-success .form-control:focus { border-color: #0f9d58; box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.12); } /* Error melding tekst (inline, niet-label) */ #pjWrapperShoppingCart_theme1 .text-danger.scSelectorNoticeMsg, #pjWrapperShoppingCart_theme1 .scNoticeError { color: #d73e31; font-size: 12px; font-weight: 500; padding: 4px 8px; margin-top: 4px; background: #fef2f2; border-radius: 6px; border-left: 3px solid #d73e31; display: block; line-height: 1.4; animation: scShakeIn 0.3s ease; } /* Succes melding tekst (inline) */ #pjWrapperShoppingCart_theme1 .scNoticeSuccess { color: #0f9d58; font-size: 12px; font-weight: 500; padding: 4px 8px; background: #f0fdf4; border-radius: 6px; border-left: 3px solid #0f9d58; } /* Required asterisk styling */ .form-group.required label.control-label:after { content: " *"; color: #d73e31; font-weight: 700; } /* Placeholder styling voor lege velden */ #pjWrapperShoppingCart_theme1 .form-control::placeholder { color: #b0a8bf; font-style: italic; font-weight: 400; } /* Select met lege/default waarde */ #pjWrapperShoppingCart_theme1 select.form-control option[value=""] { color: #b0a8bf; font-style: italic; } .scSelectorAddresses .scAddressHolder{ border-bottom: 2px solid var(--borderColor); padding-bottom: 10px; margin-bottom: 14px; } p.right-bt button.btn.btn-default.scSelectorButton.scSelectorContinueShopping:not(.pjScBtnSecondary) { background-color: var(--accentColor); width: unset; padding: 10px 20px ; border-radius: 50px ; } .pjScCart-page .panel-body.form-horizontal select option { color: #000; } .scSelectorAddresses .scAddressHolder:last-child{ border-bottom: none; padding-bottom: 0px; margin-bottom: 0px; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.fade.in { opacity: 0.5; } .pjScHeader .pjScLocale img{ display: block; float: left; margin-right: 4px; margin-top: 5px; } #pjWrapperShoppingCart_theme1 .dropdown-menu > li > a{padding-left: 15px; padding-right: 28px;} /* ========================================================================== Bootstrap kleur overrides (blauw → paars) ========================================================================== */ /* Links */ #pjWrapperShoppingCart_theme1 a { color: var(--brandColor); } #pjWrapperShoppingCart_theme1 a:hover, #pjWrapperShoppingCart_theme1 a:focus { color: var(--brandColorDark); outline: none; text-decoration: none; } /* Override Bootstrap 3 focus-ring op alle shop-gerelateerde elementen (incl. SweetAlert buiten #pjWrapperShoppingCart_theme1) */ #pjWrapperShoppingCart_theme1 a:focus, #pjWrapperShoppingCart_theme1 button:focus, #pjWrapperShoppingCart_theme1 .btn:focus, .swal2-popup a:focus, .swal2-popup button:focus, .swal2-popup .btn:focus, .sc-add-to-cart-corner a:focus, .sc-add-to-cart-corner button:focus { outline: none !important; box-shadow: none !important; } /* SweetAlert2 input/textarea: subtiele focus-ring i.p.v. dikke browser-outline */ .swal2-popup .swal2-input:focus, .swal2-popup .swal2-textarea:focus, .swal2-popup input:focus, .swal2-popup textarea:focus, .swal2-popup select:focus { outline: none !important; border-color: var(--brandColor, #8438df) !important; box-shadow: 0 0 0 2px rgba(132, 56, 223, 0.15) !important; } /* .text-primary (titels, labels) */ #pjWrapperShoppingCart_theme1 .text-primary, .text-primary { color: var(--brandColor) !important; } /* .btn-primary (knoppen) */ #pjWrapperShoppingCart_theme1 .btn-primary, .btn-primary { background-color: var(--brandColor) !important; border-color: var(--brandColor) !important; color: #fff !important; border-radius: 50px; font-weight: 600; transition: all 0.25s ease; } #pjWrapperShoppingCart_theme1 .btn-primary:hover, #pjWrapperShoppingCart_theme1 .btn-primary:focus, .btn-primary:hover, .btn-primary:focus { background-color: var(--brandColorDark) !important; border-color: var(--brandColorDark) !important; color: #fff !important; box-shadow: 0 4px 12px var(--brandAlpha30); } #pjWrapperShoppingCart_theme1 .btn-primary:disabled, .btn-primary:disabled, .btn-primary[disabled] { background-color: #c4a8e8 !important; border-color: #c4a8e8 !important; opacity: 0.8; } /* .btn-default (secundaire knoppen) */ #pjWrapperShoppingCart_theme1 .btn-default:not(.pjScBtnPrimary):not(.pjScBtnSecondary), .btn-default:not(.pjScBtnPrimary):not(.pjScBtnSecondary) { background-color: var(--brandColorUltraLight) !important; border-color: var(--borderColor) !important; color: var(--brandColor) !important; border-radius: 50px; font-weight: 600; transition: all 0.25s ease; } #pjWrapperShoppingCart_theme1 .btn-default:not(.pjScBtnPrimary):not(.pjScBtnSecondary):hover, #pjWrapperShoppingCart_theme1 .btn-default:not(.pjScBtnPrimary):not(.pjScBtnSecondary):focus, .btn-default:not(.pjScBtnPrimary):not(.pjScBtnSecondary):hover, .btn-default:not(.pjScBtnPrimary):not(.pjScBtnSecondary):focus { background-color: var(--brandColor) !important; border-color: var(--brandColor) !important; color: #fff !important; } /* Primary/Secondary button overrides */ #pjWrapperShoppingCart_theme1 .pjScBtnPrimary, #pjWrapperShoppingCart_theme1 .pjScBtnPrimary.btn-default, #pjWrapperShoppingCart_theme1 .pjScBtnPrimary.btn-primary { background-color: var(--brandColor) !important; border-color: var(--brandColor) !important; color: #fff !important; } #pjWrapperShoppingCart_theme1 .pjScBtnPrimary:hover, #pjWrapperShoppingCart_theme1 .pjScBtnPrimary.btn-default:hover, #pjWrapperShoppingCart_theme1 .pjScBtnPrimary.btn-primary:hover { background-color: var(--brandColorDark) !important; border-color: var(--brandColorDark) !important; color: #fff !important; box-shadow: 0 4px 12px var(--brandAlpha30); } #pjWrapperShoppingCart_theme1 .pjScBtnSecondary, #pjWrapperShoppingCart_theme1 .pjScBtnSecondary.btn-default { background-color: #fff !important; border-color: var(--borderColor) !important; color: var(--brandColor) !important; } #pjWrapperShoppingCart_theme1 .pjScBtnSecondary:hover, #pjWrapperShoppingCart_theme1 .pjScBtnSecondary.btn-default:hover { background-color: var(--brandColorUltraLight) !important; border-color: var(--brandColor) !important; color: var(--brandColorDark) !important; } /* .btn-link (tekst knoppen) */ #pjWrapperShoppingCart_theme1 .btn-link, .btn-link { color: var(--brandColor) !important; font-weight: 600; } #pjWrapperShoppingCart_theme1 .btn-link:hover, #pjWrapperShoppingCart_theme1 .btn-link:focus, .btn-link:hover, .btn-link:focus { color: var(--brandColorDark) !important; text-decoration: underline; } /* .alert-info */ #pjWrapperShoppingCart_theme1 .alert-info, .alert-info { background-color: var(--brandColorUltraLight) !important; border-color: var(--borderColor) !important; color: #4a4a68 !important; } /* ========================================================================= Datepicker: Moderne styling ========================================================================= */ /* Container */ .datepicker { border-radius: 16px !important; border: none !important; box-shadow: 0 8px 32px var(--brandAlpha15) !important; padding: 8px !important; font-family: inherit !important; } /* Header (maand/jaar navigatie) */ .datepicker .datepicker-switch { font-weight: 700 !important; font-size: 15px !important; color: var(--textPrimary) !important; padding: 8px 0 !important; } .datepicker .prev, .datepicker .next { color: var(--brandColor) !important; font-size: 18px !important; border-radius: 50% !important; transition: background 0.2s !important; } .datepicker .prev:hover, .datepicker .next:hover { background: var(--brandColorUltraLight) !important; } /* Dagnamen (ma, di, wo...) */ .datepicker .dow { font-weight: 600 !important; color: #8888a0 !important; font-size: 12px !important; text-transform: lowercase !important; padding: 8px 0 4px !important; } /* Alle dagcellen */ .datepicker table tr td { border-radius: 50% !important; width: 36px !important; height: 36px !important; line-height: 36px !important; padding: 0 !important; font-size: 14px !important; transition: all 0.15s ease !important; } /* Beschikbare dagen (vrije dagen) */ .datepicker table tr td.day:not(.disabled):not(.active):not(.old):not(.new) { background: #e8f5e9 !important; font-weight: 700 !important; color: var(--textPrimary) !important; } /* Beschikbare dagen hover */ .datepicker table tr td.day:not(.disabled):not(.active):not(.old):not(.new):hover { background: #c8e6c9 !important; color: var(--brandColor) !important; } /* Geselecteerde dag */ .datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:focus, .datepicker table tr td.active:active, .datepicker table tr td.active.active { background-color: var(--brandColor) !important; border-color: var(--brandColor) !important; color: #fff !important; text-shadow: none !important; box-shadow: 0 2px 8px var(--brandAlpha30) !important; font-weight: 600 !important; } /* Vandaag */ .datepicker table tr td.today, .datepicker table tr td.today:hover { background-color: var(--brandColorUltraLight) !important; border: 2px solid var(--brandColor) !important; color: var(--brandColor) !important; font-weight: 600 !important; line-height: 32px !important; } /* Uitgeschakelde dagen */ .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { color: #d0cdd8 !important; background: transparent !important; cursor: not-allowed !important; } /* Datum input velden in winkelwagen */ .pjScCart-page #delivery_date, .pjScCart-page #pickup_date { border-radius: 12px !important; padding: 10px 38px 10px 14px !important; border: 2px solid var(--borderColor) !important; font-weight: 600 !important; color: var(--textPrimary) !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238438df' d='M4 0v1H1.5A1.5 1.5 0 0 0 0 2.5v12A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 14.5 1H12V0h-1v1H5V0H4zm0 2v1h1V2h6v1h1V2h2.5a.5.5 0 0 1 .5.5V4H1V2.5a.5.5 0 0 1 .5-.5H4zM1 5h14v9.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V5z'/%3E%3C/svg%3E") no-repeat right 12px center !important; background-size: 16px !important; cursor: pointer !important; transition: border-color 0.2s, box-shadow 0.2s !important; } .pjScCart-page #delivery_date:focus, .pjScCart-page #pickup_date:focus { border-color: var(--brandColor) !important; box-shadow: 0 0 0 3px var(--brandAlpha15) !important; outline: none !important; } /* Tijdslot weergave onder datepicker */ .pjScCart-page #delivery_time_range, .pjScCart-page #pickup_time_range { font-size: 13px; color: var(--brandColor); font-weight: 600; background: var(--brandColorUltraLight); border-radius: 8px; padding: 6px 12px; margin-top: 8px !important; display: inline-block; } .pjScCart-page #delivery_time_range:empty, .pjScCart-page #pickup_time_range:empty { display: none; } /* ========================================================================== Tijdslot selectie pills ========================================================================== */ /* Tijd-rij label uitlijning — uitlijnen met tekst in de geselecteerde-tijd-box */ .sc-time-row .control-label { padding-top: 12px; /* box border(2px) + box padding-top(10px) = tekst op zelfde hoogte */ } /* Dagdeel range-buttons */ .sc-timerange-container { animation: sc-timeslot-fadein 0.3s ease; } .sc-timerange-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .sc-timerange-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; padding: 8px 16px; border: 2px solid var(--borderColor); border-radius: 50px; background: #fff; color: var(--textPrimary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; outline: none; } .sc-timerange-btn:hover, .sc-timerange-btn--active { background: var(--brandColorUltraLight); border-color: var(--brandColor); color: var(--brandColor); } .sc-timerange-btn--active { box-shadow: 0 2px 8px var(--brandAlpha15); } /* Warning-state: geen tijd gekozen bij afrekenen */ .sc-timerange-error .sc-timerange-btn { border-color: #d73e31; color: #d73e31; animation: sc-timerange-shake 0.4s ease; } @keyframes sc-timerange-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } /* Geselecteerde tijd weergave */ .sc-time-selected { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 16px; background: var(--brandColorUltraLight); border: 2px solid var(--brandColor); border-radius: 12px; animation: sc-timeslot-fadein 0.3s ease; } .sc-time-selected-icon { font-size: 18px; line-height: 1; flex-shrink: 0; } .sc-time-selected-text { font-size: 14px; color: var(--textPrimary); line-height: 1.4; } .sc-time-selected-value { font-weight: 700; font-size: 14px; color: var(--brandColor); } .sc-time-selected-change { margin-left: auto; font-size: 12px; color: var(--textMuted); text-decoration: underline; cursor: pointer; flex-shrink: 0; } .sc-time-selected-change:hover { color: var(--brandColor); } .sc-timeslot-container { margin-top: 12px; animation: sc-timeslot-fadein 0.3s ease; } .sc-timeslot-label { font-size: 13px; font-weight: 600; color: var(--textSecondary, #555); margin-bottom: 8px; display: block; } .sc-timeslot-grid { display: flex; flex-wrap: wrap; gap: 6px; } .sc-timeslot-pill { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; min-width: 64px; height: 36px; padding: 0 14px; border: 2px solid #b6e2b6; border-radius: 50px; background: #e8f5e9; color: #2e7d32; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; outline: none; -webkit-tap-highlight-color: transparent; user-select: none; line-height: 1; } .sc-timeslot-pill:hover { background: #c8e6c9; border-color: #81c784; transform: translateY(-1px); } .sc-timeslot-pill:active { transform: translateY(0); } .sc-timeslot-pill--selected { background: #2e7d32; color: #fff; border-color: #2e7d32; box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3); } .sc-timeslot-pill--selected:hover { background: #1b5e20; border-color: #1b5e20; } .sc-timeslot-pill--disabled { background: var(--brandColorUltraLight, #f3eafc); color: #b39ddb; border-color: #d1c4e9; cursor: not-allowed; pointer-events: none; text-decoration: line-through; } .sc-timeslot-full-tag { display: none; } /* Loading spinner */ .sc-timeslot-loading { display: flex; align-items: center; justify-content: center; padding: 10px; width: 100%; } .sc-timeslot-loading .sc-spinner { width: 20px; height: 20px; border: 2px solid var(--borderColor); border-top-color: var(--brandColor); border-radius: 50%; animation: sc-timeslot-spin 0.6s linear infinite; } @keyframes sc-timeslot-spin { to { transform: rotate(360deg); } } @keyframes sc-timeslot-fadein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Mobiel: 3-koloms grid */ @media (max-width: 767px) { .sc-timeslot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .sc-timeslot-pill { min-width: 0; width: 100%; height: 44px; font-size: 15px; border-radius: 12px; } .sc-timeslot-pill--disabled { height: auto; min-height: 44px; } .sc-timerange-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sc-timerange-btn { width: 100%; min-height: 44px; } .sc-time-selected { font-size: 13px; border-radius: 10px; padding: 8px 12px; } .sc-time-selected-text { font-size: 13px; } } /* ========================================================================== Consolidated styles (verplaatst uit PHP views) ========================================================================== */ /* Toggle password button (login.php, register.php, checkout) */ .toggle-password { cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .toggle-password:hover { background-color: var(--brandColorUltraLight); } .toggle-password:hover .glyphicon { color: var(--brandColor); } /* VAT rate labels (price.php, cart.php) */ .vat_rate { font-size: 10px; color: #8888a0; } .vat_rate_extra { color: #8888a0; font-size: 0.9em; } /* Favorieten pagina (favs.php) */ .sc-favs-table td { vertical-align: middle !important; } .sc-favs-row { cursor: pointer; transition: background-color 0.15s ease; } .sc-favs-row:hover { background-color: var(--surfaceSubtle, #f8f7fc) !important; } .sc-favs-img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; } .sc-favs-name { color: var(--textPrimary, #1a1a2e); font-size: 14px; } .sc-favs-remove a { color: var(--textMuted, #999); transition: color 0.15s; } .sc-favs-remove a:hover { color: #d73e31; } td.hidden-xs.pjScFavsProductPrice { text-align: right; white-space: nowrap; } @media (max-width: 767px) { .sc-favs-img { width: 48px; height: 48px; } } /* ========================================================================= Prijzen: universele klassen voor alle pagina's ========================================================================= */ /* Container voor prijs met oud/nieuw onderscheid */ .sc-price-group { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } /* Oude prijs (doorgestreept) */ .sc-old-price { text-decoration: line-through; color: #8888a0; font-size: 0.88em; font-weight: 400; } /* Actieprijs (vetgedrukt, merkkleur) */ .sc-current-price { font-weight: 700; color: var(--brandColor); font-size: 1.05em; } /* Korting badge — roze accent */ .sc-discount-badge { display: inline-block; background-color: var(--accentColor); color: #fff; font-size: 0.72em; font-weight: 700; padding: 2px 7px; border-radius: 50px; letter-spacing: 0.3px; line-height: 1.4; white-space: nowrap; vertical-align: middle; } /* ── Afbeelding overlay badges ── */ /* Badge stapel container — linksboven */ .sc-badge-stack { position: absolute; top: 10px; left: 10px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; } /* Kortingsbadge op afbeelding */ .sc-image-badge { display: inline-block; background-color: var(--accentColor); color: #fff; font-size: 0.82em; font-weight: 700; padding: 4px 10px; border-radius: 50px; letter-spacing: 0.3px; line-height: 1.4; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15); pointer-events: none; } /* Product badge (configureerbaar) */ .sc-product-badge { display: inline-block; padding: 4px 12px; border-radius: 50px; color: #fff; font-size: 0.78em; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15); pointer-events: none; } /* Product galerij: position relative voor overlay badges */ .pjScProductGallery { position: relative; } /* Vergelijkbare producten: image wrapper */ .sc-similar-image-wrap { position: relative; display: inline-block; } /* ── "van"/"voor" prijslabels ── */ .sc-price-label { font-size: 0.78em; color: #8888a0; font-weight: 400; white-space: nowrap; } .sc-price-label--current { color: var(--brandColor); opacity: 0.7; } /* Product detail pagina: verticale layout, oud klein boven, nieuw groot onder */ .sc-price-group--detail { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 1em; } .sc-price-row--old { display: flex; align-items: baseline; gap: 4px; line-height: 1.4; } .sc-price-group--detail .sc-old-price { font-size: 0.85em; } .sc-price-group--detail .sc-price-label--van, .sc-price-group--detail .sc-price-label--voor { font-size: 0.8em; } .sc-price-row--current { display: flex; align-items: baseline; gap: 4px; } .sc-price-group--detail .sc-current-price { font-size: 1.5em; font-weight: 700; } /* Winkelwagen: verticale prijzen */ .sc-price-group--cart { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .sc-price-group--cart .sc-old-price { font-size: 0.85em; } .sc-price-group--cart .sc-current-price { font-size: 1em; } /* Vergelijkbare producten */ .sc-price-group--similar { font-size: 0.95em; justify-content: center; } /* Responsief */ @media (max-width: 767px) { .sc-price-group { gap: 4px; } .sc-price-group--cart { flex-direction: row; align-items: baseline; } .sc-discount-badge { font-size: 0.65em; padding: 1px 6px; } .sc-badge-stack { top: 6px; left: 6px; gap: 3px; } .sc-image-badge { font-size: 0.72em; padding: 3px 8px; } .sc-product-badge { font-size: 0.68em; padding: 3px 8px; } .sc-price-label { font-size: 0.7em; } .pjScProductPrice .sc-price-group { justify-content: center; } } /* Product grid (products.php) */ .pjScProduct { text-align: center; } .pjScProduct .pjScProductImages { margin-left: auto; margin-right: auto; } /* ── Product Gallery: main image + thumbnail strip ── */ /* Gallery container */ #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScProductGallery { position: relative; } /* Grote hoofdafbeelding */ .sc-gallery-main { position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: #fff; cursor: pointer; } .sc-gallery-main-img { display: block; width: 100%; height: auto; } .sc-gallery-main-link { display: block; } /* Zoom icoon overlay bij hover */ .sc-gallery-zoom { position: absolute; bottom: 12px; right: 12px; width: 36px; height: 36px; background: rgba(255,255,255,0.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #555; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .sc-gallery-main:hover .sc-gallery-zoom { opacity: 1; } /* Thumbnail strip */ .sc-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } /* Verberg scrollbar maar behoud functionaliteit */ .sc-gallery-thumbs::-webkit-scrollbar { height: 0; display: none; } .sc-gallery-thumbs { scrollbar-width: none; } .sc-gallery-thumb { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s ease, opacity 0.2s ease; scroll-snap-align: start; opacity: 0.6; } .sc-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .sc-gallery-thumb:hover { opacity: 0.85; } .sc-gallery-thumb.active { border-color: var(--brandColor); opacity: 1; } /* ── Responsief: mobiel ── */ @media (max-width: 767px) { .sc-gallery-thumb { width: 56px; height: 56px; } .sc-gallery-thumbs { gap: 6px; margin-top: 8px; } .sc-gallery-zoom { display: none; } } /* Add-to-cart fallback modal (products.php, product.php) */ .sc-add-to-cart-modal { position: fixed; top: 25%; left: 50%; transform: translateX(-50%); z-index: 9999; background: #fff; border: 1px solid var(--borderColor); padding: 30px; border-radius: 16px; box-shadow: 0 12px 40px var(--brandAlpha20); text-align: center; min-width: 300px; max-width: 440px; } .sc-add-to-cart-modal h5 { font-size: 18px; font-weight: 700; color: var(--textPrimary); } /* ========================================================================== #pjScEmptyCategoryMessage ========================================================================== */ #pjWrapperShoppingCart_theme1 .pjScEmptyCategoryMessage { padding: 0 15px; } #pjWrapperShoppingCart_theme1 .pjScProduct .pjScProductImage { margin: 0 auto; width: 100%;} /* label.scError: styling overgenomen door globale label.error / label.scError regel hierboven */ #pjWrapperShoppingCart_theme1 .scMaximumItems{ display: none;} [id^="pjWrapperShoppingCart_theme1"] .col-lg-1, [id^="pjWrapperShoppingCart_theme1"] .col-lg-10, [id^="pjWrapperShoppingCart_theme1"] .col-lg-11, [id^="pjWrapperShoppingCart_theme1"] .col-lg-12, [id^="pjWrapperShoppingCart_theme1"] .col-lg-2, [id^="pjWrapperShoppingCart_theme1"] .col-lg-3, [id^="pjWrapperShoppingCart_theme1"] .col-lg-4, [id^="pjWrapperShoppingCart_theme1"] .col-lg-5, [id^="pjWrapperShoppingCart_theme1"] .col-lg-6, [id^="pjWrapperShoppingCart_theme1"] .col-lg-7, [id^="pjWrapperShoppingCart_theme1"] .col-lg-8, [id^="pjWrapperShoppingCart_theme1"] .col-lg-9, [id^="pjWrapperShoppingCart_theme1"] .col-md-1, [id^="pjWrapperShoppingCart_theme1"] .col-md-10, [id^="pjWrapperShoppingCart_theme1"] .col-md-11, [id^="pjWrapperShoppingCart_theme1"] .col-md-12, [id^="pjWrapperShoppingCart_theme1"] .col-md-2, [id^="pjWrapperShoppingCart_theme1"] .col-md-3, [id^="pjWrapperShoppingCart_theme1"] .col-md-4, [id^="pjWrapperShoppingCart_theme1"] .col-md-5, [id^="pjWrapperShoppingCart_theme1"] .col-md-6, [id^="pjWrapperShoppingCart_theme1"] .col-md-7, [id^="pjWrapperShoppingCart_theme1"] .col-md-8, [id^="pjWrapperShoppingCart_theme1"] .col-md-9, [id^="pjWrapperShoppingCart_theme1"] .col-sm-1, [id^="pjWrapperShoppingCart_theme1"] .col-sm-10, [id^="pjWrapperShoppingCart_theme1"] .col-sm-11, [id^="pjWrapperShoppingCart_theme1"] .col-sm-12, [id^="pjWrapperShoppingCart_theme1"] .col-sm-2, [id^="pjWrapperShoppingCart_theme1"] .col-sm-3, [id^="pjWrapperShoppingCart_theme1"] .col-sm-4, [id^="pjWrapperShoppingCart_theme1"] .col-sm-5, [id^="pjWrapperShoppingCart_theme1"] .col-sm-6, [id^="pjWrapperShoppingCart_theme1"] .col-sm-7, [id^="pjWrapperShoppingCart_theme1"] .col-sm-8, [id^="pjWrapperShoppingCart_theme1"] .col-sm-9, [id^="pjWrapperShoppingCart_theme1"] .col-xs-1, [id^="pjWrapperShoppingCart_theme1"] .col-xs-10, [id^="pjWrapperShoppingCart_theme1"] .col-xs-11, [id^="pjWrapperShoppingCart_theme1"] .col-xs-12, [id^="pjWrapperShoppingCart_theme1"] .col-xs-2, [id^="pjWrapperShoppingCart_theme1"] .col-xs-3, [id^="pjWrapperShoppingCart_theme1"] .col-xs-4, [id^="pjWrapperShoppingCart_theme1"] .col-xs-5, [id^="pjWrapperShoppingCart_theme1"] .col-xs-6, [id^="pjWrapperShoppingCart_theme1"] .col-xs-7, [id^="pjWrapperShoppingCart_theme1"] .col-xs-8, [id^="pjWrapperShoppingCart_theme1"] .col-xs-9{ position: inherit ;; } /* Product form error labels: overerft van generieke #pjWrapperShoppingCart_theme1 label.error */ #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProductName{ display: block; line-height: 21px; overflow: hidden; text-overflow: ellipsis; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProductName a{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pjScEyeIcon:hover{cursor: pointer;} #pjWrapperShoppingCart_theme1 .pjScProductDetails p.text-indent{ padding-left: 30px; } #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScProductImage{text-align: center;} #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScProductImage img{display: inline-block;} #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages{ position: relative; overflow: hidden; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .scSelectorAddFavFromProductsList, #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .scSelectorRemoveFavFromProductsList{ position: absolute; top: 0; right: 5px; z-index: 10; font-size: 25px; padding: 0; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .owl-carousel .owl-nav{ display: none; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .owl-carousel .owl-nav{ font-size: 17px; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .owl-carousel .owl-nav .owl-prev{ position: absolute; top: 43%; left: 5px; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .owl-carousel .owl-nav .owl-next{ position: absolute; top: 43%; right: 5px; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .owl-carousel.owl-carousel-hidden{ opacity: 0; height: 0; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .owl-carousel.owl-carousel-active{ opacity: 1; height: 100%; transition-duration: 0.4s; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .pjScProductAttributes{ position: absolute; bottom: 0; left: 0; background: #fff; width: 100%; text-align: left; padding: 20px 10px; transition: margin .3s ease; margin-bottom: -500px; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .pjScProductAttributes.show{ margin-bottom: 0; } #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScProductShortDesc{margin: 10px 0;} #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScProductViewFullDesc{margin-bottom: 15px; text-decoration: underline; display: block;} #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScProductThumbs{margin: 10px 0 20px 0;} #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScProductThumbs .scSelectorProductThumb{display: block;} #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScProductThumbs .scSelectorProductThumb img{border-radius: 8px;} /* (Oude Swiper gallery CSS verwijderd — nu via .sc-gallery-* classes) */ #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScSeeMoreOnMobile .pjScProductInfo{ position: relative; } #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScSeeMoreOnMobile .pjScProductInfo .pjScCloseSeeMoreOnMobile{ position: absolute; font-size: 25px; right: 5px; top: 5px; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScCategoriesSearch{ padding-top: 4px; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScCategoriesSearch a{ font-size: 20px; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScCategoriesSearch .pjScToggleSearch{ padding-left: 5px; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScSearchFormContainer{ display: block; } #pjWrapperShoppingCart_theme1 .pjScSort{ position: relative; } #pjWrapperShoppingCart_theme1 .pjScSort .btn{ font-weight: normal; text-transform: inherit; } #pjWrapperShoppingCart_theme1 .pjScSort .dropdown .dropdown-menu{ right: 0; left: unset; padding: 0; } @media only screen and ( max-width: 480px ) { #pjWrapperShoppingCart_theme1 .pjScBar .btn-group .btn{padding: 6px 6px;} } @media only screen and ( max-width: 520px ) { /* ========================================================================== #Product ========================================================================== */ #pjWrapperShoppingCart_theme1 .pjScProduct .pjScBtnPrimary { margin-bottom: 5px; } } @media only screen and ( max-width: 767px ) { /* ========================================================================== #Product ========================================================================== */ #pjWrapperShoppingCart_theme1 .pjScBar .pjScCloseToggleWrap{ position: absolute; right: 7px; top: 3px; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScCloseToggleWrap a{ font-size: 25px } #pjWrapperShoppingCart_theme1 .pjScBar .pjScCategoriesContainer{ background: #fff; position: fixed; top: 0; width: 100%; height: 100%; z-index: 100; left: 0; padding: 35px 15px 15px 15px; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScCategoriesContainer .pjScNavCategories{ margin: 0; padding: 0; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScCategoriesContainer .pjScNavCategories li{ list-style: none; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScCategoriesContainer .pjScNavCategories li a{ font-size: 17px; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScCategoriesContainer .pjScNavCategories li a:hover{ text-decoration: none; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScCategoriesContainer .pjScNavCategories li ul{ padding-left: 25px; } #pjWrapperShoppingCart_theme1 .pjScBar .pjScSearchFormContainer{ background: #fff; position: fixed; top: 0; width: 100%; height: 100%; z-index: 100; left: 0; display: none; padding: 35px 15px 15px 15px; } #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages{ margin: 0 auto; } .pjSCProductDetails .row .col-md-5 col-sm-12 { width: 100%; } } @media only screen and ( max-width: 991px ) { .pjScProductDetails > .row { display: flex; flex-wrap: wrap; justify-content: center; } } @media only screen and ( min-width: 992px ) { .pjScProductDetails > .row { display: flex; flex-wrap: wrap; justify-content: center; } /* (Oude Swiper desktop gallery CSS verwijderd — nu via .sc-gallery-* classes) */ } /* Hide number input spinners for quantity field */ input[type="number"].scSelectorSpinValue::-webkit-outer-spin-button, input[type="number"].scSelectorSpinValue::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"].scSelectorSpinValue { -moz-appearance: textfield; } /* ========================================================================== Modern Enhancements ========================================================================== */ /* Product card image container */ #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages { border-radius: 12px; } /* Product attributes overlay */ #pjWrapperShoppingCart_theme1 .pjScProducts .pjScProduct .pjScProductImages .pjScProductAttributes { border-radius: 0 0 12px 12px; backdrop-filter: blur(6px); background: rgba(255, 255, 255, 0.95); } /* Dropdown menu modern styling */ .dropdown-menu { border-radius: 8px; box-shadow: 0 8px 24px var(--brandAlpha14); border: 1px solid var(--borderColor); overflow: hidden; } /* Gallery main image rounded */ #pjWrapperShoppingCart_theme1 .pjScProductDetails .pjScProductGallery .sc-gallery-main { border-radius: 12px; } /* Panel modern styling */ #pjWrapperShoppingCart_theme1 .panel.panel-default { border-color: var(--borderColor); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px var(--brandAlpha08); } /* Table striped modern */ #pjWrapperShoppingCart_theme1 .table-striped > tbody > tr:nth-of-type(odd) { background-color: #f8f7fc; } /* Cart page table hover */ #pjWrapperShoppingCart_theme1 .table > tbody > tr { transition: background-color 0.15s ease; } #pjWrapperShoppingCart_theme1 .table > tbody > tr:hover { background-color: var(--brandColorUltraLight); } /* Modal modern */ #pjWrapperShoppingCart_theme1 .modal-content { border-radius: 16px; border: none; box-shadow: 0 8px 30px var(--brandAlpha20); overflow: hidden; } #pjWrapperShoppingCart_theme1 .modal-header { border-bottom: 1px solid var(--borderColor); } #pjWrapperShoppingCart_theme1 .modal-footer { border-top: 1px solid var(--borderColor); } /* Alert messages */ #pjWrapperShoppingCart_theme1 .alert { border-radius: 12px; border: none; } #pjWrapperShoppingCart_theme1 .alert-success { background-color: #e8f5e9; color: #0f9d58; } #pjWrapperShoppingCart_theme1 .alert-danger { background-color: #fde8e8; color: #d73e31; } /* Well (used in some views) */ #pjWrapperShoppingCart_theme1 .well { border-radius: 12px; border: 1px solid var(--borderColor); box-shadow: none; background: #f8f7fc; } /* Smooth scrollbar for containers */ #pjWrapperShoppingCart_theme1 .pjScBar .pjScCategoriesContainer .pjScNavCategories { scrollbar-width: thin; scrollbar-color: #d0c8e0 transparent; } /* ========================================================================== SweetAlert2 Toast & Popup Custom Styling (Rendered outside #pjWrapperShoppingCart_theme1, global selectors needed) ========================================================================== */ /* Legacy toast styling — niet meer actief gebruikt door add-to-cart (nu popup), behouden als fallback voor eventuele andere SweetAlert2 toast instanties */ .swal2-popup.swal2-toast { border-radius: 16px !important; box-shadow: 0 8px 30px var(--brandAlpha18) !important; border: 1px solid var(--borderColor) !important; padding: 18px 24px !important; background: #ffffff !important; min-width: 420px !important; max-width: 600px !important; width: auto !important; overflow: hidden !important; } /* Toast title */ .swal2-popup.swal2-toast .swal2-title { color: var(--textPrimary) !important; font-weight: 600 !important; font-size: 16px !important; white-space: nowrap !important; } /* Toast success icon */ .swal2-popup.swal2-toast .swal2-icon.swal2-success { border-color: #0f9d58 !important; color: #0f9d58 !important; } .swal2-popup.swal2-toast .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #0f9d58 !important; } .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(15, 157, 88, 0.3) !important; } /* Toast error icon */ .swal2-popup.swal2-toast .swal2-icon.swal2-error { border-color: #d73e31 !important; color: #d73e31 !important; } /* Toast timer progress bar */ .swal2-popup.swal2-toast .swal2-timer-progress-bar { background: var(--brandColor) !important; border-radius: 0 0 16px 16px !important; height: 4px !important; } /* Toast close button */ .swal2-popup.swal2-toast .swal2-close { color: #8888a0 !important; font-size: 22px !important; transition: color 0.15s ease !important; } .swal2-popup.swal2-toast .swal2-close:hover { color: var(--brandColor) !important; } /* Toast buttons */ .swal2-popup.swal2-toast .btn { border-radius: 50px !important; font-weight: 600 !important; transition: all 0.25s ease !important; border: none !important; font-size: 14px !important; padding: 8px 22px !important; white-space: nowrap !important; display: inline-block !important; } .swal2-popup.swal2-toast .btn-default, .swal2-popup.swal2-toast .pjScBtnSecondary { background: var(--brandColorUltraLight) !important; color: var(--brandColor) !important; } .swal2-popup.swal2-toast .btn-default:hover, .swal2-popup.swal2-toast .pjScBtnSecondary:hover { background: var(--brandColor) !important; color: #fff !important; } .swal2-popup.swal2-toast .btn-primary, .swal2-popup.swal2-toast .pjScBtnPrimary { background: var(--brandColor) !important; color: #fff !important; } .swal2-popup.swal2-toast .btn-primary:hover, .swal2-popup.swal2-toast .pjScBtnPrimary:hover { background: var(--brandColorDark) !important; box-shadow: 0 4px 12px var(--brandAlpha30) !important; } /* Toast actions container - knoppen naast elkaar */ .swal2-popup.swal2-toast .swal2-actions, .swal2-popup.swal2-toast .swal2-html-container { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; margin-top: 4px !important; overflow: hidden !important; } /* ========================================================================== Add to Cart Popup (centered modal bij positie 'center') ========================================================================== */ .swal2-popup.sc-add-to-cart-popup { border-radius: 24px !important; box-shadow: 0 20px 60px var(--brandAlpha25) !important; padding: 24px 28px 22px !important; max-width: 400px !important; border: none !important; overflow: hidden !important; } /* Succes icoon — standaard SweetAlert2 formaat, alleen marge aanpassen */ .swal2-popup.sc-add-to-cart-popup .swal2-icon { margin: 0 auto 4px !important; transform: scale(0.7) !important; transform-origin: center center !important; } /* Titel — compact, niet te groot */ .swal2-popup.sc-add-to-cart-popup .swal2-title { font-size: 17px !important; font-weight: 700 !important; color: var(--textPrimary) !important; padding: 4px 0 0 !important; margin: 0 !important; line-height: 1.3 !important; letter-spacing: -0.2px !important; } /* HTML content container */ .swal2-popup.sc-add-to-cart-popup .swal2-html-container { overflow: visible !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; } /* Buttons naast elkaar */ .swal2-popup.sc-add-to-cart-popup .swal2-html-container > div { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; justify-content: center !important; margin-top: 4px !important; } /* Button basis stijl */ .swal2-popup.sc-add-to-cart-popup .btn { flex: 1 !important; white-space: nowrap !important; border-radius: 50px !important; font-weight: 600 !important; font-size: 13px !important; padding: 10px 20px !important; transition: all 0.25s ease !important; cursor: pointer !important; } /* Secondary button */ .swal2-popup.sc-add-to-cart-popup .pjScBtnSecondary { background: #fff !important; color: var(--brandColor) !important; border: 2px solid var(--borderColor) !important; } .swal2-popup.sc-add-to-cart-popup .pjScBtnSecondary:hover { background: var(--brandColorUltraLight) !important; border-color: var(--brandColor) !important; color: var(--brandColorDark) !important; transform: translateY(-1px) !important; } /* Primary button */ .swal2-popup.sc-add-to-cart-popup .pjScBtnPrimary { background: var(--brandColor) !important; color: #fff !important; border: 2px solid var(--brandColor) !important; } .swal2-popup.sc-add-to-cart-popup .pjScBtnPrimary:hover { background: var(--brandColorDark) !important; border-color: var(--brandColorDark) !important; box-shadow: 0 4px 16px var(--brandAlpha35) !important; transform: translateY(-1px) !important; } /* Timer progress bar */ .swal2-popup.sc-add-to-cart-popup .swal2-timer-progress-bar { background: var(--brandColor) !important; height: 4px !important; border-radius: 0 0 24px 24px !important; } /* Close button */ .swal2-popup.sc-add-to-cart-popup .swal2-close { color: #c0b8d0 !important; font-size: 22px !important; transition: color 0.15s ease !important; } .swal2-popup.sc-add-to-cart-popup .swal2-close:hover { color: var(--brandColor) !important; } /* ========================================================================== Add to Cart Corner Popup (hoekposities: top-end, top-start, bottom-*) Zelfde popup als center, maar zonder backdrop en gepositioneerd in een hoek. ========================================================================== */ /* Container: transparant, klikbaar door, hoge z-index */ .sc-add-to-cart-corner-container { pointer-events: none !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 10060 !important; } /* Popup zelf moet wel klikbaar zijn */ .sc-add-to-cart-corner-container .swal2-popup { pointer-events: auto !important; } /* Corner popup: compacter, subtielere schaduw, slide-in animatie */ .swal2-popup.sc-add-to-cart-popup.sc-add-to-cart-corner { max-width: 360px !important; padding: 20px 24px 18px !important; box-shadow: 0 8px 32px var(--brandAlpha22), 0 2px 8px rgba(0, 0, 0, 0.08) !important; border: 1px solid var(--brandAlpha08) !important; animation: scCornerSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } @keyframes scCornerSlideIn { from { opacity: 0; transform: scale(0.92) translateY(-12px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Bottom posities: slide van onder */ .swal2-bottom-start .sc-add-to-cart-popup.sc-add-to-cart-corner, .swal2-bottom-end .sc-add-to-cart-popup.sc-add-to-cart-corner, .swal2-bottom .sc-add-to-cart-popup.sc-add-to-cart-corner { animation: scCornerSlideInBottom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } @keyframes scCornerSlideInBottom { from { opacity: 0; transform: scale(0.92) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Corner popup marge van de rand */ .sc-add-to-cart-corner-container.swal2-top-end, .sc-add-to-cart-corner-container.swal2-top-start, .sc-add-to-cart-corner-container.swal2-bottom-end, .sc-add-to-cart-corner-container.swal2-bottom-start { padding: 20px !important; } /* ========================================================================== Payment Result Popup (centered modal) ========================================================================== */ .swal2-popup:not(.swal2-toast) { border-radius: 20px !important; box-shadow: 0 12px 40px var(--brandAlpha20) !important; padding: 28px !important; } .swal2-popup:not(.swal2-toast) .swal2-title { color: var(--textPrimary) !important; font-weight: 700 !important; font-size: 22px !important; } .swal2-popup:not(.swal2-toast) .swal2-html-container { color: #4a4a68 !important; font-size: 15px !important; line-height: 1.6 !important; } /* Popup success icon */ .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success { border-color: #0f9d58 !important; color: #0f9d58 !important; } .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #0f9d58 !important; } .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(15, 157, 88, 0.3) !important; } /* Popup error icon */ .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error { border-color: #d73e31 !important; color: #d73e31 !important; } .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: #d73e31 !important; } /* Popup warning icon — brandkleur i.p.v. default oranje */ .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-warning { border-color: var(--brandColor, #8438df) !important; color: var(--brandColor, #8438df) !important; } /* Popup info icon — paurs i.p.v. default lichtblauw */ .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-info { border-color: #8438df !important; color: #8438df !important; } /* Popup question icon — brandkleur */ .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-question { border-color: var(--brandColor, #8438df) !important; color: var(--brandColor, #8438df) !important; } /* Cursor pointer op alle Swal buttons */ .swal2-popup .btn, .swal2-popup .swal2-confirm, .swal2-popup .swal2-cancel, .swal2-popup .swal2-close { cursor: pointer !important; } /* Popup confirm button */ .swal2-popup:not(.swal2-toast) .swal2-confirm { border-radius: 50px !important; font-weight: 600 !important; padding: 10px 28px !important; font-size: 14px !important; background: var(--brandColor) !important; border: none !important; transition: all 0.25s ease !important; } .swal2-popup:not(.swal2-toast) .swal2-confirm:hover { background: var(--brandColorDark) !important; box-shadow: 0 4px 12px var(--brandAlpha30) !important; } /* Popup deny button — secondary/outline stijl */ .swal2-popup:not(.swal2-toast) .swal2-deny, .swal2-popup:not(.swal2-toast) .sc-swal-btn-secondary { border-radius: 50px !important; font-weight: 600 !important; padding: 10px 28px !important; font-size: 14px !important; background: transparent !important; color: var(--brandColor, #8438df) !important; border: 2px solid var(--brandColor, #8438df) !important; transition: all 0.25s ease !important; } .swal2-popup:not(.swal2-toast) .swal2-deny:hover, .swal2-popup:not(.swal2-toast) .sc-swal-btn-secondary:hover { background: var(--brandColorUltraLight, #f5f0fd) !important; } /* ── Carrier selectie kaarten ───────────────────── */ /* ── Carrier custom dropdown ─────────────────────── */ .sc-carrier-dropdown { position: relative; width: 100%; } .sc-carrier-trigger.form-control { display: flex !important; align-items: center; cursor: pointer; height: 42px; padding: 6px 28px 6px 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a4a68' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; width: 100%; } .sc-carrier-trigger-arrow { display: none; } .sc-carrier-trigger-content { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; } .sc-carrier-options { position: absolute; top: 100%; left: 0; right: 0; width: 100%; z-index: 1050; background: #fff; border: 1px solid var(--borderColor, #e8e4ef); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.12); margin-top: 2px; overflow: hidden; } @media (max-width: 767px) { .sc-carrier-options { right: auto; left: 0; min-width: 100%; } } .sc-carrier-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background .15s; font-size: 14px; } .sc-carrier-option:hover { background: #f5f0ff; } .sc-carrier-option--active { background: #f0ebff; } .sc-carrier-option-name { font-weight: 600; } .sc-carrier-option-price { margin-left: auto; color: var(--brandColor, #8438df); font-weight: 600; white-space: nowrap; } /* ── Winkelwagen adresinvoer ───────────────────── */ .sc-cart-address-box { position: relative; } /* Dropdown moet boven alles uitsteken, geen overflow clipping door parents */ .pjScCart-page .panel-body.form-horizontal { overflow: visible !important; } .pjScCart-page .panel { overflow: visible !important; } .sc-cart-address-summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surfaceSubtle, #f8f7fc); border: 1px solid var(--borderColor, #e8e4ef); border-radius: 8px; font-size: 14px; } .sc-cart-address-text { font-weight: 500; flex: 1; } .sc-cart-address-change { color: var(--brandColor, #8438df); font-size: 13px; white-space: nowrap; text-decoration: none; } .sc-cart-address-change:hover { text-decoration: underline; } .sc-cart-ac-dropdown { position: absolute; z-index: 10000; /* Boven Leaflet map tiles (z-index ~400) */ background: #fff; border: 1px solid var(--borderColor, #e8e4ef); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.12); max-height: 280px; overflow-y: auto; width: 100%; margin-top: 4px; } .sc-cart-ac-dropdown .sc-ac-item { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; transition: background .15s; } .sc-cart-ac-dropdown .sc-ac-item:last-child { border-bottom: none; } .sc-cart-ac-dropdown .sc-ac-item:hover { background: var(--surfaceSubtle, #f8f7fc); } .sc-cart-carrier-selection { width: 100%; } /* ── Verzendgebied blok ─────────────────────────── */ .sc-ship-area { margin: 8px 0 16px; padding: 12px 14px; background: var(--surfaceSubtle, #f8f7fc); border-radius: 10px; border: 1px solid var(--borderColor, #e8e4ef); max-width: 360px; margin-left: auto; } .sc-ship-area-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--textPrimary, #1a1a2e); } .sc-ship-area-hint { font-size: 12px; color: var(--textSecondary, #666); margin-bottom: 8px; } #sc-shipping-area-map { border-radius: 8px; margin-bottom: 8px; } #sc-shipping-area-map .leaflet-control-attribution { display: none; } /* ── Bezorgzone kaartje (frontend winkelwagen) ── */ .sc-dz-card { margin: 8px 0 16px; padding: 14px 16px; background: var(--surfaceSubtle, #f8f7fc); border-radius: 12px; border: 1px solid var(--borderColor, #e8e4ef); } .sc-dz-header { font-weight: 700; font-size: 14px; margin-bottom: 10px; color: var(--textPrimary, #1a1a2e); } .sc-dz-table { width: 100%; border-collapse: collapse; } .sc-dz-row td { padding: 6px 0; vertical-align: middle; border-bottom: 1px solid var(--borderColor, #e8e4ef); } .sc-dz-row:last-child td { border-bottom: none; } .sc-dz-dot-cell { width: 20px; padding-right: 6px !important; } .sc-dz-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; } .sc-dz-name-cell { font-size: 13px; font-weight: 500; color: var(--textPrimary, #1a1a2e); } .sc-dz-detail { font-size: 11px; font-weight: 400; color: var(--textSecondary, #666); } .sc-dz-cost-cell { text-align: right; white-space: nowrap; width: 1%; } .sc-dz-price { display: inline-block; font-size: 13px; font-weight: 700; color: var(--brandColor, #8438df); background: var(--brandAlpha06, rgba(132,56,223,.06)); padding: 2px 10px; border-radius: 20px; } .sc-dz-price--free { color: #2e7d32; background: #e8f5e9; } #sc-delivery-map { border-radius: 8px; } #sc-delivery-map .leaflet-control-attribution { display: none; } /* Kaart tooltip */ .sc-ship-tooltip { background: #fff !important; color: var(--textPrimary, #1a1a2e) !important; border: 1px solid var(--borderColor, #e8e4ef) !important; border-radius: 6px !important; padding: 4px 10px !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; } .sc-ship-tooltip::before { border-top-color: #fff !important; } /* Landenlijst */ .sc-ship-countries { display: flex; flex-direction: column; } .sc-ship-country { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: background .15s; border-bottom: 1px solid var(--borderColor, #e8e4ef); } .sc-ship-country:last-child { border-bottom: none; } .sc-ship-country:hover { background: rgba(132,56,223,.05); } .sc-ship-country--open { background: rgba(132,56,223,.05); } .sc-ship-country-name { font-weight: 600; color: var(--textPrimary, #1a1a2e); } .sc-ship-country-price { margin-left: auto; color: var(--brandColor, #8438df); font-weight: 600; font-size: 12px; white-space: nowrap; } /* Carrier detail (uitklapbaar per land) */ .sc-ship-detail { width: 100%; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--borderColor, #e8e4ef); } /* Tarieventabel */ .sc-ship-tariff-table { width: 100%; font-size: 12px; border-collapse: collapse; margin-bottom: 4px; } .sc-ship-tariff-table th { font-weight: 600; color: var(--textSecondary, #666); padding: 4px 6px 4px 0; text-align: right; font-size: 11px; white-space: nowrap; border-bottom: 1px solid var(--borderColor, #e8e4ef); } .sc-ship-tariff-table th:first-child { text-align: left; } .sc-ship-tariff-table td { padding: 5px 6px 5px 0; text-align: right; vertical-align: middle; border-bottom: 1px solid #f5f3fa; } .sc-ship-tariff-table td:first-child { text-align: left; } .sc-ship-td-carrier { font-weight: 600; white-space: nowrap; } .sc-ship-tariff-table tr:last-child td { border-bottom: none; } /* Actuele prijs highlight — bovenaan de carrier details */ .sc-ship-your-price { margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(132,56,223,.08); font-size: 14px; color: var(--textPrimary, #1a1a2e); border-left: 3px solid #8438df; } .sc-ship-your-price strong { color: var(--brandColor, #8438df); } /* ── Checkout vergrendeld adres ────────────────── */ .sc-checkout-address-locked { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--surfaceSubtle, #f8f7fc); border: 1px solid var(--borderColor, #e8e4ef); border-radius: 10px; margin-bottom: 12px; } .sc-locked-address-display { display: flex; align-items: center; font-weight: 500; font-size: 14px; gap: 4px; } .sc-locked-address-change { color: var(--brandColor, #8438df); font-size: 13px; white-space: nowrap; text-decoration: none; margin-left: 12px; } .sc-locked-address-change:hover { text-decoration: underline; } /* Carrier info binnen verzendgegevens panel */ .sc-checkout-carrier-info { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--surfaceSubtle, #f8f7fc); border: 1px solid var(--borderColor, #e8e4ef); border-radius: 10px; margin-top: 0; font-size: 14px; } .sc-checkout-carrier-name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--textPrimary, #333); } .sc-checkout-carrier-name svg { flex-shrink: 0; color: var(--brandColor, #8438df); } /* Popup cancel button */ .swal2-popup:not(.swal2-toast) .swal2-cancel { border-radius: 50px !important; font-weight: 600 !important; padding: 10px 28px !important; font-size: 14px !important; background: var(--brandColorUltraLight) !important; color: var(--brandColor) !important; border: none !important; transition: all 0.25s ease !important; } .swal2-popup:not(.swal2-toast) .swal2-cancel:hover { background: var(--brandColor) !important; color: #fff !important; } /* Buttons inside popup HTML content */ .swal2-popup .btn-warning { border-radius: 50px !important; font-weight: 600 !important; background: var(--accentColor) !important; border-color: var(--accentColor) !important; color: #fff !important; transition: all 0.25s ease !important; } /* ========================================================================== Payment Result Popup — succes & error specifiek ========================================================================== */ .sc-payment-result-popup { border-radius: 24px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--brandAlpha06) !important; padding: 36px 32px 28px !important; max-width: 440px !important; animation: scPaymentSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } @keyframes scPaymentSlideIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .sc-payment-result-popup .swal2-icon { margin: 0 auto 12px !important; /* Gebruik standaard SweetAlert2 formaat (80px) zodat de animatie-lijnen correct schalen */ } .sc-payment-result-popup .swal2-icon.swal2-success { border-color: #22c55e !important; color: #22c55e !important; } .sc-payment-result-popup .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #22c55e !important; } .sc-payment-result-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(34, 197, 94, 0.25) !important; } .sc-payment-result-popup .swal2-icon.swal2-error { border-color: #ef4444 !important; color: #ef4444 !important; } .sc-payment-result-popup .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: #ef4444 !important; } .sc-payment-result-popup .swal2-title { color: var(--textPrimary) !important; font-weight: 800 !important; font-size: 24px !important; margin-bottom: 4px !important; } .sc-payment-result-popup .swal2-html-container { color: #4a4a68 !important; font-size: 15px !important; line-height: 1.7 !important; padding: 0 8px !important; } .sc-payment-result-popup .swal2-html-container p { margin-bottom: 8px !important; } /* Orderdetails blokje in popup */ .sc-payment-result-popup .swal2-html-container .alert { border-radius: 12px !important; border: none !important; font-size: 13px !important; padding: 12px 16px !important; } .sc-payment-result-popup .swal2-html-container .alert-info { background: var(--brandColorUltraLight) !important; color: #4a4a68 !important; } .sc-payment-result-popup .swal2-html-container .alert-info strong { color: var(--textPrimary) !important; } .sc-payment-result-popup .swal2-html-container .alert-warning { background: #fef3cd !important; color: #856404 !important; border-radius: 12px !important; } /* Buttons in payment popup HTML */ .sc-payment-result-popup .btn { border-radius: 50px !important; font-weight: 600 !important; font-size: 14px !important; padding: 10px 24px !important; transition: all 0.25s ease !important; white-space: nowrap !important; cursor: pointer !important; } .sc-payment-result-popup .pjScBtnPrimary { background: var(--brandColor) !important; color: #fff !important; border: 2px solid var(--brandColor) !important; } .sc-payment-result-popup .pjScBtnPrimary:hover { background: var(--brandColorDark) !important; border-color: var(--brandColorDark) !important; box-shadow: 0 4px 16px var(--brandAlpha35) !important; transform: translateY(-1px) !important; } .sc-payment-result-popup .pjScBtnSecondary { background: #fff !important; color: var(--brandColor) !important; border: 2px solid var(--borderColor) !important; } .sc-payment-result-popup .pjScBtnSecondary:hover { background: var(--brandColorUltraLight) !important; border-color: var(--brandColor) !important; color: var(--brandColorDark) !important; transform: translateY(-1px) !important; } /* Confirm knop (Verder winkelen) */ .sc-payment-result-popup .swal2-confirm { border-radius: 50px !important; font-weight: 600 !important; font-size: 15px !important; padding: 12px 32px !important; border: none !important; background: var(--brandColor) !important; color: #fff !important; transition: all 0.25s ease !important; } .sc-payment-result-popup .swal2-confirm:hover { background: var(--brandColorDark) !important; box-shadow: 0 6px 20px var(--brandAlpha35) !important; transform: translateY(-1px) !important; } /* SweetAlert2 z-index boost (boven WordPress/YOOtheme elementen) */ .swal2-container { z-index: 10060 !important; } /* Backdrop alleen voor modale popups (niet voor toasts) */ body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show { background: rgba(26, 26, 46, 0.5) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } .swal2-popup .btn-warning:hover { background: #d40f76 !important; border-color: #d40f76 !important; } .swal2-popup .btn-primary { border-radius: 50px !important; font-weight: 600 !important; background: var(--brandColor) !important; border-color: var(--brandColor) !important; color: #fff !important; transition: all 0.25s ease !important; } .swal2-popup .btn-primary:hover { background: var(--brandColorDark) !important; border-color: var(--brandColorDark) !important; } .swal2-popup .btn-default { border-radius: 50px !important; font-weight: 600 !important; background: var(--brandColorUltraLight) !important; color: var(--brandColor) !important; border: none !important; transition: all 0.25s ease !important; } .swal2-popup .btn-default:hover { background: var(--brandColor) !important; color: #fff !important; } /* Alert inside popup */ .swal2-popup .alert { border-radius: 10px !important; border: none !important; } .swal2-popup .alert-warning { background-color: #fff3e0 !important; color: #e65100 !important; } /* Backdrop blur (alleen modals, niet toasts) */ body:not(.swal2-toast-shown) .swal2-container .swal2-backdrop-show { background: rgba(26, 26, 46, 0.4) !important; } /* Inline notification styling */ .sc-payment-notification.alert { border-radius: 12px !important; border: none !important; box-shadow: 0 4px 12px var(--brandAlpha10) !important; } .sc-payment-notification .btn { border-radius: 50px !important; font-weight: 600 !important; transition: all 0.25s ease !important; } /* ========================================================================== Check Betaling Button & Loading Spinner ========================================================================== */ .sc-check-payment-btn { border-radius: 50px !important; font-weight: 600 !important; transition: all 0.25s ease !important; position: relative !important; min-width: 160px !important; } /* Popup variant */ .sc-payment-result-popup .sc-check-payment-btn { background: #17a2b8 !important; border-color: #17a2b8 !important; color: #fff !important; padding: 10px 24px !important; font-size: 14px !important; } .sc-payment-result-popup .sc-check-payment-btn:hover:not(:disabled) { background: #138496 !important; border-color: #138496 !important; box-shadow: 0 4px 16px rgba(23, 162, 184, 0.35) !important; transform: translateY(-1px) !important; } /* Disabled state */ .sc-check-payment-btn:disabled { opacity: 0.75 !important; cursor: wait !important; } /* Loading spinner */ .sc-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: scSpinnerRotate 0.6s linear infinite; vertical-align: middle; margin-right: 4px; } @keyframes scSpinnerRotate { to { transform: rotate(360deg); } } /* Inline variant */ .sc-payment-notification .sc-check-payment-btn { background: #17a2b8 !important; border-color: #17a2b8 !important; color: #fff !important; } .sc-payment-notification .sc-check-payment-btn:hover:not(:disabled) { background: #138496 !important; border-color: #138496 !important; } /* ======================================== Checkout keuze-buttons ======================================== */ .sc-checkout-choice { display: flex; gap: 12px; flex-wrap: wrap; } .sc-checkout-choice .btn-choice { flex: 1; min-width: 160px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 15px; border: 2px solid var(--borderColor); border-radius: 12px; background: #fff; cursor: pointer; transition: all 0.25s ease; } .sc-checkout-choice .btn-choice:hover { border-color: var(--brandColor); box-shadow: 0 4px 12px var(--brandAlpha15); transform: translateY(-2px); } .sc-checkout-choice .btn-choice.active { border-color: var(--brandColor); background: #f8f4fd; box-shadow: 0 4px 12px var(--brandAlpha20); } .sc-checkout-choice .btn-choice-icon { font-size: 28px; color: var(--brandColor); margin-bottom: 10px; } .sc-checkout-choice .btn-choice-title { font-weight: 700; font-size: 15px; color: var(--textPrimary); margin-bottom: 4px; } .sc-checkout-choice .btn-choice-desc { font-size: 12px; color: #4a4a68; line-height: 1.4; } /* ======================================== Inline login panel ======================================== */ .sc-inline-login-panel .panel-heading { background: var(--brandColor); color: #fff; border-radius: 8px 8px 0 0; } .sc-inline-login-panel .sc-inline-login-btn { background: var(--brandColor); color: #fff; border: none; border-radius: 50px; padding: 8px 24px; transition: all 0.25s ease; } .sc-inline-login-panel .sc-inline-login-btn:hover { background: var(--brandColorDark); box-shadow: 0 4px 12px var(--brandAlpha30); } .sc-inline-login-panel .sc-inline-login-btn:disabled { opacity: 0.7; cursor: not-allowed; } .sc-login-feedback { margin-top: 10px; } .sc-login-feedback .alert { margin-bottom: 0; border-radius: 8px; } .sc-forgot-password-link { color: var(--brandColor); font-size: 13px; } .sc-forgot-password-link:hover { color: var(--brandColorDark); } /* Spinner voor login button */ .sc-inline-login-btn .fa-spinner { margin-right: 6px; } /* ========================================================================== Kassabon samenvatting (subtotaal, korting, verzending, btw, totaal) ========================================================================== */ /* Samenvatting container */ .sc-summary { padding: 12px 16px 8px; border-top: 1px solid var(--borderColor, #eee); } /* Elke samenvattingsregel: flex row, label links, waarde rechts */ .sc-summary-line { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; gap: 12px; } /* Samenvatting labels */ .sc-summary-label { font-size: 13px; font-weight: 500; color: var(--textPrimary, #333); flex: 1; min-width: 0; } /* Samenvatting waarden — zelfde breedte als productprijzen */ .sc-summary-value { font-size: 13px; font-weight: 600; color: var(--textPrimary, #333); text-align: right; white-space: nowrap; flex-shrink: 0; min-width: 70px; } /* Carrier logo in waarde-kolom */ .sc-summary-value .sc-receipt-carrier-logo { width: 50px; height: 16px; object-fit: contain; object-position: left center; vertical-align: middle; margin-right: 4px; } /* Korting: positief groen */ .sc-summary-discount { color: #2e7d32 !important; font-weight: 700; } /* BTW informatief onder totaal bij incl. BTW */ .sc-summary-vat-footer { padding: 8px 16px 14px; font-size: 11px; color: var(--textSecondary, #999); font-style: italic; } .sc-summary-vat-footer-line { display: flex; justify-content: space-between; padding: 1px 0; } /* Reverse charge notitie */ .sc-summary-note { font-size: 11px; color: var(--textSecondary, #999); text-align: center; padding: 2px 0 4px; } /* Totaalregel */ .sc-summary-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 16px; border-top: 2px solid var(--brandColor, #8438df); gap: 12px; } .sc-summary-total-label { font-weight: 700; font-size: 14px; color: var(--textPrimary, #333); } .sc-summary-total-price { font-size: 20px; font-weight: 800; color: var(--brandColor, #8438df); white-space: nowrap; text-align: right; min-width: 70px; } /* Legacy: verberg oude .row-gebaseerde samenvatting als die nog bestaat */ .pjScCheckout-b > .row.totalLastChild, .pjScCheckout-b > .row.sc-summary-row { display: none; } /* ======================================== Sticky winkelwagenoverzicht (checkout) ======================================== */ @media (min-width: 992px) { .pjScCheckout-page .pjScCheckout-lft { align-self: flex-start; position: sticky; top: 20px; } } /* ======================================== Checkout responsive (mobiel) ======================================== */ @media (max-width: 767px) { .sc-checkout-choice { flex-direction: column; } .sc-checkout-choice .btn-choice { min-width: auto; } /* Kassabon op mobiel: geen sticky, gewone flow */ .pjScCheckout-page .pjScCheckout-lft { padding-left: 15px; padding-right: 15px; margin-top: 20px; } } /* ======================================== Address Autocomplete (Photon/OpenStreetMap) ======================================== */ .sc-postcode-success { border-color: #5cb85c !important; box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.15) !important; } .sc-ac-dropdown { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 1050; background: #fff; border: 1px solid var(--borderColor); border-top: none; border-radius: 0 0 12px 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.1); max-height: 260px; overflow-y: auto; margin-top: -1px; } .sc-ac-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f4f2f7; transition: background-color 0.15s ease; outline: none; } .sc-ac-item:last-child { border-bottom: none; } .sc-ac-item:hover, .sc-ac-item:focus, .sc-ac-item.sc-ac-active { background-color: #f8f7fc; } .sc-ac-item .sc-ac-main { font-size: 14px; color: #2d2640; font-weight: 500; } .sc-ac-item .sc-ac-main .glyphicon { color: var(--brandColor); margin-right: 6px; font-size: 12px; } .sc-ac-item .sc-ac-sub { font-size: 12px; color: #6b6580; margin-left: 22px; margin-top: 2px; } .sc-ac-loading { cursor: default; color: #6b6580; font-style: italic; } .sc-ac-loading:hover { background-color: #fff; } .sc-ac-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--borderColor); border-top-color: var(--brandColor); border-radius: 50%; animation: sc-ac-spin 0.6s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes sc-ac-spin { to { transform: rotate(360deg); } } .sc-ac-no-results { cursor: default; color: #6b6580; font-size: 13px; } .sc-ac-no-results:hover { background-color: #fff; } .sc-ac-no-results .glyphicon { color: #d73e31; margin-right: 6px; } @media (max-width: 767px) { .sc-ac-dropdown { border-radius: 0 0 8px 8px; } .sc-ac-item { padding: 12px 10px; } } /* ======================================== Bestellen als bedrijf & Reverse Charge ======================================== */ .sc-business-panel { border-radius: 12px; } .sc-business-panel .panel-body { padding: 16px 20px; } .sc-business-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; font-weight: 500; font-size: 14px; color: var(--textPrimary, #1a1225); } .sc-business-checkbox { width: 18px; height: 18px; accent-color: var(--brandColor, #8438df); cursor: pointer; flex-shrink: 0; } .sc-business-toggle-label { user-select: none; } .sc-business-fields { padding-top: 4px; } /* BTW-nummer veld */ .sc-vat-number-wrapper .form-group { margin-bottom: 0; } .sc-vat-input-group { position: relative; } .sc-vat-input-group .form-control { padding-right: 36px; } .sc-vat-status { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; } .sc-vat-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--borderColor, #e8e4ef); border-top-color: var(--brandColor, #8438df); border-radius: 50%; animation: sc-ac-spin 0.6s linear infinite; } .sc-vat-result { display: none; margin-top: 6px; font-size: 13px; line-height: 1.4; } .sc-vat-success { color: #27ae60; font-weight: 500; } .sc-vat-error { color: #e74c3c; font-weight: 500; } .sc-vat-company-name { color: var(--textSecondary, #6b6580); font-size: 12px; } .sc-vat-reverse-charge-notice { display: none; margin-top: 12px; padding: 10px 14px; background-color: rgba(39, 174, 96, 0.08); border: 1px solid rgba(39, 174, 96, 0.25); border-radius: 8px; color: #27ae60; font-size: 13px; font-weight: 500; } .sc-reverse-charge-row label { color: #27ae60 !important; font-weight: 500; } .sc-vat-reverse-charge-inline { color: #27ae60; font-size: 12px; font-style: italic; } /* ======================================== intl-tel-input v21 Bootstrap 3 fixes ======================================== */ .iti { width: 100%; display: block !important; } .iti__country-container { z-index: 2; } .iti input.iti__tel-input, .iti input.iti__tel-input[type="tel"], .iti input.iti__tel-input[type="text"] { height: 42px; border-radius: 8px; width: 100%; padding-left: 90px !important; } .iti--show-selected-dial-code .iti__selected-dial-code { font-size: 13px; } /* Dropdown styling */ .iti__dropdown-content { background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 9999 !important; position: absolute; margin-top: 3px; max-width: 360px; min-width: 240px; } .iti__search-input { border: none !important; border-bottom: 1px solid var(--borderColor) !important; border-radius: 8px 8px 0 0 !important; padding: 10px 12px; font-size: 14px; outline: none; width: 100%; box-sizing: border-box; } .iti__country-list { max-height: 200px !important; overflow-y: auto !important; margin: 0; padding: 0; list-style: none; } .iti__country { display: flex !important; align-items: center; padding: 8px 12px; cursor: pointer; font-size: 13px; } .iti__country:hover, .iti__country.iti__highlight { background-color: #f5f0fc; } .iti__flag-box { margin-right: 8px; display: inline-flex; } .iti__country-name { margin-right: 6px; color: #333; } .iti__dial-code { color: #999; } .iti__selected-country { display: flex; align-items: center; padding: 0 8px; background: transparent; border: none; cursor: pointer; height: 100%; } .iti__arrow { margin-left: 4px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #555; } .iti__arrow--up { border-top: none; border-bottom: 4px solid #555; } /* Dropdown on body level (dropdownContainer: document.body) */ .iti--container { z-index: 99999 !important; } .sc-phone-valid { border-color: #5cb85c !important; } .sc-phone-error { border-color: #d73e31 !important; } /* Error label na intl-tel-input wrapper correct positioneren */ .iti + label.error, .iti ~ label.error { display: block; width: 100%; margin-top: 2px; } .form-group .iti { margin-bottom: 0; } /* ======================================== E-mail typo suggestie ======================================== */ .sc-email-suggestion { font-size: 12px; color: var(--brandColor); padding: 4px 0; margin-top: 2px; } .sc-email-suggestion a.sc-email-fix { color: var(--brandColor); font-weight: 600; text-decoration: underline; cursor: pointer; } .sc-email-suggestion a.sc-email-fix:hover { color: var(--brandColorDark); } /* ======================================== Winkelwagen pagina (cart.php) Verplaatst vanuit inline