/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

.header-nav-main.nav-right > li.menu-item {
    margin-left: 30px;
}

.header-nav-main .header-divider {
    background-color: #6E7071;
}

.header-nav-main .header-divider {
    background-color: #6E7071;
    width: 1px;
    height: 30px !important;
    margin: 0 15px !important;
    opacity: 1;
}

.mobile-nav .icon-menu {
    color: #6E7071;
}

.mobile-nav a .icon-menu {
    color: #6E7071;
}

.top_bar_inv {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #000 !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
}

.top_bar_inv .inventory-arrow {
    width: 12px;
    height: auto;
    transition: transform 0.3s ease;
}

.top_bar_inv:hover .inventory-arrow {
    transform: translateX(5px);
}

@media (max-width: 767px) {
    .top_bar_inv {
        font-size: 14px !important;
        gap: 10px;
    }
    
    .top_bar_inv .inventory-arrow {
        width: 10px;
    }
}

#masthead.header-main {
    position: relative;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

#masthead.header-main::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(180deg, rgba(1, 1, 1, 1) 0%, rgba(54, 58, 62, 0) 100%);
    pointer-events: none;
}

.sec-grad {
    position: relative;
}

.sec-grad::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, rgba(1, 1, 1, 1) 0%, rgba(68, 75, 78, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.sec-grad .section-content {
    position: relative;
    z-index: 2;
}

.sec-title h1,
.sec-title h2,
.sec-title h3,
.sec-title h4,
.sec-title h5,
.sec-title h6 {
    line-height: 1 !important;
    letter-spacing: -1px;
}

.cust-btn {
    display: inline-block;
    padding: 5px 32px;
    border: 1px solid #FFFFFF;
    border-radius: 50px;
    background: transparent;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
    transition: all 0.5s ease;
    cursor: pointer;
}

.cust-btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000;
}

@media (max-width: 767px) {
    .cust-btn {
        padding: 4px 24px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .cust-btn {
        padding: 4px 20px;
        font-size: 10px;
    }
}

.script_txt p {
    font-family: 'pho_script';
    font-size: 80px;
    line-height: 0.5;
    display: block;
    margin: 0;
    padding: 0;
}

@media (max-width: 767px) {
    .script_txt p {
        font-size: 50px;
    }
}

@media (max-width: 480px) {
    .script_txt p {
        font-size: 50px;
    }
}

.arrow-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Adjust this value to control spacing */
    text-decoration: none;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    background: transparent;
}

.arrow-btn::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('/wp-content/uploads/2025/12/inv_arrrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.arrow-btn-light {
    color: #010101 !important;
}

.arrow-btn-light::after {
    filter: brightness(0);
}

.arrow-btn-dark {
    color: #FFFFFF !important;
}

.arrow-btn-dark::after {
    filter: brightness(0) invert(1);
}

.arrow-btn:hover::after {
    transform: translateX(5px);
}

@media (max-width: 767px) {
    .arrow-btn {
        font-size: 14px;
        gap: 6px; /* Adjust mobile spacing too */
    }
    
    .arrow-btn::after {
        width: 10px;
        height: 10px;
    }
}

.img-rd-20 img {
	
	border-radius: 20px
}

.bn-rd-10 {
    border-radius: 10px;
    overflow: hidden;
}

.cust-btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    border: 1px solid #FFFFFF;
    border-radius: 50px;
    background: transparent;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
    transition: all 0.5s ease;
    cursor: pointer;
}

.cust-btn-arrow::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('/wp-content/uploads/2025/12/inv_arrrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.cust-btn-arrow:hover {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000;
}

.cust-btn-arrow:hover::after {
    transform: translateX(5px);
}

@media (max-width: 767px) {
    .cust-btn-arrow {
        padding: 4px 24px;
        font-size: 13px;
        gap: 8px;
    }
    
    .cust-btn-arrow::after {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .cust-btn-arrow {
        padding: 8px 20px;
        font-size: 10px;
        gap: 6px;
    }
    
    .cust-btn-arrow::after {
        width: 8px;
        height: 8px;
    }
}

.sec-border {
    position: relative;
}

.sec-border::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Adjust this percentage to control border length */
    border-bottom: 1px solid rgba(213, 213, 213, 0.5);
}

