/**
 * Quote Generator Custom Styles
 * Apple-inspired design elements with custom accent color
 */

/* Base Styles */
:root {
  --accent-color: #ff5000;
  --accent-hover: #e64600;
  --accent-light: rgba(255, 80, 0, 0.1);
  --accent-border: rgba(255, 80, 0, 0.2);
}

@import url( 'https://fonts.cdnfonts.com/css/redaction');
.mk_quote-ss-has-extension{
    font-size:12px !important;
}
@font-face {
    font-family: 'amh-x';
    src: url('fonts/EthioHahuKibQechin-Regular.eot');
    src: local('fonts/Ethio Hahu Kib Qechin Regular'), local('EthioHahuKibQechin-Regular'), url('fonts/EthioHahuKibQechin-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/EthioHahuKibQechin-Regular.woff2') format('woff2'), url('fonts/EthioHahuKibQechin-Regular.woff') format('woff'), url('fonts/EthioHahuKibQechin-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mika-head';
    src: url('fonts/Mikahead-Book.eot');
    src: url('fonts/Mikahead-Book.eot?#iefix') format('embedded-opentype'), url('fonts/Mikahead-Book.woff2') format('woff2'), url('fonts/Mikahead-Book.woff') format('woff'), url('fonts/Mikahead-Book.ttf') format('truetype'), url('fonts/Mikahead-Book.svg#Mikahead-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'mika-body';
    src: url('fonts/CMGeom-Regular.eot');
    src: url('fonts/CMGeom-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/CMGeom-Regular.woff2') format('woff2'), url('fonts/CMGeom-Regular.woff') format('woff'), url('fonts/CMGeom-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-display: swap;
}


/* Custom Theme: Orange Primary with Accordion Customization */

/* ------------------------------------------------------------
   1. Variable Overrides (Recommended)
   ------------------------------------------------------------ */

:root {
  --bs-primary: #ff5001;       /* Main Primary Color (Orange) */
  --bs-secondary: #6c757d;    /* Keep the default secondary */
  --bs-success: #198754;      /* Keep the default success */
  --bs-danger: #dc3545;       /* Keep the default danger */
  --bs-warning: #ffc107;      /* Keep the default warning */
  --bs-info: #0dcaf0;        /* Keep the default info */
  --bs-light: #f8f9fa;       /* Keep the default light */
  --bs-dark: #212529;        /* Keep the default dark */

  /* Additional colors for more sophisticated usage */
  --bs-primary-rgb: 255, 80, 1;
  --bs-primary-dark: #cc4001; /* Darker shade of primary */
  --bs-primary-light: #ff8034; /* Lighter shade of primary */
  --bs-primary-contrast: #fff; /* Text color for use on primary backgrounds*/

  /* Accordion Variables (Customize here) */
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-body-bg);
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-width: 1px;
    --bs-accordion-border-radius: 0.375rem;
    --bs-accordion-inner-border-radius: calc(var(--bs-accordion-border-radius) - var(--bs-accordion-border-width));
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-focus-border-color: #86b7fe;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-icon-width: 1.25rem;
    --bs-accordion-icon-color: var(--bs-body-color);
    --bs-accordion-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-icon-active-color: var(--bs-primary);
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-active-color: var(--bs-primary-contrast);
    --bs-accordion-active-bg: #E6A532;
    --bs-accordion-active-color: #ff5001;

}

/* ------------------------------------------------------------
   2. Customization (Optional)
   ------------------------------------------------------------ */

/* Example: Custom Buttons */
.btn-primary {
  --bs-btn-color: var(--bs-primary-contrast);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-dark);
  --bs-btn-hover-border-color: var(--bs-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-bg: var(--bs-primary-dark);
  --bs-btn-active-border-color: var(--bs-primary-dark);
}

/* Example: Custom link */
a {
  color: var(--bs-primary);
}

a:hover {
  color: var(--bs-primary-dark);
}

/* ------------------------------------------------------------
   3. Component Specific Customizations (Optional)
   ------------------------------------------------------------ */

/* Example: Navbar */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-text {
  color: var(--bs-light);
}

/* Accordion Customizations */
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25)
}
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1); /* Optional: change arrow icon color */
}
 Optional: Custom progress bar color
.progress-bar {
  background-color: var(--bs-primary);
}

.mk_quote-ss-service-name{
    width:80%;
    font-size: 23px;
}
.bg-warning {
  opacity: 1; 
  background-color: rgba(var(--bs-warning-rgb),var(--bs-bg-opacity)) !important;
  color: #13131f;
}
#selectedServices p{
    margin-bottom: 0.5rem !important;
}
.mk_quote-gs-benefit-item,
.mk_quote-gs-benefit strong,
.mk_quote-gs-avoidances-item,
.mk_quote-gs-avoidances strong
{
    display:inline-block;
    
}

