#lwrcustombooking-steps {
background-color: #f8f9fa;
font-family: Arial, sans-serif;
padding: 20px;
border-radius: 10px;
max-width: 800px;
margin: 0 auto;
width: 100%;
} #lwrcustombooking-steps h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #0790d2; }
#lwrcustombooking-steps p {
font-size: 14px;
color: #333;
margin-bottom: 10px;
} #lwrcustombooking-steps button {
background-color: #0790d2; color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
#lwrcustombooking-steps button:hover {
background-color: #0790d2; transform: scale(1.05);
}
#lwrcustombooking-steps button.prev-step {
background-color: #f0f0f0;
color: #333;
border: 1px solid #ddd;
}
#lwrcustombooking-steps button.prev-step:hover {
background-color: #e0e0e0;
} #lwrcustombooking-steps .manufacturer-options {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
#lwrcustombooking-steps .manufacturer-option {
border: 2px solid transparent;
padding: 15px;
border-radius: 10px;
text-align: center;
width: 120px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
background-color: white;
transition: border 0.3s, transform 0.2s;
cursor: pointer;
}
#lwrcustombooking-steps .manufacturer-option:hover {
border-color: #0790d2;
transform: scale(1.05);
}
#lwrcustombooking-steps .manufacturer-option img {
max-width: 50px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#lwrcustombooking-steps .manufacturer-option p {
font-size: 14px;
} #lwrcustombooking-steps #model-list, 
#lwrcustombooking-steps .services-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
}
#lwrcustombooking-steps .service-option, 
#lwrcustombooking-steps #model-list li {
background: white;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
text-align: center;
transition: box-shadow 0.3s, border 0.3s;
}
#lwrcustombooking-steps .service-option:hover, 
#lwrcustombooking-steps #model-list li:hover {
border: 1px solid #0790d2;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} #lwrcustombooking-steps #timeslot-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; } #lwrcustombooking-steps .timeslot-box {
display: flex;
align-items: center;
justify-content: center;
padding: 15px 20px;
border: 2px solid transparent; border-radius: 6px; background-color: #fff; color: #333;
cursor: pointer;
text-align: center;
transition: border 0.3s, transform 0.2s, box-shadow 0.2s;
} #lwrcustombooking-steps .timeslot-box:hover {
border: 2px solid #0790d2; transform: scale(1.05); } #lwrcustombooking-steps .timeslot-box.selected {
border: 2px solid #0790d2; background-color: #f0f8ff;  transform: scale(1.05); box-shadow: 0 2px 5px rgba(7, 144, 210, 0.3); } #lwrcustombooking-steps .timeslot-box input[type="checkbox"] {
display: none;
} #lwrcustombooking-steps .timeslot-box label {
display: block;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin: 0;
color: inherit; } #lwrcustombooking-steps .receipt {
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
background-color: #FFFFFF;
}
#lwrcustombooking-steps .receipt h3 {
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
color: #0790d2; }
#lwrcustombooking-steps #total-price {
font-size: 20px;
color: #0790d2; font-weight: bold;
} #lwrcustombooking-steps input[type="text"],
#lwrcustombooking-steps input[type="email"],
#lwrcustombooking-steps input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
color: #333;
box-sizing: border-box;
transition: border-color 0.3s, box-shadow 0.3s;
}
#lwrcustombooking-steps input[type="text"]:focus,
#lwrcustombooking-steps input[type="email"]:focus,
#lwrcustombooking-steps input[type="tel"]:focus {
border-color: #0790d2;
box-shadow: 0 0 5px rgba(7, 144, 210, 0.5);
outline: none;
} .button-container {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.button-wrapper {
display: inline-block;
}
#lwrcustombooking-steps #model-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
} #lwrcustombooking-steps #model-list .model-option label {
background: white;
border: 2px solid transparent; border-radius: 5px;
padding: 15px;
text-align: center;
cursor: pointer;
transition: border 0.3s, transform 0.2s;
position: relative;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } #lwrcustombooking-steps #model-list .model-option input[type="radio"],
#lwrcustombooking-steps #model-list .model-option input[type="checkbox"] {
display: none;
} #lwrcustombooking-steps #model-list .model-option input[type="radio"]:checked + label,
#lwrcustombooking-steps #model-list .model-option input[type="checkbox"]:checked + label {
border: 2px solid #0790d2; box-shadow: 0 2px 5px rgba(7, 144, 210, 0.3); transform: scale(1.05);  } #lwrcustombooking-steps #model-list .model-option label:hover {
border: 2px solid #0790d2; transform: scale(1.05);
} #lwrcustombooking-steps #model-list .model-option label {
display: block;
text-align: center;
padding: 15px;
cursor: pointer;
border: 2px solid transparent; border-radius: 5px;
transition: border 0.3s, transform 0.2s;
}
#lwrcustombooking-steps #model-list .model-option label img {
max-width: 50px;
margin-bottom: 10px;
}
#lwrcustombooking-steps #model-list .model-option label p {
font-size: 14px;
color: #333;
margin: 0;
} #colour-options-container {
display: flex;
flex-wrap: wrap;
gap: 15px; justify-content: center; } #colour-options-container .colour-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100px; height: 140px; padding: 10px;
text-align: center;
border: 2px solid transparent; border-radius: 8px; cursor: pointer;
transition: border 0.3s, transform 0.2s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); background-color: #fff; } #colour-options-container .colour-option .colour-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px; } #colour-options-container .colour-option .colour-circle {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #000; } #colour-options-container .colour-option p {
font-size: 14px;
color: #333;
margin: 0;
} #colour-options-container .colour-option:hover {
border: 2px solid #0790d2; transform: scale(1.05); } #colour-options-container .colour-option.selected {
border: 2px solid #0790d2; box-shadow: 0 2px 5px rgba(7, 144, 210, 0.3); transform: scale(1.05);  } #colour-options-container .colour-option input[type="radio"] {
display: none;
} .services-selection {
display: flex; gap: 20px; align-items: flex-start; } .services-options {
flex: 3; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .receipt {
flex: 1; padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: sticky; top: 20px; max-height: 500px; overflow-y: auto; } .receipt h3 {
font-size: 18px;
margin-bottom: 10px;
color: #333;
} .receipt ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.receipt ul li {
font-size: 14px;
color: #666;
margin-bottom: 5px;
} .receipt p {
margin-top: 10px;
font-size: 16px;
font-weight: bold;
color: #333;
text-align: right; } .service-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border: 2px solid transparent; border-radius: 8px; cursor: pointer;
transition: border 0.3s, box-shadow 0.3s, transform 0.2s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); background-color: #fff; position: relative; } .service-option:hover {
border: 2px solid #0790d2; transform: scale(1.02); } #lwrcustombooking-steps .service-option.selected {
border: 2px solid #0790d2; box-shadow: none; transform: scale(1.05);  } .service-option input[type="checkbox"] {
display: none; } #lwrcustombooking-steps .service-option label {
font-size: 16px;
font-weight: bold;
color: #333;
cursor: pointer;
} #lwrcustombooking-steps .service-option span {
font-size: 14px;
color: #666;
}
#lwrcustombooking-steps .device-type-options {
display: flex;
gap: 15px;
} #lwrcustombooking-steps .device-option {
cursor: pointer;
padding: 15px;
border: 2px solid transparent;
display: flex;
flex-direction: column; align-items: center;
justify-content: center;
text-align: center;
background-color: #fff;
border-radius: 8px; transition: border 0.3s, transform 0.2s, box-shadow 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); width: 120px; height: 150px; }
#lwrcustombooking-steps .device-option:hover {
border-color: #0790d2; transform: scale(1.05); }
#lwrcustombooking-steps .device-option img {
width: 60px; height: 60px; object-fit: contain; margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#lwrcustombooking-steps .device-option p {
font-size: 14px; color: #333; margin: 0;
} #lwrcustombooking-steps .device-option.selected {
border: 2px solid #0790d2;
box-shadow: 0 4px 8px rgba(7, 144, 210, 0.3); transform: scale(1.05); } #lwrcustombooking-steps .repair-type-options {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
#lwrcustombooking-steps .repair-type-option {
display: inline-block;
cursor: pointer;
padding: 20px;
text-align: center;
border: 2px solid transparent;
border-radius: 8px;
transition: all 0.3s ease;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
#lwrcustombooking-steps .repair-type-option p {
font-size: 16px;
font-weight: bold;
color: #333;
margin: 0;
}
#lwrcustombooking-steps .repair-type-option:hover {
border-color: #007cba;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#lwrcustombooking-steps .hidden-repair-type {
display: none;
} #lwrcustombooking-steps .hidden-repair-type:checked + .repair-type-option {
border-color: #007cba;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#lwrcustombooking-steps .hidden-repair-type:checked + .repair-type-option p { }
#lwrcustombooking-steps .device-type-options .selected {
border-color: #007cba !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
#model-search-bar {
position: relative;
}
#model-search-results {
margin: 0px;
padding: 0px;
border-width: 0px;
list-style: none;
}
.search-result-item {
padding: 8px;
border-bottom: 1px solid #eee;
}
.search-result-item:hover {
cursor: pointer;
background-color: #ddd;
} .lightbox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.9); display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
overflow: hidden;
max-width: 100vw !important;
} .lightbox-content {
position: relative;
background: #fff;
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); max-width: 90%; max-height: 85vh; overflow-y: auto; padding: 20px;
text-align: center;
width: 500px; } .lightbox-content .close-lightbox {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
font-weight: bold;
color: #333;
cursor: pointer;
transition: color 0.3s ease;
}
.lightbox-content .close-lightbox:hover {
color: #000;
} .lightbox .instructions {
margin-top: 20px;
text-align: left;
max-height: calc(100% - 40px); }
.lightbox .instruction {
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.lightbox .instruction h3 {
margin-bottom: 5px;
font-size: 18px;
color: #333;
}
.lightbox .instruction p {
margin: 0;
font-size: 14px;
color: #555;
} .lightbox-content::-webkit-scrollbar {
width: 8px;
}
.lightbox-content::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.lightbox-content::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.5);
}
.find-model-number {
color: #ff3333;
} @media (max-width: 768px) { .services-selection {
flex-direction: column; gap: 15px;
}
.services-options {
grid-template-columns: repeat(2, 1fr); gap: 15px; }
.receipt {
width: calc(100% - 30px); max-width: none; position: relative; margin-top: 20px;
padding: 15px;
box-shadow: none; } #lwrcustombooking-steps .manufacturer-options {
flex-wrap: wrap; gap: 15px; justify-content: center; }
#lwrcustombooking-steps .manufacturer-option {
width: calc(50% - 10px); text-align: center; } #lwrcustombooking-steps .device-type-options {
flex-wrap: wrap; gap: 10px; justify-content: space-around; }
#lwrcustombooking-steps .device-option {
flex: 1 1 calc(50% - 10px); max-width: 150px; box-sizing: border-box; } #lwrcustombooking-steps #model-list, 
#lwrcustombooking-steps .services-options {
grid-template-columns: repeat(2, 1fr); gap: 10px; } #lwrcustombooking-steps #timeslot-container {
grid-template-columns: 1fr; gap: 15px; } #lwrcustombooking-steps button {
font-size: 18px;
padding: 10px;
}
.button-container {
margin-top: 40px;
}
#lwrcustombooking-steps #model-list, #lwrcustombooking-steps .services-options {
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}
#lwrcustombooking-steps .repair-type-option {
width: 128px;
}
#order_review_heading, #order_review {
width: 100% !important;
clear: both;
}
} .woocommerce-checkout #payment {
margin-top: 20px;
padding: 20px;
border: 1px solid #e6e6e6;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} .woocommerce-checkout #payment .payment_methods label {
font-size: 16px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
cursor: pointer;
} .woocommerce-checkout #payment .form-row {
margin-bottom: 15px;
} .woocommerce-checkout #payment input[type="text"],
.woocommerce-checkout #payment input[type="number"],
.woocommerce-checkout #payment input[type="email"],
.woocommerce-checkout #payment input[type="password"],
.woocommerce-checkout #payment input[type="tel"] {
width: 100%;
padding: 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
transition: border-color 0.3s ease;
}
.woocommerce-checkout #payment input:focus {
border-color: #0790d2; box-shadow: 0 0 5px rgba(142, 68, 173, 0.4);
outline: none;
} .woocommerce-checkout #payment .payment_box {
margin-top: 15px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 6px;
background: #fff;
display: none; }
.woocommerce-checkout #payment .payment_box.open {
display: block; } .woocommerce-checkout #payment #place_order {
background-color: #0790d2;
color: #fff;
border: none;
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.woocommerce-checkout #payment #place_order:hover {
background-color: #732d91;
} .woocommerce-checkout #payment .wc_payment_methods {
list-style: none;
padding: 0;
}
.woocommerce-checkout #payment .wc_payment_methods li {
padding: 10px 0;
border-bottom: 1px solid #e6e6e6;
}
.woocommerce-checkout #payment .wc_payment_methods li:last-child {
border-bottom: none;
}
.order_item .wc-item-meta {
display: none !important;
} #payment {
margin-top: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} #payment .wc_payment_methods {
list-style: none;
padding: 0;
margin: 0;
}
#payment .wc_payment_methods li {
padding: 15px;
border-bottom: 1px solid #e6e6e6;
display: block;
align-items: center;
}
#payment .wc_payment_methods li:last-child {
border-bottom: none;
} #payment .wc_payment_methods input[type="radio"] {
margin-right: 10px;
accent-color: #0790d2;
transform: scale(1.2);
}
#payment .wc_payment_methods label {
font-size: 16px;
font-weight: 600;
color: #333;
cursor: pointer;
} #payment .payment_box {
margin-top: 10px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
}
#payment .payment_box.open {
display: block; animation: fadeIn 0.3s ease-in-out;
} @keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} #payment .form-row label {
font-size: 14px;
font-weight: 500;
color: #555;
margin-bottom: 5px;
display: block;
}
#payment .form-row input[type="text"],
#payment .form-row input[type="number"],
#payment .form-row input[type="email"],
#payment .form-row input[type="tel"] {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: border-color 0.3s ease;
}
#payment .form-row input:focus {
border-color: #0790d2;
box-shadow: 0 0 5px rgba(142, 68, 173, 0.4);
outline: none;
} #payment #place_order {
background-color: #0790d2;
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 5px;
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#payment #place_order:hover {
background-color: #732d91;
} .woocommerce-privacy-policy-text {
font-size: 14px;
color: #666;
margin-top: 15px;
} .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
margin-right: 5px;
transform: scale(1.2);
accent-color: #0790d2;
}
#order_review_heading, #order_review {
width: 100% !important;
}
.device-type-options {
display: flex;
flex-wrap: wrap;
gap: 1rem; }
.device-option {
flex: 1 1 120px; min-width: 120px;
box-sizing: border-box;
padding: 1rem; background: #f0f0f0; }