.footer-menu {
    line-height: 2.5; /* Adjust this value for more/less spacing */
}

/* Or use margin bottom on each line break */
.footer-menu br {
    content: "";
    display: block;
    margin-bottom: 15px; /* Adjust pixel value as needed */
}

/* Reset CF7 Default Field & Label Styles */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="file"],
.wpcf7 select {
  all: unset;
  display: block;
  box-sizing: border-box;
}

.wpcf7 label {
  all: unset;
  display: block;
}

.wpcf7-form-control-wrap {
  display: block;
}

.wpcf7 .wpcf7-list-item {
  margin: 0;
}

.wpcf7 .wpcf7-list-item-label {
  margin: 0;
}

.wpcf7 .wpcf7-submit {
  cursor: pointer;
  box-sizing: border-box;
}

/* Contact Form CSS */
.multi-step-form-wrapper {
  margin: 0 auto;
  background: #010101;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* Form Content Wrapper */
.form-content-wrapper {
  background: #fff;
  border-radius: 14px 14px 0 0;
  padding-bottom: 30px;
}

/* Step Tabs */
.step-tabs {
  display: flex;
  background: #010101;
}

.step-tabs .tab {
  flex: 1;
  padding: 10px 6px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px 10px 0 0;
  margin: 8px 4px 0 4px;
}

.step-tabs .tab:first-child {
  margin-left: 18px;
}

.step-tabs .tab:last-child {
  margin-right: 18px;
}

.step-tabs .tab.active {
  background: #fff;
  color: #010101;
  font-size: 16px;
  font-weight: 600 !important;
}

.step-tabs .tab:not(.active) {
  border: 1px solid #B4BBC3;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-size: 16px;
  font-weight: 600 !important;
}

/* Form Steps Container */
.form-steps-container {
  padding: 30px 40px;
  position: relative;
}

.form-steps-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 40px;
  right: 40px;
  height: 1px;
  background: #e0e0e0;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

/* Form Rows */
.form-row {
  margin-bottom: 20px;
}

.form-row:last-of-type {
  margin-bottom: 0;
}

.form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Email field same width as Name field */
.form-step[data-step="1"] .form-row:last-of-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Form Groups */
.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
  margin-bottom: 20px;
}

/* Input Styling */
.multi-step-form-wrapper input[type="text"],
.multi-step-form-wrapper input[type="email"],
.multi-step-form-wrapper input[type="tel"],
.multi-step-form-wrapper select,
.multi-step-form-wrapper textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.multi-step-form-wrapper input::placeholder,
.multi-step-form-wrapper textarea::placeholder {
  color: #999;
}

.multi-step-form-wrapper input:focus,
.multi-step-form-wrapper select:focus,
.multi-step-form-wrapper textarea:focus {
  outline: none;
  border-color: #1a1a2e;
  box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.1);
}

.multi-step-form-wrapper textarea {
  min-height: 160px;
  resize: vertical;
}

.multi-step-form-wrapper select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* File Input Styling */
.multi-step-form-wrapper input[type="file"] {
  width: 100%;
  padding: 12px;
  background: #f8f9fa;
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
}

.multi-step-form-wrapper input[type="file"]:hover {
  border-color: #1a1a2e;
  background: #f0f0f0;
}

/* Form Navigation */
.form-navigation {
  padding: 30px 40px 30px;
}

.form-navigation p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  margin: 0;
}

.form-navigation p br {
  display: none;
}

.btn-back,
.btn-next,
.multi-step-form-wrapper input[type="submit"] {
  text-transform: none;
}

.btn-back,
.btn-next,
.multi-step-form-wrapper input[type="submit"] {
  padding: 5px 60px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
}

.btn-back {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  background: #fff;
  color: #A0A0A0;
  border: 1px solid #A0A0A0;
}

.btn-back:hover {
  border-color: #1a1a2e;
  background: #f8f9fa;
}

.btn-next,
.multi-step-form-wrapper input[type="submit"] {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  background: #000000;
  color: #fff;
  border: none;
}

