/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 /* below is for devise views */
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* Base styles */
body {

  font-size: 0.9rem;
  line-height: 1.5;
  font-family: 'Poppins', sans-serif;

}

@media (max-width: 768px) {
  .lead {
    margin-bottom: 1rem;      /* Reduced from Bootstrap's default */
    line-height: 1.5;         /* Tighter line height for mobile */
    font-size: 1.1rem;        /* Slightly smaller font size for mobile */
  }
}


/* Typography */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.25px;
  line-height: 1.2;
  margin-bottom: 0px;
}

h1 { font-size: 1.75rem;   font-weight: 600;  letter-spacing: -1px;}  /* 24.5px */
h2 { font-size: 1.5rem; font-weight: 600}   /* 21px */
h3 { font-size: 1.25rem;font-weight: 600;}  /* 17.5px */
h4 { font-size: 1.125rem; font-weight: 600;} /* 15.75px */
h5 { font-size: 1rem;font-weight: 400; }     /* 14px */
h6 { font-size: 0.875rem;font-weight: 400; } /* 12.25px */

:root {
  --bg-original: #8b2ee2;
  --bs-primary:#A96AFF; /* #8A2BE2;*/
  --bs-secondary: #20B2AA;
  --purple-accent: #9370DB;
  --teal-accent: #40E0D0;
}

/* Dark theme (default) */
[data-bs-theme="dark"] {
  --bs-body-bg: #0A0E14;
  --bs-body-color: #E0E0E0;
  --bs-dark: #12161D;
  --bs-light: #1E2530;
  --bs-border-color: #2A303C;
  --card-bg: #13171E;
  --list-bg: #161B23;
  --hover-bg: #1C2330;
  --card-header-bg: #1A1F28;
  --heading-color: #FFFFFF;  /* White for dark theme headings */
  --form-border-color: #2A303C;  /* New variable for form borders */
  --soft-text-color: #D0D0D0; 
}

[data-bs-theme="light"] {
  --bs-primary: #6200EE;      /* Adjusted purple */
  --bs-secondary: #03DAC6;    /* Adjusted teal */
  --bs-body-bg: #FAFAFA;      /* Lighter background */
  --bs-body-color: #424242;   /* Lighter text color */
  --bs-dark: #E0E0E0;
  --bs-light: #FFFFFF;
  --bs-border-color: #E0E0E0;
  --card-bg: #FFFFFF;
  --list-bg: #F8F9FA;  
    --hover-bg: #EEEEEE;
  --card-header-bg: #F5F5F5;
  --purple-accent: #BB86FC;   /* Lighter purple accent */
  --teal-accent: #00B8A9;     /* Adjusted teal accent */
  --heading-color: #424242;   /* Darker color for headings */
  --form-border-color: #E0E0E0;  /* New variable for form borders */
  --soft-text-color: #5A5A5A;  /* New softer text color for light theme */
 
}

/* Common styles */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: background-color 0.3s, color 0.3s;
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color) !important;
  transition: color 0.3s;
}

.card .table > :not(caption) > * > * {
  background-color: var(--list-bg); /* Ensures cells have the background color */
}




/* Color utility classes */
.bg-original { background-color: var(--bg-original) !important;}
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-dark { background-color: var(--bs-dark) !important; }
.bg-light { background-color: var(--bs-light) !important; }
.bg-list { background-color: var(--list-bg) !important;}

.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-dark { color: var(--bs-dark) !important; }
.text-light { color: var(--bs-body-color) !important; }
.text-accent { color: #eef4e1;}
.text-soft {
  color: var(--soft-text-color) !important;
}


.border-secondary { border-color: var(--bs-secondary) !important;}
.border-dark {   border-color: var(--bs-border-color) !important;}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: rgb(118, 23, 206);
  border-color: rgb(118, 23, 206);
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: #358585;
  border-color: #358585;
}

.navbar-dark {
  background-color: var(--bs-dark);
}

/* Remove card borders */
.card, .modal-content {
  background-color: var(--card-bg);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.card-header {
  background-color:  var(--card-bg);/*var(--card-header-bg);*/
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.card-footer {
  background-color: var(--card-bg);
  border-top: 1px solid var(--bs-border-color);
}


.form-control, .form-select {
  background-color: var(--card-bg);
  border-color: var(--form-border-color);
  color: var(--bs-body-color);
}

.form-control:focus, .form-select:focus {
  background-color: var(--hover-bg);
  border-color: var(--bs-primary);
  color: var(--bs-body-color);
}

.dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--bs-border-color);
}

.dropdown-item {
  color: var(--bs-body-color);
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--hover-bg);
  color: var(--bs-primary);
}

