:root{
  wpGray:#6b7280;
}

aside#genesis-sidebar-primary, nav.nav-secondary { display: none; }
main#genesis-content { max-width: 100%; }
.wpsmrt-app-wrapper { display: flex; justify-content: center; background: #f0f2f5; } 
.wpsmrt-app-card {position: relative; width: 100%; max-width: 420px; background: #ffffff; border-radius: 20px; padding: 2rem; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08); background: linear-gradient(180deg, #d4d4d417 0%, #ffffff 50%, #ffffff 90%, #d4d4d417 100%); min-height: 525px;} 
.wpsmrt-welcome { text-align: center; background: #eaf6ff; padding: 2.5rem; border-radius: 15px; margin-bottom: 1.5rem; box-shadow: inset 0 2px 6px rgba(0,0,0,0.05); padding-top: 4rem;} 
.wpsmrt-actions { display: flex; flex-direction: column; gap: 1rem; } 
.wpsmrt-action-card { border: 1px solid #ddd; padding: 1rem; border-radius: 12px; cursor: pointer; transition: background 0.2s; } 
.wpsmrt-action-card:hover { background: #f9f9f9; }

div#wpsmrt-welcome-view h2 { font-size: 27px; font-weight: 700; color: #000000; margin-bottom: 20px;}
div#wpsmrt-welcome-view h3 { color: var(--wpGray); font-size: 21px; font-weight: 500; margin-bottom: 8px;}
div#wpsmrt-welcome-view #wpsmrt_schedulePickupBtn, div#wpsmrt-welcome-view .wpsmrt_edit_schedulePickupBtn { display: inline-block; background: #04afeb; color: white; padding: 16px 20px; border-radius: 30px; font-weight: 500; font-size: 16px; margin-top: 1rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); border: none; cursor: pointer;     min-width: 200px;}
div#wpsmrt-welcome-view #wpsmrt_schedulePickupBtn:hover, div#wpsmrt-welcome-view .wpsmrt_edit_schedulePickupBtn:hover{background-color:#04afebde;}
div.wpsmrt-app-card h4 { color: var(--wpGray); text-align: center; font-size: 21px; font-weight: 500; margin-bottom: 40px; }
div.wpsmrt-app-card label{display: block; font-size: 16px; color: #171717; margin-bottom: 7px;}
div.wpsmrt-app-card label strong { font-size: 18px; margin-bottom: 15px; display: block; color: #000000; }
div.wpsmrt-app-card .form-actions { margin-top: 60px; display: flex ; gap: 70px; justify-content: space-between;}
div.wpsmrt-app-card .form-actions button.wpsmrt-submit { background: linear-gradient(181deg, #72be79, #50af5a);  border-color: #50af5a; width: 100%;}

div.wpsmrt-app-card .form-actions button {border-radius: 9999px;border-width: 1px;font-size: 16px; padding: 11px 15px;}
div.wpsmrt-app-card .form-actions button.wpsmrt-submit:disabled{background: #eee; border: none;}
div.wpsmrt-app-card select {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: white url('../down-arrow.png') no-repeat right 1rem center; background-size: 1em; padding-right: 2.5rem; padding: 16px 32px 16px 16px; border-color: #d4d4d4; border-radius: 30px; font-size: 16px; color: #000000; margin-bottom: 20px;}

.wpsmrt-loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 9999; display: flex; align-items: center; justify-content: center; } 
.wpsmrt-loader { width: 50px; height: 50px; border: 6px solid #ccc; border-top-color: #3498db; border-radius: 50%; animation: spin 0.8s linear infinite; } 
@keyframes spin { to { transform: rotate(360deg); } }

div#wpsmrt-edit-schedule-view .form-group { margin-bottom: 25px; }
.wpsmrt-pickup-date-display-wrapper { display: flex ; justify-content: space-between; align-items: flex-start; }
button.wpsmrt_editAppoitment, button.wpsmrt_editAppoitmentCleaninginfo, .wpsmrt-upcoming-events-flex button { line-height: 1; padding-top: .5rem; padding-bottom: .5rem; padding-left: 1rem; padding-right: 1rem; color: #262626; background: linear-gradient(360deg, #d4d4d4, #00000000); border-color: #d4d4d4; font-weight: 500; border-width: 1px; border-radius: 9999px; font-size: .875rem; }

div.wpsmrt-app-card h1 { font-size: 23px; margin: 10px 0 30px; text-align: center;}
div.wpsmrt-app-card .wpsmrt-logo-wrapper { border-radius: 9999px; padding: 10px; width: 130px; height: 130px; background: #ffffff; display: flex; justify-content: center; align-items: center; overflow: hidden; margin: auto; }
div.wpsmrt-app-card a.wpsmrt-logout { font-size: 15px; padding: 8px 16px; width: 100%; border: 1px solid #d4d4d4; background: linear-gradient(360deg, #d4d4d4 0%, #ffffff 50%, #ffffff 90%, #d4d4d4 100%); cursor: pointer; box-shadow: 0px 2px 5px 0px #00000033; color: #262626; display: block; border-radius: 9999px; text-decoration: none; text-align: center; margin-top: 60px; }

div.wpsmrt-app-card .logout { position: absolute; background: #e44843; border-radius: 999px; height: 30px; width: 30px; display: flex ; align-items: center; justify-content: center; right: 25px; overflow: hidden; top: 22px;}
#wpsmrt-welcome-view .wpsmrt-actions.wpsmrt-message { padding:1rem 2rem 3rem; }
.wpsmrt-actions.wpsmrt-new-order { padding: 1rem 2rem 0; }
.wpsmrt-actions.wpsmrt-upcoming { padding: 1rem 2rem 0; }
div#wpsmrt-welcome-view{padding: 0;}
div.wpsmrt-app-card .logout a { line-height: 1; color: #ffffff; }

#wpsmrt-cleaning-view textarea { border-radius: 1.5rem; margin-bottom: 15px; }
.wpsmrt-actions.wpsmrt-upcoming { color: #252525; }
.wpsmrt-upcoming-events-flex { background: #fbfbfb; display: flex ; align-items: center; gap: 20px; justify-content: space-between; border-width: 1px; border-style: solid; border-radius: .625rem; padding: .625rem; border-color: #e5e7eb; margin-bottom: 10px;}
div#wpsmrt-welcome-view .wpsmrt-upcoming-events-flex h3{margin: 0;}
.wpsmrt-actions.wpsmrt-upcoming strong { font-size: 18px; }
button.wpsmrt_cancleAppoitment { background: linear-gradient(180deg, #861713, #e44843); border-color: #df2620; font-size: .875rem; line-height: 1; box-shadow: 0px 2px 5px 0px #00000033; max-width: 146px; padding: 8px 16px; border-radius: 9999px; margin: auto; display: block; }

div#wpsmrt-message-view textarea#message { border-radius: 1.5rem; border-color: #d4d4d4; resize: none;}

div#wpsmrt-message-view .select2-container .select2-selection--multiple { height: auto; border-radius: 6px; border: 1px solid #ccc; font-size: 16px; margin-bottom: 20px; } 
div#wpsmrt-message-view button.select2-selection__clear { color: #000000; }
div#wpsmrt-message-view ul#select2-wpsmrt_selectLYBrand-container { color: #333; line-height: 26px; margin:0;}
div#wpsmrt-message-view li.select2-selection__choice { margin: 6px 6px 0; border-radius: 100px; background: none;}
div#wpsmrt-message-view .select2-container { width: 100%; display: block; }
div#wpsmrt-message-view button.select2-selection__choice__remove { height: 100%; border: none; padding-left: 7px;}
div#wpsmrt-message-view li.select2-selection__choice span.select2-selection__choice__display { padding-left: 4px; padding-right: 11px; }

div.wpsmrt-app-card .form-actions button.wpsmrt-btn-back img, div.wpsmrt-app-card .form-actions button.wpsmrt-btn-back-editpage img, div.wpsmrt-app-card .form-actions button.wpsmrt-btn-back-paymentpage img, div.wpsmrt-app-card .form-actions button.wpsmrt-btn-back-addresspage img { height: 16px; object-fit: cover; }

div.wpsmrt-app-card .form-actions button.wpsmrt-btn-back, div.wpsmrt-app-card .form-actions button.wpsmrt-btn-back-editpage, div.wpsmrt-app-card .form-actions button.wpsmrt-btn-back-paymentpage, div.wpsmrt-app-card .form-actions button.wpsmrt-btn-back-addresspage { border-color: #d4d4d4; background-color: #e5e5e5; color: #404040; }

div#wpsmrt-schedule-success-page h3 { color: #5fa565; font-weight: 500; }
div#wpsmrt-schedule-success-page .success-wrapper { display: flex ; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 10px;}
div#wpsmrt-schedule-success-page .form-group { margin-bottom: 25px; }
div#wpsmrt-schedule-success-page svg{width: 52px; height: 52px;}
div#wpsmrt-schedule-success-page .form-actions { display: flex ; justify-content: center; }
div#wpsmrt-schedule-success-page .form-actions button{border-color: #d4d4d4; background-color: #e5e5e5; color: #404040;}
.wpsmrt-app-error { min-height: 22px; text-align: center; margin: 20px 10px 10px; color: red; font-size: 14px;}

div#wpsmrt-success-page h3 { color: #5fa565; font-weight: 500; }
div#wpsmrt-success-page .success-wrapper { display: flex ; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 10px;}
div#wpsmrt-success-page svg{width: 52px; height: 52px;}
div#wpsmrt-success-page { display: flex ; align-items: center; justify-content: center; }

.wpsmrt-app-wrapper .smrt-modal-overlay { position: fixed; top: 0; left: 50%; width: 100%; height: 100%; background: rgba(30, 30, 30, 0.5); display: none; justify-content: center; align-items: center; z-index: 9999; max-width: 460px; transform: translateX(-50%);} 
.wpsmrt-app-wrapper .smrt-modal-content { background: white; padding: 2rem 1.5rem; border-radius: 1.25rem; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); width: 100%; position: absolute; border-bottom-right-radius: 0; border-bottom-left-radius: 0; bottom: 0;} 
.wpsmrt-app-wrapper .smrt-modal-message { font-size: 1rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } 
.wpsmrt-app-wrapper .smrt-modal-icon { font-size: 1.2rem; } 
.wpsmrt-app-wrapper .smrt-btn { display: block; width: 100%; padding: 0.75rem; margin-top: 0.5rem; font-weight: 600; border: none; border-radius: 999px; font-size: 1rem; cursor: pointer; } 
.wpsmrt-app-wrapper .smrt-btn-red { background: linear-gradient(to bottom, #d32f2f, #b71c1c); color: white; } 
.wpsmrt-app-wrapper .smrt-btn-gray { background: linear-gradient(to bottom, #e0e0e0, #bdbdbd); color: #333; }

.wpsmrt-app-wrapper .wpsmrt-action-card p { margin-bottom: 0; }

.wpsmrt-app-wrapper .top-menu { position: absolute; right: 25px; top: 20px; }
.wpsmrt-app-wrapper .top-menu button#menuToggle { padding: 0; color: #000000; background: none; box-shadow: none;}
.wpsmrt-app-wrapper .top-menu button#menuToggle:hover{box-shadow: none;}
.wpsmrt-app-wrapper .menu-btn { background: transparent; border: none; font-size: 22px; cursor: pointer; }
.wpsmrt-app-wrapper .menu-dropdown { display: none; position: absolute; right: 0; top: 35px; background: #fff; border: 1px solid #ddd; border-radius: 8px; min-width: 210px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 999;     padding: 7px 0;}

.wpsmrt-app-wrapper .menu-dropdown a { display: block; padding: 3px 12px; text-decoration: none; color: #333; font-size: 15px; }
.wpsmrt-app-wrapper iframe#creditCardIframe { width: 100%; margin: 15px 0; height: 420px; border: none; margin-bottom: 10px;}

div#wpsmrt-paymentMethod-view .msg-wrapper { min-height: 300px; display: flex ; width: 100%; flex-direction: column; justify-content: center; align-items: center; }
div#wpsmrt-paymentMethod-edit .form-actions{margin-top: 0;}

.credit-card { width: 350px; height: 220px; border-radius: 15px; padding: 20px; color: white; font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #2c3e50, #8e44ad, #3498db); box-shadow: 0 6px 20px rgba(0,0,0,0.3); position: relative; }
.card-logo { position: absolute; top: 15px; right: 20px; width: 90px; } 
.card-logo img { width: 68px; } 
.card-number { font-size: 22px; letter-spacing: 3px; margin-top: 65px; } 
.card-expiry { font-size: 16px; margin-top: 20px; } 
.card-holder { font-size: 18px; margin-top: 15px; font-weight: 500; }
.wpsmrt-app-wrapper .menu-dropdown a:hover { background: #00000014; }

/* New Customer Modal */
div#SMRTnewCustomerModal p.smrt-modal-message { font-weight: 500; font-size: 24px; color: #000; }
div#SMRTnewCustomerModal label { text-align: left; color: #171717; display: block; margin-bottom: 5px;}
div#SMRTnewCustomerModal input { font-weight: 500; padding: 1rem; padding-right: 2.5rem; border-radius: 9999px; border: 1px solid #d4d4d4; font-size: 15px; color: #171717;}
div#SMRTnewCustomerModal .form-group { margin-bottom: 8px; }
div#SMRTnewCustomerModal #error-message { color: red; font-size: 14px; margin-bottom: 10px; text-align: center; min-height: 22px;}

div#wpsmrt-customerAddress-view .msg-wrapper { min-height: 300px; display: flex ; width: 100%; flex-direction: column; justify-content: center; align-items: center; }

div#wpsmrt-customerAddress-edit input { font-weight: 500; padding: 1rem; padding-right: 2.5rem; border-radius: 9999px; border: 1px solid #d4d4d4; font-size: 15px; color: #171717;}
div#wpsmrt-customerAddress-edit .form-group { margin-bottom: 8px; }
div#wpsmrt-customerAddress-edit .form-flex { display: flex ; flex-wrap: wrap; gap: 12px; }
div#wpsmrt-customerAddress-edit .form-flex .form-group { width: calc(50% - 6px); }


div#wpsmrt-customerAddress-view { display: flex ; flex-direction: column; justify-content: space-between; }
div#wpsmrt-customerAddress-view .address-wrapper-flex { display: flex ; flex-direction: column; gap: 20px; margin: 40px 22px; }
div#wpsmrt-customerAddress-view .address-card-wrapper { height: 205px; overflow: hidden; position: relative; border: 1px solid #9ca3af; border-radius: .5rem; display: flex ; flex-direction: column; }
div#wpsmrt-customerAddress-view .address-card { height: 205px; filter: brightness(0.75); background-size: cover; background-position: center; flex-basis: 40%; }
div#wpsmrt-customerAddress-view .address-card-content { position: absolute; width: 100%; background: #f9fafb; padding: 10px; left: 0; bottom: 0; }
div#wpsmrt-customerAddress-view .address-card-content p.title { color: #6b7280; }
div#wpsmrt-customerAddress-view .address-card-content p.address { color: #000000; margin-top: 10px;}
div#wpsmrt-customerAddress-view .address-card-content p {margin: 0; font-size: 18px; font-weight: 500;}
div#wpsmrt-customerAddress-view button.smrt-btn { font-size: 14px; }

div#wpsmrt-customerAddress-view-details, div#wpsmrt-customerAddress-noteview { display: flex ; flex-direction: column; justify-content: space-around; }
div#wpsmrt-customerAddress-view-details button.wpsmrt-btn-back-addresspage { width: 100%; }
div#wpsmrt-customerAddress-view-details .customerAddress-wrapper p {margin: 0;}
div#wpsmrt-customerAddress-view-details .customerAddress-wrapper { display: flex ; flex-direction: column; gap: 12px; }
div#wpsmrt-customerAddress-view-details .customerAddress-wrapper .flex-wrapper { display: flex ; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 15px;}

div#wpsmrt-customerAddress-view-details .edit-btn{ line-height: 1; padding-top: .5rem; padding-bottom: .5rem; padding-left: 1rem; padding-right: 1rem; color: #262626; background: linear-gradient(360deg, #d4d4d4, #00000000); border-color: #d4d4d4; font-weight: 500; border-width: 1px; border-radius: 9999px; font-size: .875rem; }

div#wpsmrt-customerAddress-noteview textarea#wpsmrt_addrNotes{ border-radius: 1.5rem; border-color: #d4d4d4; resize: none;}

@media(max-width: 767px){
  div.wpsmrt-app-card .form-actions{gap: 30px;}
}