.btn-next:hover,
.multi-step-form-wrapper input[type="submit"]:hover {
  background: #000000;
  border-color: #000000;
}

.multi-step-form-wrapper .wpcf7 input[type="submit"].wpcf7-submit {
  padding: 5px 60px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  background: #000000;
  color: #fff;
  border: none;
  text-transform: none;
  line-height: 1.5;
  box-sizing: border-box;
}

.multi-step-form-wrapper .wpcf7 input[type="submit"].wpcf7-submit:hover {
  background: #000000;
}

/* Payment Options Bar */
.payment-options-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: #f5f5f5;
  margin: 0 40px;
  border-radius: 8px;
}

.payment-label {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  white-space: nowrap;
  flex-shrink: 0;
}

.payment-options-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end; /* RIGHT ALIGN */
  text-align: right;
  gap: 24px;
}


.payment-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #333;

}

.payment-option::before {
  content: "✓";
  font-weight: 600;
  color: #333;
}

/* Validation Error Styling */
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
  border-color: #dc3545;
}

.form-group .error-message {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
}

.wpcf7-not-valid-tip {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
}

/* CF7 Success Message */
.wpcf7-response-output {
  border-color: #fff !important;
  color: #fff !important;
  background: transparent;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #fff !important;
  color: #fff !important;
}

/* Responsive */
@media (max-width: 768px) {
  
  /* Payment options — mobile fix */
  .payment-label {
    font-size: 14px;
    white-space: normal; /* allow wrapping on mobile */
  }
  
  .payment-option {
    font-size: 14px;
    align-items: flex-start;
	gap: 4px;
  }

  .payment-options-bar {
    flex-direction: column;
    align-items: stretch; /* keep content inside box */
    gap: 12px;
    margin: 0 20px;
    padding: 16px 20px;
  }
  
  .payment-options-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
	  text-align: left; 
  }

  /* Hide tabs on mobile */
  .step-tabs {
    display: none;
  }
  
  .multi-step-form-wrapper {
    border-radius: 12px;
  }
  
  .form-content-wrapper {
    border-radius: 12px 12px 0 0;
    padding-bottom: 20px;
  }
  
  .form-steps-container {
    padding: 20px;
  }
  
  .form-steps-container::after {
    left: 20px;
    right: 20px;
  }
  
  .form-row.two-col {
    grid-template-columns: 1fr;
  }
  
  .form-step[data-step="1"] .form-row:last-of-type {
    grid-template-columns: 1fr;
  }
  
  /* Mobile: Single column, Next first then Back */
  .form-navigation {
    padding: 20px;
  }
  
  .form-navigation p {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .btn-back {
    order: 2;
  }
  
  .btn-next,
  .multi-step-form-wrapper input[type="submit"] {
    order: 1;
  }
  
  .btn-back,
  .btn-next,
  .multi-step-form-wrapper input[type="submit"] {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .multi-step-form-wrapper {
    border-radius: 12px;
  }
  
  .form-content-wrapper {
    border-radius: 12px 12px 0 0;
  }
}

/* Success Screen */
.form-success-screen {
  padding: 60px 40px;
  text-align: center;
}

.form-success-screen h3 {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 20px;
}

.form-success-screen p {
  font-size: 16px;
  color: #333;
  margin: 0 0 12px;
  line-height: 1.6;
}

.form-success-screen p:last-child {
  margin-bottom: 0;
}

.form-success-screen a {
  color: #000;
  font-weight: 600;
  text-decoration: none;
}

.form-success-screen a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .form-success-screen {
    padding: 40px 20px;
  }
  
  .form-success-screen h3 {
    font-size: 20px;
  }
  
  .form-success-screen p {
    font-size: 14px;
  }
}


/* ----------------------------------------------------------------------------- */
/* FAQ CSS */
/* ----------------------------------------------------------------------------- */
.faq-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Two Column Layout */
.faq-wrapper.faq-two-column {
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
}

.faq-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-radius: 10px;
  padding: 0 24px;
  margin-bottom: 16px;
  background-color: #ffffff;
}