.table {
  color: var(--bs-body-color);
}

.table-dark {
  --bs-table-bg: var(--bs-dark);
  --bs-table-border-color: var(--bs-border-color);
}

/* List styles */
.list-group {
  background-color: transparent;
}

.list-group-item {
  background-color: var(--list-bg);
  color: var(--bs-body-color);
  border: none;
  border-bottom: 1px solid var(--bs-border-color);
}

.list-group-item:last-child {
  border-bottom: none;
}

.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: var(--hover-bg);
}

.list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Nav pills */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--bs-primary);
  color: var(--bs-body-bg);
}

.nav-pills .nav-link {
  color: var(--bs-body-color);
}

.nav-pills .nav-link:hover {
  background-color: var(--hover-bg);
}

/* Tabs styles */
.nav-tabs {
  border-color: var(--bs-border-color);
}

.nav-tabs .nav-link {
  color: var(--bs-body-color);
  background-color: transparent;
}

.nav-tabs .nav-link:hover {
  border-color: var(--bs-border-color);
  color: var(--bs-primary);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-primary);
  border-color: var(--bs-border-color);
}

.tab-content {
  background-color: var(--card-bg);
  border-color: var(--bs-border-color);
  border-right:1px solid var(--bs-border-color); 
  border-left: 1px solid var(--bs-border-color);
  border-bottom:1px solid var(--bs-border-color);
}

.progress {
  background-color: var(--bs-dark);
}

.progress-bar {
  --bs-progress-bar-bg: var(--bs-secondary);
}

/* Pagination (Kaminari overrides) */
.pagination {
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-bg: var(--card-bg);
  --bs-pagination-border-color: var(--bs-border-color);
  
  --bs-pagination-hover-color: var(--bs-primary);
  --bs-pagination-hover-bg: var(--hover-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  
  --bs-pagination-focus-color: var(--bs-primary);
  --bs-pagination-focus-bg: var(--hover-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.25);
  
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  
  --bs-pagination-disabled-color: var(--bs-light);
  --bs-pagination-disabled-bg: var(--bs-dark);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
}

.page-link {
  background-color: var(--bs-pagination-bg);
  border-color: var(--bs-pagination-border-color);
  color: var(--bs-pagination-color);
}

.page-link:hover {
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
  color: var(--bs-pagination-hover-color);
}

.page-item.active .page-link {
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
  color: var(--bs-pagination-active-color);
}

.page-item.disabled .page-link {
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
  color: var(--bs-pagination-disabled-color);
}


a {
  color: var(--bs-secondary);
  text-decoration: none;
}

a:hover, a:focus {
  color: #4db8b8;  /* A slightly lighter shade of the secondary color for hover/focus */
  text-decoration: underline;
}

/* If you want to keep purple for visited links, uncomment the following:
a:visited {
  color: var(--bs-primary);
}
*/

/* Ensure links inside buttons don't change color */
.btn a {
  color: inherit;
}

.btn a:hover, .btn a:focus {
  text-decoration: none;
}

.nav-tabs .nav-link {
  color: var(--bs-secondary);
  background-color: transparent;
  border: 1px solid transparent;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #4db8b8;  /* Lighter shade of secondary color for hover/focus */
  border-color: var(--bs-border-color) var(--bs-border-color) transparent;
  isolation: isolate;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-heading-color);;  /* Keep the active tab purple */
  background-color: var(--card-bg);
  border-color: var(--bs-border-color) var(--bs-border-color) transparent;
}

/* Outline button styles */

/* Primary outline button */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary) !important;
  --bs-btn-bg: transparent !important;
  --bs-btn-border-color: var(--bs-primary) !important;
  --bs-btn-hover-color: var(--bs-body-bg) !important;
  --bs-btn-hover-bg: var(--bs-primary) !important;
  --bs-btn-hover-border-color: var(--bs-primary) !important;
  --bs-btn-focus-shadow-rgb: 138, 43, 226 !important; /* Approximation of primary color */
  --bs-btn-active-color: var(--bs-body-bg) !important;
  --bs-btn-active-bg: var(--bs-primary) !important;
  --bs-btn-active-border-color: var(--bs-primary) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
  --bs-btn-disabled-color: var(--bs-primary) !important;
  --bs-btn-disabled-bg: transparent !important;
  --bs-btn-disabled-border-color: var(--bs-primary) !important;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary) !important;
  --bs-btn-bg: transparent !important;
  --bs-btn-border-color: var(--bs-secondary) !important;
  --bs-btn-hover-color: var(--bs-body-bg) !important;
  --bs-btn-hover-bg: var(--bs-secondary) !important;
  --bs-btn-hover-border-color: var(--bs-secondary) !important;
  --bs-btn-focus-shadow-rgb: 64, 160, 160 !important; /* Approximation of secondary color */
  --bs-btn-active-color: var(--bs-body-bg) !important;
  --bs-btn-active-bg: var(--bs-secondary) !important;
  --bs-btn-active-border-color: var(--bs-secondary) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
  --bs-btn-disabled-color: var(--bs-secondary) !important;
  --bs-btn-disabled-bg: transparent !important;
  --bs-btn-disabled-border-color: var(--bs-secondary) !important;
}


