.elementor-289 .elementor-element.elementor-element-d08bd7f:not(.elementor-motion-effects-element-type-background), .elementor-289 .elementor-element.elementor-element-d08bd7f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://washwale.com/wp-content/uploads/2025/08/woman-disinfects-a-car-door-handle-with-an-antibac-S8RHK3K.jpg");background-position:center center;background-size:cover;}.elementor-289 .elementor-element.elementor-element-d08bd7f > .elementor-background-overlay{background-color:var( --e-global-color-primary );opacity:0.93;mix-blend-mode:multiply;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-289 .elementor-element.elementor-element-d08bd7f > .elementor-container{max-width:1200px;min-height:30vh;}.elementor-289 .elementor-element.elementor-element-d08bd7f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-85px;margin-bottom:0px;padding:80px 0px 0px 0px;}.elementor-289 .elementor-element.elementor-element-b141e03 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-289 .elementor-element.elementor-element-690de81{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + -4px) 0px;text-align:center;}.elementor-289 .elementor-element.elementor-element-690de81 .elementor-heading-title{font-family:"Exo 2", Sans-serif;font-size:37px;font-weight:700;text-transform:none;font-style:normal;text-decoration:none;line-height:1.3em;letter-spacing:0px;color:#FFFFFF;}.elementor-289 .elementor-element.elementor-element-e5554e7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -15px;--e-icon-list-icon-size:15px;--icon-vertical-offset:0px;}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-icon{padding-inline-end:15px;}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-item > a{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-item:hover .elementor-icon-list-text{color:var( --e-global-color-accent );}.elementor-289 .elementor-element.elementor-element-18f14953{--display:flex;--padding-top:40px;--padding-bottom:40px;--padding-left:10px;--padding-right:10px;}.elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li:not(.is-active) a{background-color:var( --e-global-color-secondary );}.elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a:hover{background-color:var( --e-global-color-primary );}.elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a{background-color:var( --e-global-color-primary );}.elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row .input-text, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row select, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default .select2-selection--single, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default, .select2-results__option, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab__payment-methods input[type=text]{background-color:var( --e-global-color-secondary );}.elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .login .button, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register .button, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-ResetPassword .button, .elementor-289 .elementor-element.elementor-element-716e983 #add_payment_method #payment #place_order{background-color:var( --e-global-color-accent );}.elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .shop_table .button, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .order-again .button, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-pagination .button, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom).e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper .button{background-color:var( --e-global-color-accent );}.elementor-289 .elementor-element.elementor-element-716e983{--tabs-normal-color:var( --e-global-color-primary );--tabs-hover-color:#FFFFFF;--tabs-active-color:#FFFFFF;--sections-background-color:#FFFFFF;--sections-border-type:none;--sections-padding:0px 0px 0px 0px;--edit-link-margin-top:0px;--edit-link-margin-start:0px;--typography-section-titles-color:var( --e-global-color-primary );--general-text-color:var( --e-global-color-primary );--login-messages-color:var( --e-global-color-primary );--checkboxes-color:var( --e-global-color-primary );--payment-methods-radio-buttons-color:var( --e-global-color-primary );--links-normal-color:var( --e-global-color-accent );--links-hover-color:var( --e-global-color-primary );--forms-labels-color:var( --e-global-color-primary );--forms-fields-normal-color:var( --e-global-color-primary );--forms-buttons-normal-text-color:#FFFFFF;--tables-title-color:var( --e-global-color-primary );--tables-items-color:var( --e-global-color-primary );--variations-color:var( --e-global-color-primary );--tables-links-normal-color:var( --e-global-color-accent );--tables-button-normal-text-color:#FFFFFF;}.elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab__edit-address .woocommerce-Address address{padding-top:calc( 0px + 40px );}.elementor-289 .elementor-element.elementor-element-716e983 .woocommerce-pagination{padding-bottom:0px;}.elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) h2, .elementor-289 .elementor-element.elementor-element-716e983 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) h3{font-size:16px;font-weight:500;}.e-woo-select2-wrapper .select2-results__option{color:var( --e-global-color-primary );}.elementor-289 .elementor-element.elementor-element-716e983 .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var( --e-global-color-primary );}@media(max-width:1024px){.elementor-289 .elementor-element.elementor-element-d08bd7f > .elementor-container{min-height:28vh;}.elementor-289 .elementor-element.elementor-element-d08bd7f{padding:50px 30px 50px 30px;}.elementor-289 .elementor-element.elementor-element-690de81 .elementor-heading-title{font-size:45px;}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-item > a{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}}@media(max-width:767px){.elementor-289 .elementor-element.elementor-element-d08bd7f > .elementor-container{min-height:14vh;}.elementor-289 .elementor-element.elementor-element-d08bd7f{padding:120px 20px 10px 20px;}.elementor-289 .elementor-element.elementor-element-690de81 .elementor-heading-title{font-size:28px;}.elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-289 .elementor-element.elementor-element-e5554e7 .elementor-icon-list-item > a{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-289 .elementor-element.elementor-element-18f14953{--padding-top:25px;--padding-bottom:25px;--padding-left:15px;--padding-right:15px;}}/* Start custom CSS for html, class: .elementor-element-e80b6a6 *//* =========================================================
 * IMPORTANT & FORCEFUL WooCommerce Auth Tab Styles
 * ========================================================= */