.faq-item.open {
  border: 1px solid #010101;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-question {
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 17px;
  color: #202a1c;
}

.faq-question * {
  pointer-events: none;
}

.faq-text {
  flex: 1;
}

.faq-arrow {
  width: 16px;
  height: 16px;
  margin-left: 12px;
  transition: transform 0.3s ease;
}

.faq-item.open .faq-arrow {
  transform: rotate(90deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #202a1c;
  line-height: 1.75;
}

.faq-item.open .faq-answer {
  max-height: 1000px;
  opacity: 1;
  padding: 10px 0 20px 0;
}

/* ----------------------------------------------------------------------------- */
/* Responsive Adjustments */
/* ----------------------------------------------------------------------------- */

/* Tablet: Stack columns */
@media (max-width: 992px) {
  .faq-wrapper.faq-two-column {
    flex-direction: column;
    gap: 0;
  }
  
  .faq-column .faq-item:last-child {
    margin-bottom: 16px; /* Restore margin when stacked */
  }
}

@media (max-width: 768px) {
  .faq-item {
    padding: 0 16px;
    margin-bottom: 12px;
  }
  
  .faq-question {
    font-size: 16px;
    padding: 18px 0;
  }
  
  .faq-answer {
    font-size: 15px;
  }
  
  .faq-item.open .faq-answer {
    padding: 8px 0 16px 0;
  }
}

@media (max-width: 480px) {
  .faq-item {
    padding: 0 12px;
    margin-bottom: 10px;
  }
  
  .faq-question {
    font-size: 15px;
    padding: 16px 0;
  }
  
  .faq-answer {
    font-size: 14px;
  }
  
  .faq-item.open .faq-answer {
    padding: 6px 0 14px 0;
  }
}

.two-step .step-tabs {
  justify-content: flex-start;
}

.two-step .step-tabs .tab {
  flex: 0 0 auto;
  min-width: 180px;
}

/* About Gallery */
.about-gallery-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.about-gallery-row-first {
    display: grid;
    grid-template-columns: 50% 25% 25%;
    gap: 20px;
    width: 100%;
}

.about-gallery-row-first .about-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.about-gallery-row-first .about-gallery-item-large {
    aspect-ratio: 16 / 10;
}

.about-gallery-row-first .about-gallery-item-small {
    aspect-ratio: 8 / 10;
}

.about-gallery-row-first .about-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.about-gallery-row-grid {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    gap: 20px;
    width: 100%;
}

.about-gallery-item-square {
    position: relative;
    aspect-ratio: 1.1 / 1;
    overflow: hidden;
    border-radius: 20px;
}

.about-gallery-item-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .about-gallery-row-first {
        grid-template-columns: 1fr;
    }
    
    .about-gallery-row-first .about-gallery-item-large,
    .about-gallery-row-first .about-gallery-item-small {
        aspect-ratio: 1 / 1;
    }
    
    .about-gallery-row-grid {
        grid-template-columns: 1fr;
    }
    
    .about-gallery-item-square {
        aspect-ratio: 1 / 1;
    }
}

/* CSA Testimonials Grid */
.csa-testimonials-grid {
    column-count: 3;
    column-gap: 24px;
}

.csa-testimonial-card {
    break-inside: avoid;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 30px 45px;
    margin-bottom: 24px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.csa-testimonial-quote-icon {
    margin-bottom: 20px;
}

.csa-testimonial-quote-icon img {
    width: 48px;
    height: auto;
}

.csa-testimonial-text {
    font-style: italic;
    color: #333;
    line-height: 1.7;
    margin-bottom: 20px;
}

.csa-testimonial-text p {
    margin: 0 0 1em 0;
}

.csa-testimonial-text p:last-child {
    margin-bottom: 0;
}

.csa-testimonial-author {
    font-weight: 600;
    color: #222;
}

.csa-testimonial-author::before {
    content: "— ";
}

/* Tablet - 2 columns */
@media (max-width: 991px) {
    .csa-testimonials-grid {
        column-count: 2;
    }
}

/* Mobile - 1 column */
@media (max-width: 767px) {
    .csa-testimonials-grid {
        column-count: 1;
    }
    
    .csa-testimonial-card {
        padding: 24px;
    }
}

/* Blog Grid Wrapper */
.csa-blog-grid-wrapper {
    margin: 0 auto;
}

/* Header */
.csa-blog-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: nowrap;
    gap: 20px;
}

