/**
Theme Name: Digital Home Pro
Author: Customer Path
Author URI: https://customerpath.com.au
Description: Digital Home Pro from Customer Path

Digital Home Pro is a fast, fully customizable, and beautiful WordPress theme suitable for blogs, personal portfolios, business websites, and WooCommerce storefronts. It is very lightweight (less than 50KB on the frontend) and offers unparalleled speed. Built with SEO in mind, Digital Home Pro comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features include:

WooCommerce Ready
Responsive
RTL & Translation Ready
Extendible with premium addons
Regularly updated

Designed, developed, maintained, and supported by Customer Path. Looking for a perfect base theme? Look no further. Digital Home Pro is a fast, fully customizable, and WooCommerce-ready theme that you can use for building any kind of website!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digital-home-pro
Template: astra
*/

/* Media Drop down Wrapper */
.media-filter-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

/* Label with semicolon */
.media-filter-form label::after {
  content: ":";
  margin-left: 0.15rem;
  font-weight: 600;
  color: #010B13;
}

/* Dropdown core */
.cp-dropdown {
  position: relative;
  width: 230px;
  cursor: pointer;
  user-select: none;
}

/* Toggle button */
.cp-dropdown-toggle {
  background: #010B13;
  border: 2px solid #8528A7;
  padding: 0.6rem 2.2rem 0.6rem 0.8rem;
  border-radius: 6px;
  color: #F6EDF9;
  font-size: 16px;
  position: relative;
}

/* Arrow */
.cp-dropdown-toggle::after {
  content: "▼";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #F6EDF9;
}

/* Options dropdown */
.cp-dropdown-options {
  position: absolute;
  width: 100%;
  background: #010B13;
  border: 2px solid #8528A7;
  border-radius: 6px;
  margin-top: 6px;
  padding: 0;
  list-style: none;
  display: none;
  z-index: 50;
}

/* Open state */
.cp-dropdown.open .cp-dropdown-options {
  display: block;
}

.cp-dropdown-options li {
  padding: 0.6rem 0.8rem;
  padding-left: 0.8rem !important; /* Tight left spacing */
  margin: 0;
  text-indent: 0 !important;
  color: #F6EDF9;
  border-bottom: 1px solid #0F131A;
  list-style: none;
}

.cp-dropdown-options li:last-child {
  border-bottom: none;
}

/* Hover + active (fully custom, no Safari issues) */
.cp-dropdown-options li:hover {
  background: #B298DC;
  color: #010B13;
}

/* Media Filter Wrapper */
.media-filter-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

/* Label styling */
.media-filter-form label::after {
  content: ":";
  margin-left: 0.15rem;
  font-weight: 600;
  color: #010B13;
}

/* Dropdown wrapper */
.cp-dropdown {
  position: relative;
  width: 230px;
  cursor: pointer;
  user-select: none;
}

/* Toggle button */
.cp-dropdown-toggle {
  background: #010B13;
  border: 2px solid #8528A7;
  padding: 0.6rem 2.2rem 0.6rem 0.8rem;
  border-radius: 6px;
  color: #F6EDF9;
  font-size: 16px;
  position: relative;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 9999;
}

/* Arrow icon */
.cp-dropdown-toggle::after {
  content: "▼";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #F6EDF9;
}

/* Dropdown list */
.cp-dropdown-options {
  position: absolute;
  width: 100%;
  background: #010B13;
  border: 2px solid #8528A7;
  border-radius: 6px;
  margin-top: 6px;
  padding: 0;
  list-style: none;
  display: none;
  z-index: 50;
}

.cp-dropdown.open .cp-dropdown-options {
  display: block;
}

.cp-dropdown-options li {
  padding: 0.6rem 0.8rem;
  margin: 0;
  color: #F6EDF9;
  border-bottom: 1px solid #0F131A;
}

.cp-dropdown-options li:last-child {
  border-bottom: none;
}

.cp-dropdown-options li:hover {
  background: #B298DC;
  color: #010B13;
}

/* ----------- MOBILE & TABLET FIX ----------- */
@media (max-width: 768px) {

  /* Stack label above dropdown */
  .media-filter-form {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding-left: 20px;
    padding-right: 20px;    /* padding now applies equally to label + dropdown */
  }

  /* Dropdown should span full width of the wrapper */
  .cp-dropdown {
    width: 100%;
  }

  .cp-dropdown-toggle {
    width: 100%;
  }

  /* Dropdown list aligns with the padded wrapper too */
  .cp-dropdown-options {
    width: 100%;
  }
}