/* 1. Target the container more specifically */
.wc-sec-wrapper .wc-sec-tabs {
  display: flex !important;
  gap: 10px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* 2. Style for the default (non-active) tab button */
.wc-sec-wrapper .wc-sec-tab {
  padding: 12px 22px !important;
  border-radius: 18px !important;
  background-color: #ffffff !important; /* White background */
  color: #000000 !important;             /* Black font */
  border: 1px solid #cccccc !important;  /* Grey border */
  flex: 1 !important;
  text-align: center !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* 3. Style for the active tab button */
.wc-sec-wrapper .wc-sec-tab.active {
  background-color: #0F7366 !important; /* New active background color */
  color: #ffffff !important;             /* White text */
  border-color: #0F7366 !important;       /* Match border to the background */
}

/* 4. Optional hover state */
.wc-sec-wrapper .wc-sec-tab:not(.active):hover {
    background-color: #f5f5f5 !important;
    border-color: #bbbbbb !important;
}




.wc-sec-input {
    
    padding: 9px 15px !important;
    border-radius: 14px !important;
}/* End custom CSS */
/* Start custom CSS for woocommerce-my-account, class: .elementor-element-716e983 *//* Hide all WooCommerce forward buttons */
.woocommerce-Button.wc-forward {
    display: none !important;
}
/* Hide WooCommerce My Account Downloads menu item */
.woocommerce-MyAccount-navigation-link--downloads {
    display: none !important;
}







/* === WooCommerce My Account Navigation Modern Styling === */
.woocommerce-MyAccount-navigation {
  margin-bottom: 25px !important;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important; /* space between menu items */
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0 !important;
}

/* Default (non-active) tab style */
.woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 12px 18px !important;
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #333 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

/* Hover state */
.woocommerce-MyAccount-navigation ul li a:hover {
  border-color: #0F7265 !important;
  color: #0F7265 !important;
}

/* Active tab style */
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: #0F7265 !important;
  color: #fff !important;
  border-color: #0F7265 !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08) !important;
}

/* Responsive (stack vertically on small screens) */
@media (max-width: 768px) {
  .woocommerce-MyAccount-navigation ul {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .woocommerce-MyAccount-navigation ul li a {
    width: 100% !important;
    text-align: center !important;
  }
}








/* === WooCommerce My Account Content (My Bookings / Orders Table) === */
.woocommerce-MyAccount-content {
  padding-left: 25px !important; /* space from left menu */
}

/* Section heading with divider */
.woocommerce-MyAccount-content h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #000 !important;
  margin-bottom: 15px !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid #e0e0e0 !important;
}

/* Table styling */
.woocommerce-MyAccount-content .shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 20px !important;
  font-size: 15px !important;
}

/* Header row (green bar) */
.woocommerce-MyAccount-content .shop_table thead th {
  font-weight: 600 !important;
  color: #fff !important;
  text-align: left !important;
  padding: 12px 10px !important;
  background: #0F7265 !important;
}

/* Data rows (white with light grey border) */
.woocommerce-MyAccount-content .shop_table tbody td {
  padding: 12px 10px !important;
  border: 1px solid #e0e0e0 !important;
  color: #333 !important;
  background: #fff !important;
}