.csa-blog-grid-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 44px;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    margin: 0;
    color: #1a1a1a;
}

/* Filter Dropdown */
.csa-filter-wrapper {
    position: relative;
}

.csa-filter-dropdown {
    position: relative;
}

.csa-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    cursor: pointer;
    padding: 8px 0;
    white-space: nowrap;
    text-transform: none;
    line-height: 1;
}

.csa-blog-grid-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 44px;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    margin: 0;
    color: #1a1a1a;
    line-height: 1;
}

.csa-filter-btn svg {
    transition: transform 0.3s ease;
}

.csa-filter-dropdown.active .csa-filter-btn svg {
    transform: rotate(180deg);
}

.csa-filter-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.csa-filter-dropdown.active .csa-filter-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.csa-filter-item {
    display: block;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    text-decoration: none;
    transition: background 0.2s ease;
}

.csa-filter-item:hover {
    background: #f5f5f5;
}

.csa-filter-item.active {
    font-weight: 600;
    background: #f5f5f5;
}

/* Grid Layout */
.csa-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Card Styling */
.csa-blog-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.csa-blog-card:hover {
    transform: translateY(-5px);
}

.csa-card-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 66.67%; /* 3:2 aspect ratio */
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 16px;
}

.csa-card-image-wrapper img.csa-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csa-fallback-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
}

.csa-card-content {
    padding: 10px 30px 20px 30px;
}

.csa-card-date {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #555;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.csa-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
    color: #1a1a1a;
}

/* Load More Button */
.csa-load-more-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.csa-load-more-btn {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #010101;
    background: transparent;
    border: 1px solid #010101;
    border-radius: 30px;
    padding: 10px 50px;
    cursor: pointer;
    transition: all 0.3s ease;
	text-transform: none;
}

.csa-load-more-btn:hover {
    background: #1a1a1a;
    color: #fff;
}

.csa-load-more-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

.csa-load-more-btn.hidden {
    display: none;
}

/* No Posts Message */
.csa-no-posts {
    grid-column: 1 / -1;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #666;
    padding: 40px 0;
}

/* Responsive */
@media (max-width: 992px) {
    .csa-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 600px) {
    .csa-blog-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .csa-blog-grid-header {
        margin-bottom: 25px;
        gap: 15px;
        align-items: baseline;
    }
    
    .csa-blog-grid-title {
        font-size: 28px;
        line-height: 1;
    }
    
    .csa-filter-btn {
        font-size: 14px;
    }
    
    .csa-card-content {
        padding: 5px 15px 15px 15px;
    }
    
    .csa-card-date {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .csa-card-title {
        font-size: 24px;
    }
}

.entry-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 38px;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    color: #1a1a1a;
    padding-top: 30px;
}

@media (max-width: 768px) {
    .entry-title {
        font-size: 28px;
        padding-top: 20px;
    }
}

@media (max-width: 480px) {
    .entry-title {
        font-size: 24px;
        padding-top: 15px;
    }
}

.byline {
    display: none;
}

.entry-image {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
}

.entry-image a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.entry-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Simple Contact Form CSS */
.simple-contact-form {
  margin: 0 auto;
  padding: 30px 40px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.simple-contact-form .form-row {
  margin-bottom: 20px;
}

.simple-contact-form .form-row:last-of-type {
  margin-bottom: 0;
}

.simple-contact-form .form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.simple-contact-form .form-group {
  display: flex;
  flex-direction: column;
}

.simple-contact-form .form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
  margin-bottom: 20px;
}

.simple-contact-form input[type="text"],
.simple-contact-form input[type="email"],
.simple-contact-form input[type="tel"],
.simple-contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.simple-contact-form input::placeholder,
.simple-contact-form textarea::placeholder {
  color: #999;
}

.simple-contact-form input:focus,
.simple-contact-form textarea:focus {
  outline: none;
  border-color: #1a1a2e;
  box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.1);
}