.bg-card {
  background-color: var(--card-bg) !important;
}


.logo {
  font-size: 20px;
  color: #ffffff;
  text-decoration: none;
  padding-right: 30px;
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  letter-spacing: -1px;
}

.badge {
  text-transform: uppercase !important;
}

.job-status {
  font-size: 0.8rem;
  text-transform: uppercase;
}


.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}


.border-primary {
  border-color: var(--bs-primary) !important;
}

.border-secondary {
  border-color: var(--bs-secondary) !important;
}

.text-opaque {
  opacity: 0.8;
}

.card-title {
  font-weight: 600 !important;
}

.input-group-text {
  background: var(--bs-secondary) !important;
}

.form-select:disabled {
  background-color: var(--bs-light) !important;
}

.splash p {
  font-size: 1rem;
}


.full-width-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 calc((100vw - 1200px) / 2); /* Creates auto margins based on your max-width */
}




.phone-screenshot {
  position: relative;
  width: 300px;
  margin: 0 auto;
  border: 10px solid black;
  border-radius: 30px;
  box-shadow: 
      0 0 0 2px #adb385 ,  /* Thin white shell on the outside */
      0 4px 20px rgba(0,0,0,0.15);
  overflow: hidden;
  background-color: #000;
  aspect-ratio: 9 / 19.5;
}
.phone-screenshot::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 12px;
  left: 30px;
  transform: translateX(-50%);
  background-color: #000;
  border-radius: 50%;
  z-index: 3;
}
.phone-screenshot img {
  width: 280px;
  height: 630px;
  display: block;
  object-fit: cover;
  border-radius: 30px;
}


.dark-accent {
background-color: #17191c
}

.hero {
background-image: 
linear-gradient(rgba(138, 44, 226, 0.99),rgba(138, 44, 226, 0.99),rgba(138, 44, 226, 0.95), rgba(138, 44, 226, 0.7)),
url(/images/compressed/roadsmelb.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size:cover;
}

        .section-title {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 40px;
        }
        .card {
            border: none;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .icon-feature {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }


      .business-card {
        border: none;
        border-radius: 16px;
        overflow: visible;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    

    .card-icon-wrapper {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background:rgb(0,0,0,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px auto 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        position: relative; /* Add this to ensure the icon stays on top */
    }

    .card-icon-wrapper-left {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgb(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0 20px; /* Changed from margin: 10px auto 20px */
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      position: relative;
  }

    .icon-gradient {
        font-size: 2.5rem;
        color: var(--bs-secondary);
    }
    .notification-container {
      width: 350px;
    }
    
    .toast {
      width: 100%;
    }
    
    @media (max-width: 576px) {
      .notification-container {
        width: 100%;
        right: 0;
        left: 0;
        padding: 0 !important;
      }
    
      .toast {
        border-radius: 0 !important;
      }
    }
    
    
/* landing page */
.curved-road {
  position: absolute;
  bottom: 0;
  left: -30%;
  width: 150%;
  height: 160%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.1)
  );
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  transform: translateY(-10%);
}

@media screen and (max-width: 768px) {
  .curved-road {
    height: 100%; /* Half of the original 200% */
  }
}



@media (min-width: 768px) {
  .py-md-large {
    padding-top: 7rem !important;    /* Increased from py-5's 3rem */
    padding-bottom: 7rem !important;
  }
}


    .payment-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }
    
    .payment-icon {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
      margin: 0;
      padding: 0;
    }
    
    .payment-content {
      flex: 1;
      margin: 0;
      padding: 0;
    }
    

.timeline-marker {
  width: 32px;
  height: 32px;
  background: var(--bs-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  flex-shrink: 0;
}

.timeline-item {
  position: relative;
}

.timeline-item:not(:last-child):after {
  content: '';
  position: absolute;
  left: 16px;
  top: 32px;
  bottom: -16px;
  width: 2px;
  background: var(--bs-primary);
  opacity: 0.3;
}