/* Links inside table */
.woocommerce-MyAccount-content .shop_table tbody td a {
  color: #0F7265 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.woocommerce-MyAccount-content .shop_table tbody td a:hover {
  text-decoration: underline !important;
}

/* Status / Provider text */
.woocommerce-MyAccount-content .shop_table tbody td:nth-child(4),
.woocommerce-MyAccount-content .shop_table tbody td:nth-child(5) {
  font-weight: 500 !important;
  color: #666 !important;
}

/* Responsive view */
@media (max-width: 768px) {
  .woocommerce-MyAccount-content {
    padding-left: 0 !important; /* remove extra space on mobile */
  }

  .woocommerce-MyAccount-content .shop_table thead {
    display: none !important;
  }
  .woocommerce-MyAccount-content .shop_table tr {
    display: block !important;
    margin-bottom: 15px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 10px !important;
    background: #fff !important;
  }
  .woocommerce-MyAccount-content .shop_table td {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border: none !important;
  }
  .woocommerce-MyAccount-content .shop_table td:before {
    content: attr(data-title) !important;
    font-weight: 600 !important;
    color: #000 !important;
  }
}





























/* ===========================
   MY ACCOUNT → ORDERS TABLE STYLING
   =========================== */

/* Table Wrapper */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.75rem;
}

/* Table Row as Card */
.woocommerce-orders-table__row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  transition: all 0.25s ease;
}
.woocommerce-orders-table__row:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

/* Remove default borders */
.woocommerce-orders-table th,
.woocommerce-orders-table td {
  border: none !important;
}

/* Table Header */
.woocommerce-orders-table thead th {
  background: #0f766e; /* Accent color */
  color: #ffffff; /* White header text */
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 8px 8px 0 0;
}

/* Table Cell */
.woocommerce-orders-table__cell {
  padding: 1rem 1.2rem !important;
  font-size: 0.9rem;
  color: #111827;
  vertical-align: middle;
}

/* Order number link */
.woocommerce-orders-table__cell-order-number a {
  color: #0f766e !important;
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-orders-table__cell-order-number a:hover {
  text-decoration: underline;
}

/* Order Date */
.woocommerce-orders-table__cell-order-date time {
  color: #374151;
  font-size: 0.85rem;
}

/* Status Label */
.woocommerce-orders-table__cell-order-status {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.woocommerce-orders-table__cell-order-status::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  background-color: #e5e7eb;
}

/* Status Colors */
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
  color: #15803d;
}
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before {
  background-color: #bbf7d0;
}
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
  color: #b45309;
}
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before {
  background-color: #fde68a;
}
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status {
  color: #b91c1c;
}
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before {
  background-color: #fecaca;
}

/* Total */
.woocommerce-orders-table__cell-order-total {
  font-weight: 600;
  color: #111827;
}
.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
  font-size: 0.95rem;
  color: #111827;
}

/* Buttons */
.woocommerce-orders-table__cell-order-actions .button {
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.woocommerce-orders-table__cell-order-actions .button.view {
  background: #0f766e !important;
  color: #ffffff !important;
}
.woocommerce-orders-table__cell-order-actions .button.view:hover {
  background: #115e59 !important;
  transform: scale(1.03);
}

/* Table Spacing Reset */
.woocommerce-MyAccount-content-wrapper {
  padding-top: 1rem;
}

/* Responsive Styling */
@media (max-width: 767px) {
  .woocommerce-orders-table__row {
    border-radius: 10px;
  }
  .woocommerce-orders-table__cell {
    padding: 0.9rem !important;
  }
  .woocommerce-orders-table thead {
    display: none;
  }
  .woocommerce-orders-table tbody tr {
    display: block;
    margin-bottom: 0.9rem;
  }
  .woocommerce-orders-table__cell {
    display: flex;
    justify-content: space-between;
    text-align: right;
    border-bottom: 1px dashed #e5e7eb;
  }
  .woocommerce-orders-table__cell::before {
    content: attr(data-title);
    font-weight: 600;
    color: #6b7280;
    text-transform: capitalize;
  }
  .woocommerce-orders-table__cell-order-actions {
    border: none;
    justify-content: flex-end;
  }
}





.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .shop_table thead tr th, .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .shop_table thead tr th span {
    color: #ffffff!important;
}



.woocommerce-orders-table__row {
    
    border: 2px solid #e5e7e9 !important;
   
}
 
 
 
 
 
 
 
 
 
 
 
 /* ==================================
   MODERN BOOKING CARDS - V2
   ================================== */

/* * --- ROOT VARIABLES --- 
 * We define our colors here for consistency.
 */
:root {
    --brand-primary: #0f766e;
    --brand-primary-hover: #0d6760;
    --brand-primary-light: #f0f9f8;
    --text-dark: #111827;
    --text-medium: #374151;
    --text-light: #6b7280;
    --border-light: #e5e7eb;
    --border-dashed: #d1d5db;
    --bg-light: #f9fafb;
    --bg-white: #ffffff;
    --danger-dark: #b91c1c;
    --danger-light: #fef2f2;
    --danger-border: #fecaca;
    --info-dark: #1d4ed8;
    --info-light: #eff6ff;
    --info-border: #bfdbfe;
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
    --shadow-btn: 0 4px 10px rgba(15, 118, 110, 0.2);
    --shadow-btn-hover: 0 6px 14px rgba(15, 118, 110, 0.3);
}

/* Hide old title */
.woocommerce-MyAccount-content-wrapper .cbf-my-bookings-title {
    display: none !important;
}

/* Light padding on account content */
.woocommerce-MyAccount-content-wrapper {
    padding-top: 1rem;
    /* Use a light bg for the whole area to make cards pop */
    background-color: var(--bg-light); 
}

/* Bookings list wrapper */
.cbf-bookings-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Increased gap */
}