.simple-contact-form .wpcf7 textarea {
  min-height: 80px !important;
  height: auto !important;
  resize: vertical;
}

.simple-contact-form .form-submit {
  display: flex;
  justify-content: center;
  padding-top: 30px;
  position: relative;
}

.simple-contact-form .form-submit p {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.simple-contact-form .wpcf7-spinner {
  position: absolute;
  right: 0;
}

.simple-contact-form input[type="submit"] {
  display: inline-block;
  padding: 20px 50px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
  background: #000000;
  color: #fff;
  border: none;
  text-transform: none;
  line-height: 1.5;
  box-sizing: border-box;
}

.simple-contact-form input[type="submit"]:hover {
  background: #333333;
}

/* Validation Error Styling */
.simple-contact-form .wpcf7-not-valid-tip {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
}

.simple-contact-form .wpcf7-response-output {
  text-align: center;
  margin-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .simple-contact-form {
    padding: 20px;
    border-radius: 12px;
  }

  .simple-contact-form .form-row.two-col {
    grid-template-columns: 1fr;
  }

  .simple-contact-form input[type="submit"] {
    width: 100%;
    padding: 16px 40px;
    font-size: 15px;
  }
}

/* base: make the select show placeholder-grey by default */
.simple-contact-form select,
.simple-contact-form .wpcf7-form-control.wpcf7-select {
  color: #999; /* placeholder look by default */
  width: 100%;
  padding: 14px 16px;
  padding-right: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff url('/wp-content/uploads/2025/12/arrowdn.svg') no-repeat right 16px center;
  background-size: 14px auto;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* when a real option is selected, show normal text color */
.simple-contact-form select.has-value,
.simple-contact-form .wpcf7-form-control.wpcf7-select.has-value {
  color: #333;
}
/* focus style */
.simple-contact-form select:focus,
.simple-contact-form .wpcf7-form-control.wpcf7-select:focus {
  outline: none;
  border-color: #1a1a2e;
  box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.1);
}
/* responsive */
@media (max-width: 768px) {
  .simple-contact-form select,
  .simple-contact-form .wpcf7-form-control.wpcf7-select {
    padding-right: 36px;
    background-position: right 12px center;
    background-size: 12px auto;
  }
}


.cust-btn-template {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 5px auto;
    gap: 10px;
    padding: 12px 32px;
    border: 1px solid #010101;
    border-radius: 50px;
    background: transparent;
    color: #010101;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.45s ease;
    cursor: pointer;
}


.cust-btn-template:hover,
.cust-btn-template.cust-btn-arrow-2:hover,
.cust-btn-template.cust-btn-phone:hover,
.cust-btn-template.cust-btn-text:hover {
    background-color: #010101 !important;
    color: #ffffff !important;
}

.cust-btn-template.cust-btn-arrow-2 {
    background-color: #010101;
    color: #ffffff;
    border-color: #010101;
}

.cust-btn-template.cust-btn-arrow-2::after {
    filter: brightness(0) invert(1);
}


/* --------------------------
   1) NEW ARROW BUTTON
--------------------------- */
.cust-btn-arrow-2 {
    /* inherits base */
}

.cust-btn-arrow-2::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('/wp-content/uploads/2025/12/inv_arrrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.cust-btn-arrow-2:hover::after {
    transform: translateX(5px);
}


/* --------------------------
   2) PHONE BUTTON
--------------------------- */
.cust-btn-phone::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('/wp-content/uploads/2025/12/phone-template.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/* --------------------------
   3) TEXT BUTTON
--------------------------- */
.cust-btn-text::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('/wp-content/uploads/2025/12/text_template.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/* -----------------------------------
   ICON → WHITE ON HOVER (ALL BUTTONS)
------------------------------------ */

/* Arrow button */
.cust-btn-arrow-2:hover::after {
    filter: brightness(0) invert(1);
}

/* Phone button */
.cust-btn-phone:hover::before {
    filter: brightness(0) invert(1);
}

/* Text button */
.cust-btn-text:hover::before {
    filter: brightness(0) invert(1);
}



/* --------------------------
   RESPONSIVE ADJUSTMENTS
--------------------------- */
@media (max-width: 767px) {
    .cust-btn-template {
        padding: 8px 20px;
        font-size: 13px;
        gap: 8px;
    }

    .cust-btn-arrow-2::after { width: 10px; height: 10px; }
    .cust-btn-phone::before { width: 14px; height: 14px; }
    .cust-btn-text::before  { width: 14px; height: 14px; }
}

@media (max-width: 480px) {
    .cust-btn-template {
        padding: 6px 16px;
        font-size: 12px;
        gap: 6px;
    }

    .cust-btn-arrow-2::after { width: 8px; height: 8px; }
    .cust-btn-phone::before { width: 12px; height: 12px; }
    .cust-btn-text::before  { width: 12px; height: 12px; }
}

/* ============================================
   CSA INVENTORY GRID
   ============================================ */

.csa-inventory-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Filters Row */
.csa-inventory-filters-row {
    background: #fff;
    max-width: 100%;
    padding: 40px 15px 40px 15px;
}

.csa-inventory-filter-group.csa-inventory-filter-brands {
    border-right: 1px solid #DADADA;
    padding-right: 120px;
}

.csa-inventory-filters-row-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.csa-inventory-filter-group.csa-inventory-filter-status {
    padding-left: 120px;
}

.csa-inventory-filter-status .csa-inventory-filter-buttons {
    gap: 0px 0px; /* row-gap column-gap */
}

@media (max-width: 768px) {
    .csa-inventory-filters-row {
        padding: 60px 15px 30px 15px;
    }
	.csa-inventory-filter-group.csa-inventory-filter-brands {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #DADADA;
        padding-bottom: 30px;
    }
	 .csa-inventory-filter-group.csa-inventory-filter-status {
        padding-left: 0;
    }
}

.csa-inventory-grid-section {
    background: #ededed;
    padding: 60px 15px 90px 15px;
}
.csa-inventory-grid-section-inner {
    max-width: 1500px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .csa-inventory-grid-section {
        padding: 30px 15px;
    }
}

.csa-inventory-filter-group {
    flex: 1 1 45%;
}

.csa-inventory-filter-title {
    font-size: 34px;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 15px;
    color: #010101;
}

.csa-inventory-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.csa-inventory-filter-btn {
    background: #fff;
	  color: #676364;
    border: 1px solid #DADADA;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.csa-inventory-filter-btn:hover,
.csa-inventory-filter-btn.active {
    background: #010101;
    color: #fff;
}

/* Grid Header */
.csa-inventory-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}

.csa-inventory-grid-title {
    font-size: 44px;
    font-weight: 700;
    font-style: italic;
    color: #010101;
    margin: 0;
}
.csa-inventory-sort-select {
    padding: 0 15px;
    height: 44px;
    border: 1px solid #000000;
    border-radius: 4px;
    font-size: 14px;
    min-width: 220px;
    cursor: pointer;
    background-color: #ededed;
}

.csa-inventory-sort-select,
.csa-inventory-sort-select:focus,
.csa-inventory-sort-select:active {
    background-color: #ededed;
}

/* Grid */
.csa-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

@media (max-width: 992px) {
    .csa-inventory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .csa-inventory-grid {
        grid-template-columns: 1fr;
    }
}

/* Car Card */
.csa-inventory-car-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.csa-inventory-car-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.csa-inventory-card-arrow img {
    width: 14px;
    height: 14px;
}

.csa-inventory-car-card:hover .csa-inventory-card-arrow img {
    filter: brightness(0) invert(1);
}

.csa-inventory-car-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.csa-inventory-card-image {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.csa-inventory-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.csa-inventory-car-card:hover .csa-inventory-card-image img {
    transform: scale(1.05);
}

.csa-inventory-card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
}

.csa-inventory-card-details {
    flex: 1;
}

.csa-inventory-card-title {
    font-size: 28px;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    color: #010101;
}

.csa-inventory-card-price {
    font-size: 19px;
    color: #010101;
    margin: 0;
}

.csa-inventory-card-arrow {
    width: 45px;
    height: 45px;
    border: 1px solid #010101;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.csa-inventory-card-arrow span {
    font-size: 18px;
    color: #010101;
}

.csa-inventory-car-card:hover .csa-inventory-card-arrow {
    background: #010101;
    border-color: #010101;
}

.csa-inventory-car-card:hover .csa-inventory-card-arrow span {
    color: #fff;
}

/* Pagination */
.csa-inventory-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.csa-inventory-page-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.csa-inventory-page-btn:hover,
.csa-inventory-page-btn.active {
    background: #010101;
    color: #fff;
    border-color: #010101;
}

/* Loading Overlay */
.csa-inventory-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(237, 237, 237, 0.8);
    z-index: 10;
}

.csa-inventory-grid-results {
    position: relative;
}

/* No Results */
.csa-inventory-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #666;
}