.accordion-button:not(.collapsed) {
  color: #fff;
  background-color: #ff5001;
  box-shadow: 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.form-switch .form-check-input {
  width: 2em;
  /*margin-right: 1em;*/
  height: 1.5em;
}

.mk_quote-gs-deliverable-item{
background: #ffdccc;
    color: #ff5001;
    padding: 0.2em !important;
    border: 1px solid #ff5001;
    border-radius: 3px;
    font-size: 90% !important;
    font-weight: 400; 
    line-height: 20px !important;
    /*text-wrap: nowrap;*/
    line-height:1 !important;
}
.mk_quote-gs-benefits,
.mk_quote-gs-avoidances{
        font-size: 90% !important;
    font-weight: 400; 
    line-height: 20px !important;
    /*text-wrap: nowrap;*/
    line-height:1 !important;
}

body{
    font-family: 'mika-body';
} 
h1,h2,h3,h4,h5,h6{
  font-family: "Redaction", sans-serif;
  font-weight: 100;
  /*font-size: 700%;*/ 
}

.mk_quote-ss-benefits-title,
.mk_quote-ss-avoidances-title,
.mk_quote-ss-deliverables-title
{
color: #ffdccc;
  /*text-transform: uppercase;*/
  font-size: 200%;
  margin-top: -20px !important;
  display: block;
  /*margin-left: 1em;*/
  font-family: "Redaction", sans-serif;
  font-style:italic;
}
.mk_quote-gs-price{
    float:right;
}
.mk_quote-gs-description{
    line-height: 1;
}

.accordion-button {
  color: #ff5001;
  /*font-style: italic;*/
  font-weight: 100;
  letter-spacing: 0.2px;
}
.the_rest{
    margin-top:10vh;
}
.mk_quote-gs-category,
.mk_quote-gs-price{
    display:inline-block;
    vertical-align:middle;
}

.mk_quote-ss-benefit-label,
.mk_quote-ss-avoidance-label,
.mk_quote-ss-deliverable-label
{
    line-height: 1;
    margin-bottom: 10px;
}
#messagesAccordion .accordion-body>div{
  white-space: pre-line !important;
  word-wrap: break-word;
}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                              flush styles for accordion*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------*/

        .accordion-button::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
            transition: transform 0.2s ease-in-out;
        }

        .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E") !important;
        }

        .accordion-button:focus {
            box-shadow: none; /* Removes the default focus shadow */
            border-color: #86b7fe;
        }

        .accordion-item {
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, .125);
        }

        .accordion-item:last-of-type {
            border-bottom: 0;
        }

        .accordion-button {
            background-color: transparent;
            color: #212529;
            font-size: 1rem;
        }

        .accordion-body {
            padding-left: 1rem; /* Adjust as needed for indentation */
            padding-right: 1rem;
        }
        
         .navbar-brand img { height: 30px; }
        
/*--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                              flush styles for accordion*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
  background-color: #f8f9fa;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

/* Card Styling - Apple-inspired */
.card {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}

.card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  background-color: #fff;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* Button Styling with accent color */
.btn {
  border-radius: 8px;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

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

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-outline-primary {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

/* List Group Styling */
.list-group-item {
  border-color: rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  padding: 0.75rem 1rem;
}

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

.list-group-item-action:hover {
  background-color: var(--accent-light);
}

/* Badge Styling */
.badge {
  font-weight: 500;
  padding: 0.4em 0.8em;
  border-radius: 20px;
}

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

/* Form Controls */
.form-control, .input-group-text {
  border-radius: 8px;
  border-color: rgba(0, 0, 0, 0.08);
  padding: 0.6rem 0.75rem;
}

.form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem var(--accent-border);
}

.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Accordion Styling */
.accordion-button:not(.collapsed) {
  background-color: var(--accent-light);
  color: var(--accent-color);
}

.accordion-button:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem var(--accent-border);
}

.accordion-button {
  border-radius: 0;
  padding: 1rem 1.25rem;
}

/* Nav Tabs */
.nav-tabs .nav-link {
  border: none;
  color: #555;
  padding: 0.75rem 1rem;
  font-weight: 500;
}

.nav-tabs .nav-link.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
  background-color: transparent;
}

/* Custom Shadows */
.shadow-sm {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

/* Placeholder Styling */
.placeholder {
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}

/* Selected Items Styling */
.list-group-item.selected {
  background-color: var(--accent-light);
  border-left: 3px solid var(--accent-color);
}

/* Quote Detail Styling */
.quote-detail-container h3 {
  color: var(--accent-color);
}

.quote-detail-container .card-header {
  background-color: #f8f9fa;
  font-weight: 500;
}

/* Form Check Styling */
.form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.form-check-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem var(--accent-border);
}

/* Modal Styling */
.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 1.25rem 1.5rem;
}

.modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding: 1.25rem 1.5rem;
}

/* Search Styling */
.search-container {
  position: relative;
}

.search-input {
  padding-right: 40px;
  border-radius: 20px;
  background-color: #f5f5f7;
  border: none;
  transition: all 0.2s ease;
}

.search-input:focus {
  background-color: #fff;
  box-shadow: 0 0 0 4px var(--accent-border);
}

.search-clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  display: none;
}

.search-clear-btn:hover {
  color: #666;
}

.search-results-header {
  padding: 8px 12px;
  background-color: var(--accent-light);
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Sticky Header */
header.sticky-top {
  z-index: 1030;
}

/* Off-Canvas Menu */
.offcanvas-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.offcanvas-body .nav-link {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.offcanvas-body .nav-link:hover {
  background-color: var(--accent-light);
}

.offcanvas-body .nav-link.active {
  background-color: var(--accent-light);
  color: var(--accent-color);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .border-end {
    border-right: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.list-group-flush > .list-group-item {
  border-width: 0 0 var(--bs-list-group-border-width);
  padding: 5px;
}