/* * --- SINGLE BOOKING CARD ---
 * Upgraded with softer shadow, more padding, and hover effect.
 */
.cbf-booking-card {
    border-radius: 16px; /* Softer, modern radius */
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    padding: 1.5rem; /* More spacious padding */
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cbf-booking-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* Generic row structure */
.cbf-booking-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* * --- ROW 1: TOP (Info) ---
 * Bolder ID, clearer separation.
 */
.cbf-booking-card-row-top {
    border-bottom: 1px solid var(--border-light); /* Solid, not dashed */
    padding-bottom: 0.75rem;
}

.cbf-booking-top-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cbf-booking-id {
    font-weight: 700; /* Bolder */
    font-size: 1.1rem; /* Bigger */
    color: var(--brand-primary);
    line-height: 1;
}

.cbf-booking-order {
    font-size: 0.85rem;
    color: var(--text-light);
}

.cbf-booking-order a {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
}
.cbf-booking-order a:hover {
    text-decoration: underline;
}

.cbf-booking-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    text-align: right;
}

.cbf-booking-datetime {
    font-size: 0.9rem;
    color: var(--text-medium);
    font-weight: 500;
}

.cbf-booking-total {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* * --- ROW 2: MIDDLE (Service) ---
 */
.cbf-booking-card-row-middle {
    align-items: flex-start;
    padding: 0.5rem 0;
}

.cbf-booking-service-vehicle {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cbf-booking-service {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.cbf-booking-vehicle {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Status pill styling (from your original CSS) */
.cbf-booking-status-wrapper {
    display: flex;
    align-items: center;
}
.cbf-booking-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.cbf-booking-status.cancelled {
    background: var(--danger-light);
    color: var(--danger-dark);
}
.cbf-booking-status.past {
    background: #e5e7eb;
    color: #4b5563;
}

/* * --- ROW 3: BOTTOM (Actions) ---
 * Cleaner separation
 */
.cbf-booking-card-row-bottom {
    border-top: 1px dashed var(--border-dashed); /* Dashed is ok here for separation */
    padding-top: 1rem;
    align-items: flex-start;
}

/* Action form layout */
.cbf-booking-form-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cbf-booking-action-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.cbf-booking-field {
    min-width: 160px;
    flex: 1;
}

.cbf-booking-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-medium);
    margin-bottom: 0.25rem;
    display: inline-block;
}

/* * --- THE INPUT FIX (Date & Time) ---
 * This uses high-specificity .elementor-289 .elementor-element.elementor-element-716e983s to override theme styles.
 * We remove the default browser/theme appearance and add our own.
 */

/* 1. Reset container */
.woocommerce-MyAccount-content .cbf-booking-field input[type="date"],
.woocommerce-MyAccount-content .cbf-booking-field select {
    /* --- Reset --- */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* --- Box Model --- */
    width: 100%;
    margin-top: 0.15rem;
    padding: 0.6rem 0.8rem;
    padding-right: 2.5rem; /* Make space for icon */
    border-radius: 10px;
    border: 1px solid #d1d5db;
    
    /* --- Typography --- */
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    
    /* --- Background & Icons --- */
    background-color: var(--bg-white);
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 1rem;
    
    /* --- Interaction --- */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 2. Add custom SELECT (dropdown) arrow icon */
.woocommerce-MyAccount-content .cbf-booking-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06 0L10 10.94l3.71-3.73a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 010-1.06z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* 3. Add custom DATE (calendar) icon */
.woocommerce-MyAccount-content .cbf-booking-field input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5v7A1.25 1.25 0 004.75 16h10.5A1.25 1.25 0 0016.5 14.75v-7h-12z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* 4. Hide the default calendar picker icon in Webkit */
.woocommerce-MyAccount-content .cbf-booking-field input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    opacity: 0;
    width: 0;
}

/* 5. Strong Focus State (using !important to fight theme) */
.woocommerce-MyAccount-content .cbf-booking-field input[type="date"]:focus,
.woocommerce-MyAccount-content .cbf-booking-field select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px var(--brand-primary-light) !important;
    outline: none !important;
}

/* * --- ACTION BUTTONS ---
 * Clearer hierarchy: Primary button is solid and raised.
 * Secondary/Destructive buttons are "ghost" style.
 */
.cbf-booking-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Base button styles */
.cbf-btn-primary,
.cbf-btn-danger,
.cbf-btn-map {
    border-radius: 999px; /* Pill shape */
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

/* Primary – Update */
.cbf-btn-primary {
    background: var(--brand-primary) !important;
    color: var(--bg-white) !important;
    border: 1px solid var(--brand-primary) !important;
    box-shadow: var(--shadow-btn) !important;
}
.cbf-btn-primary:hover {
    background: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    box-shadow: var(--shadow-btn-hover) !important;
    transform: translateY(-2px);
}

/* Danger – Cancel */
.cbf-btn-danger {
    background: var(--danger-light) !important;
    color: var(--danger-dark) !important;
    border: 1px solid var(--danger-border) !important;
    box-shadow: none !important;
}
.cbf-btn-danger:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

/* Map button (optional) */
.cbf-btn-map {
    background: var(--info-light) !important;
    color: var(--info-dark) !important;
    border: 1px solid var(--info-border) !important;
    box-shadow: none !important;
}
.cbf-btn-map:hover {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
}


/* ===========================
   RESPONSIVE – MOBILE
   =========================== */
@media (max-width: 767px) {
    .cbf-booking-card {
        padding: 1rem; /* Tighter padding on mobile */
        border-radius: 12px;
    }

    .cbf-booking-card-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Stack top-right info under top-left */
    .cbf-booking-card-row-top {
        width: 100%;
        gap: 0.75rem;
    }
    .cbf-booking-top-right {
        align-items: flex-start;
        text-align: left;
    }

    /* Stack form fields */
    .cbf-booking-action-fields {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    /* * --- Mobile Button Grid ---
     * This creates a much cleaner, tap-friendly layout.
     * The Primary "Update" button is full-width.
     * Cancel and Map share the next row.
     */
    .cbf-booking-action-buttons {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two-column grid */
        gap: 0.5rem;
    }

    .cbf-booking-action-buttons .cbf-btn-primary {
        grid-column: 1 / -1; /* Make Update span full width */
    }

    /* All buttons get full width in the grid cell */
    .cbf-booking-action-buttons .cbf-btn-primary,
    .cbf-booking-action-buttons .cbf-btn-danger,
    .cbf-booking-action-buttons .cbf-btn-map {
        width: 100%;
        flex: 1; 
    }
}





















/* --- Wrapper --- */
/* This assumes the page still has a light background */
.woocommerce-MyAccount-content-wrapper {
    background-color: var(--bg-light); 
    padding-top: 1rem;
}

/* --- Top Status Message (No Box) --- */
.woocommerce-MyAccount-content p:first-of-type {
    font-size: 1rem;
    color: var(--text-medium);
    padding: 0.5rem 0.25rem;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.woocommerce-MyAccount-content p:first-of-type mark {
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    margin: 0 0.1rem;
}

/* --- Mark Colors --- */
mark.order-number,
mark.order-date {
    background-color: var(--status-green-light) !important;
    color: var(--status-green) !important;
}

/* * NOTE: CSS cannot read the text "Completed". 
 * It can only style the ".order-status" class.
 * I've set it to green as requested.
 * If your theme adds classes for other statuses (e.g., <mark class="order-status processing">)
 * you can use the styles below.
*/
mark.order-status {
    background-color: var(--status-green-light) !important;
    color: var(--status-green) !important;
}

/* mark.order-status.processing {
    background-color: var(--status-blue-light) !important;
    color: var(--status-blue) !important;
}
mark.order-status.on-hold {
    background-color: var(--status-yellow-light) !important;
    color: var(--status-yellow) !important;
}
*/

/* --- Section Cards --- */
/* We keep the card style for the main sections */
.woocommerce-order-details,
.woocommerce-customer-details {
    margin-top: 1.25rem;
    border-radius: 16px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

/* --- Order Table Styling --- */
.woocommerce-table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    font-size: 0.9rem;
}

.woocommerce-table.shop_table th,
.woocommerce-table.shop_table td {
    padding: 1rem;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-medium);
}

.woocommerce-table.shop_table thead th {
    background: var(--bg-light);
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-light);
}

.woocommerce-table.shop_table tbody .product-name {
    color: var(--text-dark);
    font-weight: 600;
}

.woocommerce-table.shop_table tbody .product-name a {
    color: var(--brand-primary);
    text-decoration: none;
}
.woocommerce-table.shop_table tbody .product-name a:hover {
    text-decoration: underline;
}

.woocommerce-table.shop_table tbody .product-total {
    font-weight: 600;
    color: var(--text-dark);
    text-align: right; /* Right-align total in body */
}

/* --- Table Footer (Right-Aligned) --- */
.woocommerce-table.shop_table tfoot th {
    text-align: right;
    font-weight: 600;
    color: var(--text-medium);
    border-bottom: none;
    padding-right: 1rem;
}

.woocommerce-table.shop_table tfoot td {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    border-bottom: none;
    text-align: right;
}

/* --- Hide "Order Again" Button --- */
.order-again {
    display: none !important;
}

/* --- Billing Address (Simple Text) --- */
.woocommerce-customer-details address {
    font-style: normal;
    line-height: 1.6;
    color: var(--text-medium);
    /* Remove all box styling */
    border: none;
    border-radius: 0;
    padding: 0;
    background: none;
    height: auto !important; /* Override inline style */
}

.woocommerce-customer-details address p {
    margin: 0;
    padding: 0;
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
    margin-top: 0.5rem !important;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
}

/* --- Responsive for Order Details Table --- */
@media (max-width: 767px) {
    .woocommerce-order-details,
    .woocommerce-customer-details {
        padding: 1rem;
    }

    .woocommerce-table.shop_table thead {
        display: none; /* Hide table head on mobile */
    }

    .woocommerce-table.shop_table tbody tr,
    .woocommerce-table.shop_table tbody td {
        display: block;
        width: 100%;
        text-align: left !important; /* Force left align for stacking */
    }

    .woocommerce-table.shop_table tbody tr {
        border-bottom: 2px solid var(--border-light);
        padding: 0.5rem 0;
    }
    .woocommerce-table.shop_table tbody tr:last-child {
        border-bottom: none;
    }

    .woocommerce-table.shop_table tbody td {
        border: none;
        padding: 0.25rem 0;
    }

    .woocommerce-table.shop_table tbody .product-name {
        font-size: 1rem;
    }

    .woocommerce-table.shop_table tbody .product-total {
        font-size: 0.9rem;
    }
    .woocommerce-table.shop_table tbody .product-total::before {
        content: "Total: ";
        font-weight: 400;
        color: var(--text-light);
    }
    
    /* Stack footer totals on mobile */
    .woocommerce-table.shop_table tfoot tr,
    .woocommerce-table.shop_table tfoot th,
    .woocommerce-table.shop_table tfoot td {
        display: flex; /* Use flex for key-value pair */
        justify-content: space-between; /* Space them out */
        width: 100%;
        text-align: left !important; /* Override right-align */
        padding: 0.3rem 0;
    }

    .woocommerce-table.shop_table tfoot th {
       padding: 0;
    }
    .woocommerce-table.shop_table tfoot td {
        padding: 0;
        text-align: right !important; /* Keep value right-aligned */
    }
}/* End custom CSS */