/* Mobile Filters */
@media (max-width: 768px) {
    .csa-inventory-filters-row-inner {
        flex-direction: column;
    }
	
    .csa-inventory-filters-row {
        padding: 30px 10px 30px 10px;
    }
    
    .csa-inventory-grid-section {
        padding: 30px 15px 60px 15px;
    }
    
    .csa-inventory-filter-group {
        flex: 1 1 100%;
        text-align: center;
    }
    
    .csa-inventory-filter-buttons {
        justify-content: center;
    }
    
    .csa-inventory-filter-title {
        font-size: 24px;
    }
    
    .csa-inventory-filter-btn {
        padding: 6px 14px;
        font-size: 14px;
    }
    
    .csa-inventory-grid-title {
        font-size: 28px;
    }
    
    .csa-inventory-grid-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }
    
    .csa-inventory-sort-select {
        width: 100%;
    }
    
    .csa-inventory-card-title {
        font-size: 20px;
    }
    
    .csa-inventory-card-price {
        font-size: 16px;
    }
    
    .csa-inventory-card-info {
        padding: 15px;
    }
	.csa-inventory-card-arrow {
    width: 35px;
    height: 35px;
}
}

/* Pagination container - reduce spacing */
.csa-inventory-pagination {
    display: flex;
    gap: 0; /* Tighter spacing between buttons */
    justify-content: center;
}

