/* Animationer för mjukare övergångar */ :root { /* NOTE: Do not map Bootstrap root variables (e.g. --bs-primary) directly to --color-primary here. Mapping root Bootstrap vars makes global utilities (bg-primary, text-primary, etc.) change whenever --color-primary is adjusted for testing. Use component-level mappings instead. */ } @keyframes fadeInSlideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes modalPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Applicera animation på element som visas (när hidden-klassen tas bort) */ #product-container:not(.hidden), #tillagg-container:not(.hidden), #distance-table:not(.distance-hidden), #avstand:not(.hidden), #tillagg-text:not(.hidden), #resultPrice:not(.hidden), #address-section:not(.distance-hidden) { animation: fadeInSlideDown 0.5s ease-out forwards; } /* Applicera animation på anpassade modaler */ .modal-content:not(.modal .modal-content), .modal-content2, .modal-condo, .modal-content-remove, .modal-content-dance { animation: modalPop 0.3s ease-out; } #distance-table { background-color: red; } body { background-color: var(--color-bg, #f0f0f0); /* Use an overlay layer that is themeable via --bg-overlay and an image token */ background-image: linear-gradient(var(--bg-overlay, rgba(255,255,255,0.5)), var(--bg-overlay, rgba(255,255,255,0.5))), var(--bg-image-url, url('pic/BK.jpg')); background-repeat: repeat; background-size: auto; font-family: 'Arial', sans-serif; /* Change the font family */ font-size: 16px; /* Change the font size */ color: var(--color-text, #212529); transition: background-color 220ms ease, color 220ms ease; } /* Enforce visible theme switch via data attribute on */ html[data-theme="dark"] body { background-image: linear-gradient(var(--bg-overlay, rgba(0,0,0,0.6)), var(--bg-overlay, rgba(0,0,0,0.6))), var(--bg-image-url, none) !important; background-size: cover; background-repeat: repeat; background-color: var(--color-bg, #0e1114) !important; color: var(--color-text, #e6eef8) !important; } html[data-theme="light"] body { /* ensure default background image is used for light */ background-image: linear-gradient(var(--bg-overlay, rgba(255,255,255,0.5)), var(--bg-overlay, rgba(255,255,255,0.5))), var(--bg-image-url, url('pic/BK.jpg')) !important; background-color: var(--color-bg, #ffffff) !important; color: var(--color-text, #212529) !important; } /* Standardstil för datorer (bredare skärmar) */ .receipt-container { margin-top: 20px; } .container { background: transparent; color: var(--color-text, #212529); width: 70%; /*max-width: 900px;*/ max-width: 1400px; margin: 0 auto; font-family: 'Verdana', sans-serif; /* Change the font family for container */ font-size: 13px; /* Change the font size for container */ } .side-cart { width: 350px; background: var(--color-card-bg, white); color: var(--color-text, #212529); height: fit-content; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-top: 0px; } .container-wrapper { display: flex; gap: 10px; /* Litet mellanrum mellan elementen */ width: 1100px; max-width: 1400px; margin: 0 auto; padding: 20px; justify-content: space-between; /* Jämnt utrymme mellan container och side-cart */ border-radius: 10px; align-items: flex-start; /* Om du vill att de ska vara i toppen av wrappern, kan justeras till center om så behövs */ background-color: rgba(255, 255, 255, 0.171); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .side-cart-header { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-card-border, #e9ecef); margin-bottom: 15px; } .button-group { display: flex; align-items: center; gap: 10px; justify-content: flex-start; /* Align buttons to the left */ position: relative; /* Add relative positioning */ } .receipt-icon { cursor: pointer; font-size: 1.2em; color: var(--color-muted, #6c757d); margin-left: auto; /* Push the receipt icon to the far right */ } .fa-receipt { margin-left: auto; /* This pushes only the receipt icon to the right */ } .alert-custom-summary { background-color: var(--color-surface, #f8f9fa); padding: 10px; margin: 10px 0; border-radius: 10px; cursor: pointer; } .alert-custom-summary:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .receipt-icon:hover { color: var(--color-success, #28a745); transform: scale(1.1); transition: all 0.2s ease; } .receipt-top, .receipt-middle, .receipt-bottom { width: 100%; display: block; } #receipt-display { position: fixed; left: 50%; top: -800px; transform: translateX(-50%); width: 300px; font-size: 0; display: flex; flex-direction: column; transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; visibility: hidden; /* Start completely hidden */ } .receipt-top { background-image: url('top.png'); background-size: 100% 100%; height: 50px; display: block; } .receipt-middle { background-image: url('middle.png'); background-size: 100% 100%; min-height: 100px; display: block; font-size: 16px; padding: 20px 30px; /* Adds spacing: 20px top/bottom, 30px left/right */ } .receipt-bottom { background-image: url('down.png'); background-size: 100% 100%; height: 50px; display: block; } #receipt-display.show { top: 30px; opacity: 1; visibility: visible; /* Show when needed */ } .initial-hidden { top: -800px !important; opacity: 0; } #address-section { max-height: 1000px; overflow: hidden; transition: all 0.5s ease-in-out; opacity: 1; transform: translateY(0); padding: 0px 10px; /* Reduce padding */ margin: -25px 0 5px 0; /* Further adjust margins to reduce top space */ line-height: 1.2; /* Adjust line height for tighter spacing */ } #address-section.minimized { max-height: 10px; /* Adjust based on your content */ opacity: 0.8; } .expand-button { cursor: pointer; transition: transform 0.3s ease; margin-left: 5px; color: var(--color-success, #28a745); } .address-result { cursor: pointer; transition: all 0.3s ease-in-out; transform: translateY(0); padding: 5px; } .address-result:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .result-content { padding: 5px 10px; /* Reduce padding */ margin: 5px 0; /* Adjust margins */ line-height: 1.2; /* Adjust line height for tighter spacing */ } .fa-receipt:hover { color: var(--color-success, #28a745); transform: scale(1.1); transition: all 0.2s ease; } .distance-hidden { display: none !important; } /* Specifik stil för mobiler (smalare skärmar) */ @media (max-width: 768px) { .container { width: 100%; max-width: 100%; padding: 15px; margin: 20px auto; } } #felsokningDescription { overflow: hidden; } #felsokningDescription::placeholder { font-style: italic; } #Button2 { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; /* Gör så att knappen är ovanpå andra element */ padding: 10px 20px; font-size: 16px; cursor: pointer; display: block; /* Gör att knappen är synlig när den inte är "hidden" */ } .styled-table { width: 80%; border-collapse: collapse; } .styled-table th, .styled-table td { padding: 10px; text-align: right; color: var(--color-text, #212529); border-bottom: 1px solid var(--color-card-border, #e9ecef); } #more-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, opacity 0.5s ease; margin-top: 20px; padding: 0 10px; border: 1px solid var(--color-card-border, #ccc); background-color: var(--color-card-bg, #f9f9f9); } .container2 { max-width: 900px; margin: 30px auto; background: var(--color-card-bg, white); padding: 15px; border-radius: 10px; } #more-content.show { opacity: 1; } .clickable-text { cursor: pointer; padding: 5px 10px; display: inline-block; } .selected { background-color: var(--color-success, #28a745); color: var(--color-btn-text, #ffffff); border-color: var(--color-success, #28a745); } .styled-table th { background-color: var(--color-header-bg, #ffffff); color: var(--color-header-text, #212529); border-bottom: 1px solid var(--color-card-border, #e9ecef); } .hidden { display: none !important; } /* Badges follow design tokens */ .badge { background-color: var(--color-badge-bg, #f8f9fa); color: var(--color-badge-text, #212529); border: 1px solid rgba(0,0,0,0.06); padding: 0.25em 0.5em; border-radius: 0.375rem; font-size: 0.75rem; } .badge .fa, .badge .fas { color: var(--color-badge-text, #212529); } /* Popups/alerts use popup token */ .alert { background-color: var(--color-popup-bg, var(--color-card-bg, #f8f9fa)); color: var(--color-text, inherit); border: 1px solid var(--color-card-border, rgba(0,0,0,0.06)); } /* Global utility overrides: make bootstraps .bg-* utilities theme-aware */ .bg-white { background-color: var(--color-card-bg, #ffffff) !important; color: var(--color-text, inherit) !important; } .bg-light { background-color: var(--color-surface, #f8f9fa) !important; color: var(--color-text, inherit) !important; } .bg-success-subtle { background-color: var(--color-success-subtle, rgba(25,135,84,0.08)) !important; color: var(--color-success, inherit) !important; } .bg-warning-subtle { background-color: var(--color-warning-subtle, rgba(255,193,7,0.08)) !important; color: var(--color-warning, inherit) !important; } .bg-danger-subtle { background-color: var(--color-danger-subtle, rgba(220,53,69,0.08)) !important; color: var(--color-danger, inherit) !important; } .btn-group { margin-bottom: 20px; } .fa-cogs { font-size: 1.5em; cursor: pointer; } .fa-cogs:hover { color: #007bff; } /* Flexbox layout for buttons */ .button-container { display: flex; justify-content: flex-end; gap: 10px; } .reload-btn, .edit-btn { font-size: 0.8em; background-color: rgba(255, 255, 255, 0.623); color: rgb(0, 0, 0); border: none; padding: 10px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; } .reload-btn:hover, .edit-btn:hover { background-color: #0057b338; transition: background-color 0.3s ease; /* Smooth transition */ cursor: pointer; transform: none; /* Remove the spin effect */ } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); /* Adjusted translateY value */ } 60% { transform: translateY(-5px); /* Adjusted translateY value */ } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .footer-logo { position: absolute; left: 50%; transform: translateX(-50%); z-index: 999; } .footer-logo img { width: 50px; height: auto; } .button-container2 { display: flex; justify-content: center; /* Horisontellt centrerad */ align-items: center; /* Vertikalt centrerad (om höjd anges) */ height: 100vh; /* Full höjd på skärmen, valfritt */ } .alert-custom { background-color: #d4edda; /* Ändra bakgrundsfärg */ color: #155724; /* Ändra textfärg */ border-color: #c3e6cb; /* Ändra kantfärg */ } /* Icon default color (inherits text unless explicitly set) Use --color-icon to override globally */ .fas, .fa { color: var(--color-icon, inherit); } /* Ensure icons inside buttons follow button text color (default: inherit so utilities like .text-dark work) */ .btn .fa, .btn .fas { color: inherit; } /* Keep explicit icon color for primary buttons to ensure contrast */ .btn.btn-primary .fa, .btn.btn-primary .fas { color: var(--color-btn-text, #fff); } /* Headings, titles and emphasis follow text tokens */ h1,h2,h3,h4,h5 { color: var(--color-text, #212529); } /* Small utility for surface text */ .text-muted { color: var(--color-muted, #6c757d) !important; } .modal-content2 { background-color: var(--color-popup-bg, var(--color-card-bg, #fefefe)) !important; margin: 15% auto; padding: 20px; border: 1px solid var(--color-card-border, #888); width: 15%; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); height: 400px; /* Fixed height */ min-height: 200px; /* Minimum height */ max-height: 80vh; /* Maximum height relative to viewport */ } .modal-content3 { background-color: var(--color-popup-bg, var(--color-card-bg, #fefefe)) !important; margin: 15%; padding: 20px; border: 1px solid var(--color-card-border, #888); width: 15%; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); height: 10px; /* Fixed height */ min-height: 200px; /* Minimum height */ max-height: 80vh; /* Maximum height relative to viewport */ } .close { color: #aaa; float: right; font-size: 10px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* Lägg till i CSS */ #snackbar { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: var(--color-snackbar-bg, #333); color: var(--color-snackbar-text, #fff); text-align: center; border-radius: 5px; padding: 16px; position: fixed; z-index: 1; bottom: 30px; left: 50%; font-size: 17px; } #snackbar.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; } #snackbar.success { background-color: var(--color-success, #28a745); /* Green */ } #snackbar.error { background-color: var(--color-danger, #dc3545); /* Red */ } #snackbar.info { background-color: var(--color-info, #17a2b8); /* Blue */ } @keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } @keyframes fadeout { from {opacity: 1;} to {opacity: 0;} } .more { border: none; color: rgb(0, 0, 0); border-radius: 10px; padding: 5px 12px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; font-size: 10px; } .table_more { width: 1em; height: 1em; margin-top: 0.25em; vertical-align: top; background-color: var(--color-card-bg, #fff); background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid rgba(0,0,0,.25); border-radius: 5px; appearance: none; } /* Om du vill ändra `alert-info` specifikt */ .alert-info { background-color: #b8daff; /* Ändra bakgrundsfärg för alert-info */ color: #004085; /* Ändra textfärg */ } .fa-plus, .fa-minus { font-size: 8px; /* Adjust this value as needed */ margin-left: 8px; /* Adds some space between text and icon */ } .quantity-display { font-weight: normal; font-size: 12px; margin: 0 4px; display: inline; } .quantity-btn { background: none; border: 1px solid var(--color-primary, #007bff); font-size: inherit; color: var(--color-primary, #007bff) !important; padding: 0 1px; cursor: pointer; } .quantity-btn.btn-link { color: var(--color-primary, #007bff) !important; } .quantity-btn:hover { background-color: var(--color-surface, #e9ecef); } .cart-container { position: fixed; top: 30px; left: calc(67% + 20px); /* Aligns with container width plus spacing */ z-index: 1000; } @media (max-width: 768px) { .cart-container { left: calc(100% - 60px); /* Adjusts for mobile view */ } } .cart-icon { background: var(--color-card-bg, #ffffff); padding: 10px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); cursor: pointer; } .cart-count { position: absolute; top: -10px; /* Move above the side-cart-header */ right: 10px; /* Align to the right */ background: var(--color-success, #28a745); color: var(--color-btn-text, #ffffff); border-radius: 50%; padding: 2px 6px; font-size: 12px; } .cart-item .d-flex { font-size: 14px; /* Ändra storleken på texten här */ } /*////////////////////////////////// styla "Ta bort"-knappen: */ /*///////////////////////////////// Varukorgen Lägg till CSS-regler för animationen: */ /*///////////////////////////////// Varukorgen Lägg till CSS-regler för animationen: */ .cart-items { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; width: 100%; /* Se till att cart-items tar upp hela bredden */ font-family: 'Tahoma', sans-serif; /* Change the font family for cart items */ font-size: 12px; /* Change the font size for cart items */ } .cart-item { background: var(--color-surface, #f8f9fa); border-radius: 10px; padding: 15px; transition: all 0.3s ease; display: flex; flex-direction: column; /* Ändra till kolumnlayout */ align-items: flex-start; /* Justera innehållet till vänster */ font-size: 15px; /* Ändra storleken på texten här */ width: 100%; /* Se till att cart-item tar upp hela bredden */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .cart-item:hover { transform: translateY(-5px); /* Flytta upp elementet lite vid hover */ } .item-details { display: flex; justify-content: space-between; margin-bottom: 5px; /* Lägg till mellanrum mellan name och price */ width: 100%; /* Se till att item-details tar upp hela bredden */ line-height: 1; /* Justera radavståndet här */ } .item-name { flex-grow: 1; /* Låt namnet ta upp så mycket utrymme som möjligt */ text-align: left; /* Vänsterjustera texten */ line-height: 1; /* Justera radavståndet här */ } .item-price { margin-left: auto; /* Pushes the price to the far right */ text-align: right; /* Ensures the text is right-aligned */ white-space: nowrap; /* Prevents line breaks */} .remove-btn { background: none; border: none; padding: 0; cursor: pointer; display: block; /* Gör knappen till ett blockelement */ margin: 10px 0 0 auto; /* Flytta ikonen till höger och ge lite marginal ovanför */ } .remove-btn i { color: #ccc; /* Ljusgrå ikonfärg */ font-size: 1.2em; /* Justera storleken på ikonen här */ transition: transform 0.2s, color 0.2s; } .remove-btn i:hover { transform: scale(1.2); /* Gör ikonen större vid hover */ color: #000; /* Ändra färgen vid hover */ } @keyframes add-to-cart { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .cart-items.added { animation: add-to-cart 0.5s ease; } #cart-section { margin: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; } .checkout-button { margin-top: 10px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } #service-content { display: none; } .cart-total { font-weight: bold; font-size: 1.2em; margin: 10px; text-align: right; } .service-container { max-width: 900px; margin: 20px auto; padding: 15px; background: white; border-radius: 10px; transition: all 0.3s ease; } .service-item { padding: 10px; border-bottom: 1px solid #eee; } .service-item:last-child { border-bottom: none; } .hidden { display: none; } img[id^="tv-service"]:hover, img[id^="washing-service"]:hover, img[id^="tools-service"]:hover { transform: scale(1.1); cursor: pointer; transition: transform 0.2s; } img[src="tv-data.avif"]:hover, img[src="washing-machine.gif"]:hover { transition: border 0.3s ease, box-shadow 0.3s ease; } .tillagg-text { display: none; /* Hide by default */ } .total-price { padding: 8px; margin-left: auto; /* Pushes the total price to the far right */ text-align: center; /* Center the text */ white-space: nowrap; /* Prevents line breaks */ float: right; /* Aligns the element to the right */ font-family: 'Verdana', sans-serif; /* Change the font family for container */ font-size: 14px; /* Change the font size */ } /* ...existing code... */ .top-left-buttons { position: absolute; top: 10px; left: 10px; display: flex; gap: 10px; } /* ...existing code... */ .hamburger-menu { position: relative; /* Ensure the menu is positioned correctly */ display: flex; } .menu-icon { display: flex; flex-direction: column; cursor: pointer; } .menu button, .menu a { display: flex; align-items: center; padding: 10px; text-decoration: none; color: #333; border: none; background: #ffffff; cursor: pointer; width: 100%; text-align: left; border-radius: 5px; gap: 10px; /* Add gap between icon and text */ line-height: 1.2; /* Reduce line height for tighter spacing */ margin-bottom: 5px; /* Add margin between items */ } .menu-icon span { height: 1px; width: 20px; background: #333; margin-bottom: 4px; transition: all 0.3s ease; } #menu-toggle { display: none; } #menu-toggle:checked + .menu-icon span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } #menu-toggle:checked + .menu-icon span:nth-child(2) { opacity: 0; } #menu-toggle:checked + .menu-icon span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .menu { display: none; flex-direction: column; position: absolute; background: var(--color-card-bg, rgba(255,255,255,0.61)); top: 10px; left: 0; width: 200px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 5px; padding: 10px; } #menu-toggle:checked ~ .menu { display: flex; } #menu-toggle:checked + .menu-icon + .menu { display: flex; } .menu button:hover, .menu a:hover { background: #f0f0f0; } .menu hr { border: none; border-top: 1px solid #ccc; margin: 10px 0; } /* ...existing code... */ .hover-effect { transition: transform 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 50%; } .hover-effect:hover { transform: scale(1.1) translateY(-10px); animation: bounce 0.5s; border-radius: 50%; cursor: pointer; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); /* Adjusted translateY value */ } 60% { transform: translateY(-5px); /* Adjusted translateY value */ } } /* ...existing code... */ /*///////////////////////////////////////////////*/ /* Left-side button and hidden div */ /*/////////////////////////////////////////////*/ /* Inline styles for the left-side button and the hidden div */ .left-side-button { position: fixed; left: 10px; top: 10px; background-color: transparent; color: var(--color-text, #212529); padding: 12px 15px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; z-index: 1000; display: flex; align-items: center; gap: 5px; } .left-side-button:hover { background-color: var(--color-surface, #f8f9fa); } .hidden-div { position: fixed; right: -600px; top: 50%; transform: translateY(-50%); width: 600px; background-color: var(--color-card-bg, #ffffff); border: 1px solid var(--color-card-border, #ddd); border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 30px; transition: all 0.3s ease; opacity: 0; visibility: hidden; z-index: 2000; /* Högre z-index för att vara ovanför allt */ } .close-hidden-div { position: absolute; top: 10px; right: 20px; font-size: 30px; font-weight: bold; color: var(--color-muted, #aaa); cursor: pointer; transition: color 0.3s; line-height: 1; } .close-hidden-div:hover { color: #333; } .hidden-div.show { right: 0; opacity: 1; visibility: visible; } .hidden-div h2 { text-align: left; margin-left: 8px; /* Adds some space between text and icon */ font-size: 20px; color: var(--color-success, #28a745); margin-bottom: 10px; } .hidden-div table { width: 100%; border-collapse: collapse; } .hidden-div table, .hidden-div th, .hidden-div td { border: none; /* Remove border between cells */ } .hidden-div th, .hidden-div td { padding: 8px; text-align: left; position: relative; cursor: default; /* Ensure cursor does not change */ } .tooltip { position: absolute; background-color: #7c7373; color: #fff; width: 300px; padding: 5px 10px; border-radius: 5px; white-space: pre-wrap; /* Allow line breaks */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1000; } .hidden-div td:hover .tooltip { opacity: 1; visibility: visible; } /*///////////////////////////////////////////////*/ /* ...existing code... */ /* ...existing code... */ .cart-icon-animation { animation: cart-icon-bounce 0.5s ease; } @keyframes cart-icon-bounce { 0%, 100% { transform: scale(2); } 50% { transform: scale(1.2); } } .btn.btn-success { background: var(--color-success, #218838) !important; /* Use token and force override */ background-image: none !important; border-color: var(--color-success-600, #1e7e34) !important; color: var(--color-btn-text, #ffffff) !important; padding: 5px 5px; /* Ändra padding */ font-size: 15px; /* Ändra textstorlek */ border-radius: 5px; /* Ändra hörnens rundning */ transition: background-color 0.3s ease, border-color 0.3s ease; /* Lägg till övergångseffekt */ } .btn.btn-success:hover { background: var(--color-success-600, #1e7e34) !important; border-color: var(--color-success-600, #1e7e34) !important; } /* Primary button component (alias for .btn.btn-primary) */ .btn.btn-primary, .primary-button { background-color: var(--color-button-primary, var(--color-primary, #007bff)) !important; border-color: var(--color-button-primary-600, var(--color-primary-600, #0056b3)) !important; color: var(--color-button-text, var(--color-btn-text, #ffffff)) !important; padding: 5px 5px; font-size: 15px; border-radius: 5px; transition: background-color 0.3s ease; } .btn.btn-primary:hover, .primary-button:hover { background-color: var(--color-button-primary-600, var(--color-primary-600, #0056b3)) !important; border-color: var(--color-button-primary-600, var(--color-primary-600, #004085)) !important; } .btn.btn-secondary { background-color: var(--color-secondary, #6c757d); border-color: var(--color-secondary-600, #6c757d); color: var(--color-btn-text, #ffffff); padding: 5px 5px; font-size: 15px; border-radius: 5px; transition: background-color 0.3s ease; /* Lägg till övergångseffekt */ } .btn.btn-link { color: inherit !important; /* allow utility classes like .text-dark to control color */ text-decoration: none !important; } .btn.btn-link:hover { color: var(--color-primary-600, #0056b3) !important; } /* Map Bootstrap primary buttons to theme tokens so they follow --color-primary */ .btn.btn-primary { --bs-btn-bg: var(--color-button-primary, var(--color-primary)); --bs-btn-border-color: var(--color-button-primary, var(--color-primary)); color: var(--color-button-text, var(--color-btn-text, #fff)); background-color: var(--bs-btn-bg) !important; border-color: var(--bs-btn-border-color) !important; } .btn.btn-primary:hover { background-color: var(--color-button-primary-600, var(--color-primary-600)) !important; border-color: var(--color-button-primary-600, var(--color-primary-600)) !important; } /* Outline / utility mappings - scoped to components only (avoid global utility override) */ .btn-outline-primary { color: var(--color-button-primary, var(--color-primary)) !important; border-color: var(--color-button-primary, var(--color-primary)) !important; } /* Keep global utilities (.bg-primary/.text-primary/.border-primary) untouched to avoid large visual shifts when experimenting with --color-primary. Use component-level overrides above, or add a specific helper class for elements that should follow the current theme (e.g. .use-theme-primary). */ /* Inline service list: make delivery and installation lists share the same visual treatment so they render consistently inside the Service selection modal. */ #delivery-list-content, #installation-list-content { background: var(--color-card-bg, #fff); border-radius: 10px; border: 1px solid var(--color-card-border, #e9ecef); padding: 6px; } #delivery-list-content .list-group-item, #installation-list-content .list-group-item { border-bottom: 1px solid #e9ecef; margin-bottom: 0 !important; padding-bottom: 0.6rem; /* Compact rows for a tighter, sleeker look */ min-height: 40px; display: flex; align-items: center; /* ensure vertical centering */ } #delivery-list-content .list-group-item:last-child, #installation-list-content .list-group-item:last-child { border-bottom: none; } #delivery-list-content .list-group-item:hover, #installation-list-content .list-group-item:hover { background: var(--color-primary-subtle, rgba(13,110,253,0.06)); } #delivery-list-content .badge, #installation-list-content .badge { font-size: 0.7rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } #delivery-list-content .rounded-pill, #installation-list-content .rounded-pill, #service-list .rounded-pill { background: var(--color-surface, #fff); border: 1px solid var(--color-card-border, #00000010); /* Slightly lower pill height for compactness */ height: 28px; padding-left: 6px; padding-right: 6px; display: inline-flex; align-items: center; } /* Ensure qty styles apply to legacy service list as well */ #service-list .fw-bold.qty-value, #service-list .qty-value { min-width: 22px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* Compact +/- buttons inside legacy service list */ #service-list .rounded-pill .btn { height: 22px; min-width: 24px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; } /* Make the small +/- buttons compact and vertically centered */ #delivery-list-content .rounded-pill .btn, #installation-list-content .rounded-pill .btn { height: 22px; min-width: 24px; padding: 0 5px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* Ensure qty number is centered and not expanding height (use explicit .qty-value to avoid colliding with heading styles) */ #delivery-list-content .rounded-pill .qty-value, #installation-list-content .rounded-pill .qty-value { min-width: 22px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* Ensure selected states inside these lists follow theme tokens instead of Bootstrap defaults */ #delivery-list-content .bg-primary-subtle, #installation-list-content .bg-primary-subtle { background: var(--color-primary-subtle, rgba(17,146,60,0.06)) !important; /* token-driven subtle bg */ } #delivery-list-content .border-primary, #installation-list-content .border-primary { border-color: var(--color-primary-border, rgba(17, 146, 60, 0.27)) !important; /* token-driven border color */ } #delivery-list-content .bg-primary-subtle .fw-medium, #installation-list-content .bg-primary-subtle .fw-medium { color: var(--color-text-on-primary-subtle, inherit) !important; } /* Legacy service list ("Övrigt"): match visuals to inline lists so hover/selected states and container styling are identical */ #service-list { background: var(--color-card-bg, #fff); border-radius: 10px; border: 1px solid var(--color-card-border, #e9ecef); padding: 6px; } #service-list .list-group-item { border-bottom: 1px solid #e9ecef; margin-bottom: 0 !important; padding-bottom: 0.6rem; /* Compact rows for a tighter, sleeker look */ min-height: 40px; display: flex; align-items: center; /* ensure vertical centering */ } #service-list .list-group-item:last-child { border-bottom: none; } #service-list .list-group-item:hover { background: var(--color-primary-subtle, rgba(13,110,253,0.06)); } #service-list .badge { font-size: 0.7rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } #service-list .bg-primary-subtle { background: var(--color-primary-subtle, rgba(17,146,60,0.06)) !important; /* token-driven subtle bg */ } #service-list .border-primary { border-color: var(--color-primary-border, rgba(17, 146, 60, 0.27)) !important; /* token-driven border color */ } #service-list .bg-primary-subtle .fw-medium { color: var(--color-text-on-primary-subtle, inherit) !important; } /* White Goods Grid ("Specificera dig"): mirror service list visuals and use tokens so it matches Övrigt/TV/Vitvaror */ #white-goods-grid { background: var(--color-card-bg, #fff); border-radius: 10px; border: 1px solid var(--color-card-border, #e9ecef); padding: 6px; } #white-goods-grid .list-group-item, #white-goods-grid .white-goods-item { border-bottom: 1px solid #e9ecef; margin-bottom: 0 !important; padding-bottom: 0.6rem; min-height: 40px; display: flex; align-items: center; transition: all 0.12s ease; } #white-goods-grid .list-group-item:last-child, #white-goods-grid .white-goods-item:last-child { border-bottom: none; } #white-goods-grid .list-group-item:hover, #white-goods-grid .white-goods-item:hover { background: var(--color-primary-subtle, rgba(13,110,253,0.06)); transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,0.04); } /* Token-driven selected state (override injected inline styles) */ #white-goods-grid .white-goods-item.selected { border-color: var(--color-primary-border, #0d6efd) !important; background: var(--color-primary-subtle, rgba(13,110,253,0.06)) !important; } #white-goods-grid .white-goods-check { color: var(--color-primary, #0d6efd); opacity: 0; transition: opacity 120ms ease; } #white-goods-grid .white-goods-item.selected .white-goods-check { opacity: 1; } /* Qty controls parity with other lists */ #white-goods-grid .qty-controls .rounded-pill { background: var(--color-surface, #fff); border: 1px solid var(--color-card-border, #00000010); height: 28px; padding-left: 6px; padding-right: 6px; display: inline-flex; align-items: center; } #white-goods-grid .qty-controls .btn { height: 22px; min-width: 24px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; } #white-goods-grid .qty-badge { min-width: 22px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } #white-goods-grid .white-goods-item.selected .fw-medium { color: var(--color-text-on-primary-subtle, inherit) !important; } .btn.btn-secondary:hover { background-color: #5a6268; /* Ändra bakgrundsfärg vid hover */ border-color: #545b62; /* Ändra kantfärg vid hover */ } .form-control { background-color: var(--color-surface, #f8f9fa); /* Ändra bakgrundsfärg */ border: 1px solid var(--color-card-border, #ced4da); /* Ändra kantfärg */ border-radius: 5px; /* Ändra hörnens rundning */ padding: 5px; /* Ändra padding */ font-size: 13px; /* Ändra textstorlek */ color: var(--color-text, #495057); /* Ändra textfärg */ transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Lägg till övergångseffekt */ } .form-control:focus { border-color: #80bdff; /* Ändra kantfärg vid fokus */ box-shadow: 0 0 5px rgba(0, 123, 255, 0.25); /* Lägg till skugga vid fokus */ } .checkbox-disabled { opacity: 0.5; pointer-events: none; } option:disabled { color: #999 !important; background-color: #f5f5f5 !important; } /*////////// /////////*/ .car-animation { position: absolute; animation: driveAway 2s forwards; } @keyframes driveAway { 0% { left: 10px; top: 50%; transform: translateY(-50%); } 100% { left: 120%; top: 50%; transform: translateY(-50%); } } .package { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: auto; display: none; } /* ...existing code... */ @keyframes moveRight { 0% { transform: translateX(0); } 100% { transform: translateX(100px); /* Adjust the value as needed */ } } .move-right { transition: transform 1s ease; } /* ...existing code... */ .rockets-container { position: fixed; bottom: 5px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .rocket { width: 20px; height: 50px; background: url('rocket.png') no-repeat center center; background-size: contain; animation: rocket-launch 1s ease-out forwards; } @keyframes rocket-launch { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-300px); opacity: 0; } } /* ...existing code... */ /* ...existing code... */ .tilted-flag { transform: translateX(-50%) rotate(20deg); /* Tilt the flag 10 degrees to the right */ } /* ...existing code... */ .modal-condo { background-color: var(--color-popup-bg, var(--color-card-bg, #fefefe)); margin: 15% auto; padding: 20px; border: 1px solid var(--color-card-border, #888); width: 15%; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); height: 100px; /* Adjusted height */ min-height: 100px; /* Minimum height */ max-height: 50vh; /* Maximum height relative to viewport */ } .form-check-inline { display: inline-block; margin-right: 10px; } .input-icon { position: relative; } .input-icon img { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: auto; } .input-icon input, .input-icon textarea { padding-left: 40px; /* Adjust padding to make space for the icon */ } .back-arrow { float: left; font-size: 24px; font-weight: bold; cursor: pointer; padding: 0 10px; } .back-arrow:hover { color: #666; } /* ...existing code... */ .service-name { position: relative; cursor: pointer; } .service-name .tooltip { position: absolute; background-color: #333; color: #fff; padding: 5px 5px; border-radius: 5px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1000; bottom: 100%; /* Position above the service name */ left: 50%; transform: translateX(-50%); } .service-name:hover .tooltip { opacity: 1; visibility: visible; } .service-name:hover .info-icon { transform: scale(1.05); /* Slightly enlarge the icon on hover */ transition: transform 0.3s ease; /* Add transition for smooth animation */ } .info-icon { margin-right: 0px; color: #007bff; cursor: pointer; transition: all 0.3s ease; } .info-icon:hover { color: #0056b3; animation: iconBounce 0.5s infinite; } @keyframes iconBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ...existing code... */ .tooltip .tooltip-inner { max-width: none; white-space: nowrap; } /* ...existing code... */ @keyframes text-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .bounce-on-hover:hover { animation: text-bounce 0.5s ease; } /* ...existing code... */ .back-icon { display: flex; align-items: center; padding: 10px; text-decoration: none; border: none; background: #ffffff; cursor: pointer; width: 100%; text-align: left; border-radius: 5px; gap: 10px; /* Add gap between icon and text */ line-height: 1.2; /* Reduce line height for tighter spacing */ margin-bottom: 5px; /* Add margin between items */ transition: transform 0.3s ease, background-color 0.3s ease; /* Add transition for smooth animation */ } .back-icon:hover { background: #f0f0f0; transform: scale(1.05); /* Slightly enlarge the icon on hover */ } /* ...existing code... */ .back-icon { display: flex; align-items: center; padding: 10px; text-decoration: none; color: #333; border: none; background: #ffffff; cursor: pointer; width: 100%; text-align: left; border-radius: 5px; gap: 10px; /* Add gap between icon and text */ line-height: 1.2; /* Reduce line height for tighter spacing */ margin-bottom: 5px; /* Add margin between items */ transition: transform 0.3s ease, background-color 0.3s ease; /* Add transition for smooth animation */ } .service-name:hover { color: #007bff; /* Change text color on hover */ transition: color 0.5s ease; /* Add transition for smooth animation */ } /* ...existing code... */ /* ...existing code... */ .service-name:hover { transform: translateY(-5px); transition: transform 0.2s ease; animation: bounce 0.5s; } /* ...existing code... */ .service-name:hover { transform: scale(1.05); transition: transform 0.3s ease; animation: iconBounce 0.5s infinite; } @keyframes iconBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ...existing code... */ .dance-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); } /* ...existing code... */ /* ...existing code... */ #tidsspann .modal-content-time { width: 20px !important; /* Adjust or add more properties as needed */ } /* ...existing code... */ /* Example from your "styles - kopia.css": */ .modal-content-time, #tidsspann .modal-content-time { width: 110% !important; /* ...other working rules from the old file... */ } /* ...existing code... */ @media (max-width: 768px) { .modal-content-time { width: 80% !important; /* ...any other responsive or necessary rules... */ } } /* Add this at the end of the file */ #dance_text { width: 90%; margin: 0 auto; display: block; } /* ...existing code... */ /* ...existing code... */ .bug-icon { animation: bugWiggle 2s ease-in-out infinite; transform-origin: center; display: inline-block; } @keyframes bugWiggle { 0%, 100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-10deg) translateY(-3px); } 75% { transform: rotate(10deg) translateY(-3px); } } /* ...existing code... */ .modal-remove { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 2000; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } /* Specific styles for the edit booking modal to center it */ #editBookingModal { align-items: center; justify-content: center; } #editBookingModal .modal-content-remove { margin: auto; max-height: 90vh; overflow-y: auto; } .modal-content-remove { background-color: #fefefec0; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ max-width: 500px; border-radius: 10px; font-size: 14px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .close-remove { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close-remove:hover, .close-remove:focus { color: black; text-decoration: none; cursor: pointer; } /* ...existing code... */ /* ...existing code... */ .icon { cursor: pointer; transition: box-shadow 0.3s ease; } .icon.selected { box-shadow: 0 0 25px 0px #105520; /* Change to the desired shadow color */ animation: pulse-shadow 1.5s infinite; /* Add animation for pulsing effect */ } @keyframes pulse-shadow { 0%, 100% { box-shadow: 0 0 25px 0px #105520d0; } 50% { box-shadow: 0 0 25px 10px #10552062; } } /* ...existing code... */ .bug-actions { display: flex; gap: 5px; align-items: center; } .delete-bug-btn { padding: 4px 8px; background: none; border: none; color: #dc3545; cursor: pointer; transition: opacity 0.2s; } .delete-bug-btn:hover { opacity: 0.7; } .bug-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee; background-color: rgba(255, 255, 255, 0.1); } /* Glow effect for Send Order button */ @keyframes btn-glow { 0% { box-shadow: 0 0 5px rgba(40, 167, 69, 0.2); } 50% { box-shadow: 0 0 20px rgba(40, 167, 69, 0.6); } 100% { box-shadow: 0 0 5px rgba(40, 167, 69, 0.2); } } #send-order-btn:not(.hidden):not(:disabled) { animation: btn-glow 2s infinite ease-in-out; transition: all 0.3s ease; } #send-order-btn:hover { transform: scale(1.02); } /* Time Slot Slider Styles */ #time-slot-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 6px; background: linear-gradient(to right, #dee2e6 0%, #dee2e6 100%); outline: none; transition: background 0.3s ease; } #time-slot-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; border-radius: 50%; background: #ffc107; border: 3px solid #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; margin-top: -10px; /* Center thumb on track (track is 12px, thumb is 32px, so offset = (12-32)/2 = -10px) */ } #time-slot-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(255, 193, 7, 0.5); } #time-slot-slider::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: #ffc107; border: 3px solid #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; margin-top: -10px; /* Center thumb on track for Firefox */ } #time-slot-slider::-moz-range-thumb:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(255, 193, 7, 0.5); } #time-slot-slider:active::-webkit-slider-thumb { transform: scale(1.2); background: #ffca2c; } #time-slot-slider:active::-moz-range-thumb { transform: scale(1.2); background: #ffca2c; } /* Slider track colors for different positions */ #time-slot-slider[value="-1"] { background: linear-gradient(to right, #dee2e6 0%, #dee2e6 100%); } #time-slot-slider[value="0"] { background: linear-gradient(to right, #28a745 0%, #dee2e6 25%, #dee2e6 100%); } #time-slot-slider[value="1"] { background: linear-gradient(to right, #28a745 0%, #28a745 25%, #dee2e6 50%, #dee2e6 100%); } #time-slot-slider[value="2"] { background: linear-gradient(to right, #28a745 0%, #28a745 25%, #ffc107 50%, #dee2e6 75%, #dee2e6 100%); } #time-slot-slider[value="3"] { background: linear-gradient(to right, #28a745 0%, #28a745 25%, #ffc107 50%, #ffc107 75%, #ffc107 100%); }