/* Pagination buttons - larger size, centered text, transparent inactive */
.csa-inventory-page-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #7C7C7C;
    background: transparent; /* Transparent for inactive */
    cursor: pointer;
    font-size: 16px;
	font-weight: 400;
	font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: all 0.3s ease;
	color: #000000;
}

/* Active state */
.csa-inventory-page-btn.active {
    background: #010101;
    color: #fff;
    border-color: #000;
}

/* Hover state for inactive buttons */
.csa-inventory-page-btn:not(.active):hover {
    background: #010101;
}

/* Mobile responsive pagination */
@media screen and (max-width: 768px) {
    .csa-inventory-pagination {
        gap: 0;
        flex-wrap: wrap;
    }
    
    .csa-inventory-page-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .csa-inventory-page-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

/* Featured Cars Grid */
.csa-featured-grid-wrapper {
    width: 100%;
}
.csa-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.csa-featured-cta-card {
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.csa-featured-cta-card[data-span="2"] {
    grid-column: span 2;
}
.csa-featured-cta-card[data-span="3"] {
    grid-column: span 3;
}
.csa-featured-cta-content {
    text-align: left;
}
.csa-featured-cta-icon {
    width: 50px;
    height: auto;
    margin-bottom: 30px;
}
.csa-featured-cta-title {
    font-size: 50px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 130px;
    line-height: 1;
    text-transform: uppercase;
}
.csa-featured-cta-content .cust-btn-template {
    margin-left: 0;
    margin-right: auto;
}
@media (max-width: 768px) {
    .csa-featured-grid {
        grid-template-columns: 1fr;
    }
    .csa-featured-cta-card[data-span="2"],
    .csa-featured-cta-card[data-span="3"] {
        grid-column: span 1;
    }
    .csa-featured-cta-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    .csa-featured-cta-card {
        padding: 30px;
    }
	
	.csa-featured-cta-content .cust-btn-template {
        max-width: 170px !important; /* adjust as needed */
        width: 100%;
    }

}