/*--------------------------------------------------------------
THEME CUSTOM STYLES
General site styles, search layout, homepage components

PMPro styles moved to pmpro.css
Clinic profile styles in clinicview.css

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    --navy: #012E33;
    --text: #012E33;
    --aqua: #6CCCCC;
    --cyan: #349A9A;
    --blue-grey: #F4F8F9;
    --orange: #E78F5D;
    --light-orange: #FFF6EE;
    --dark-orange: #e87837;
    --bb-block-radius: 0px !important;
    --bb-option-radius: 0px !important;
    --bb-block-radius-inner: 0px !important;
    --bb-input-radius: 0px !important;
    --bb-label-type-radius: 0px !important;
    --bb-checkbox-radius: 0px !important;
}

/* ========================================
   GENERAL STYLES
   ======================================== */

.elementor-cta__button:after {
    display: inline-block;
    content: url("/wp-content/uploads/2025/11/icon-arrow-right-dark.svg");
    padding-left: 5px;
    width: 21px;
    height: 15px;
    transition: all 0.3s ease;
}

.elementor-cta__button:hover:after {
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.elementor-button:hover .elementor-button-icon svg path {
    stroke: white !important;
}

.elementor-cta--skin-classic,
.elementor-cta--skin-classic .elementor-cta,
.elementor-cta--skin-classic .elementor-cta__content {
    overflow: visible !important;
}

.blog-loop-cta .elementor-cta__description {
    order: -1 !important;
}

.footer-widget aside {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.footer-widget aside h2,
.footer-widget aside h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1.2em !important;
    letter-spacing: 3.2px !important;
    color: var(--text) !important;
}

.footer-widget .wp-block-image {
    margin-bottom: 0;
}

.footer-widget .menu a {
    padding: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
}

input.search, input[name=bbp_search], input[type=search] {
    background-position: right 10px center;
}

#header-aside .bb-header-buttons a.button.signin-button {
    border: 1px solid var(--orange) !important;
    color: var(--text) !important;
    padding: 0 20px !important;
    line-height: 34px !important;
}

#header-aside .bb-header-buttons a.button:hover {
    border-color: var(--dark-orange) !important;
    background: var(--dark-orange) !important;
    color: white !important;
}

/* ========================================
   DISTANCE FILTERS (Search Page)
   ======================================== */
#distance-filters {
  margin-bottom: 20px;
}

#distance-filters .distance-option {
  background-color: #f0f0f0;
  color: #333;
  padding: 6px 10px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 14px;
  display: inline-block;
  transition: background-color 0.3s ease;
  text-decoration: underline;
  font-weight: 500;
}

#distance-filters .distance-option:hover {
  background-color: #d6d6d6;
}

#distance-filters .distance-option.active {
  background-color: var(--navy);
  color: white;
}

/* ========================================
   CLINIC LIST FIXES (BuddyBoss Conflicts)
   ======================================== */
.clinics-list {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 20px !important;
  clear: both !important;
}

.clinics-header {
  margin-bottom: 30px !important;
  clear: both !important;
}

.pmpro_member_directory .pmpro_member_directory_level img,
.pmpro_member_directory .pmpro_member_profile_photo img {
  max-width: 150px !important;
  height: auto !important;
  object-fit: cover !important;
}

.pmpro_member_directory .pmpro_member_profile_photo {
  width: 150px !important;
  height: 150px !important;
  overflow: hidden !important;
}

/* ========================================
   HOMEPAGE DOCTOR SLIDER
   ======================================== */
#doctor-container .swiper-wrapper {
    display: flex;
}

#doctor-container .swiper-slide {
    background: var(--light-orange);
    padding: 40px;
    border-radius: 0;
    text-align: left;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
}

#doctor-container .doctoravatar {
    max-width: 100%;
    height: auto;
    border-radius: 0px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#doctor-container .doctor-name {
    font-size: 20px;
    color: var(--text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
}

#doctor-container .doctor-distance {
    font-size: 14px;
    color: var(--text);
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.4px;
}

#doctor-container .swiper-slide > p:last-child {
    margin-top: auto;
    margin-bottom: 0;
}

#doctor-container .view-profile-button {
    display: flex;
    width: fit-content;
    gap: 10px;
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--orange);
    color: var(--text);
    padding: 16px 35px;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 1em;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
}

#doctor-container .view-profile-button:hover {
    transition: all 0.3s ease;
    background-color: var(--dark-orange);
    color: white;
}

#doctor-container .view-profile-button:hover svg path {
    stroke: white;
}

#doctor-container .custom-swiper-prev,
#doctor-container .custom-swiper-next {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#doctor-container .custom-swiper-prev img,
#doctor-container .custom-swiper-next img {
    width: 100%;
    height: auto;
}

#doctor-container .custom-swiper-prev {
    left: -10px;
}

#doctor-container .custom-swiper-next {
    right: -16px;
}

#doctor-container .swiper-horizontal > .swiper-pagination-bullets {
    /*bottom: 11px;*/
    display: none;
}

#doctor-container .swiper-pagination-bullet {
    background: white;
    opacity: 0.9;
    width: 10px;
    height: 10px;
}

#doctor-container .swiper-pagination-bullet-active {
    background: var(--cyan) !important;
}

/* ========================================
   TAGIFY STYLING (My Clinics, Profile)
   ======================================== */
.tagify {
  border: none;
  background-color: white;
  border-radius: 0;
  padding: 6px 8px;
  min-height: 44px;
  font-family: inherit;
}

.tagify__tag {
  background-color: var(--navy);
  color: white;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 14px;
  margin: 3px;
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
}

.tagify__tag__removeBtn {
  background: none;
  color: var(--cyan);
  font-weight: bold;
  margin-left: 8px;
  cursor: pointer;
}

.tagify__tag:hover {
  background-color: var(--navy);
}

.tagify__input {
  color: var(--text);
  padding: 6px;
  font-size: 14px;
  text-decoration: none !important;
}

.tagify__tag-text {
  font-weight: 500;
  text-decoration: none !important;
}

.tagify *,
.tagify__tag,
.tagify__tag * {
  text-decoration: none !important;
}

.tagify__tag--invalid,
.tagify__tag--readonly {
  text-decoration: none !important;
  opacity: 1 !important;
  color: inherit !important;
}

tags tag {
  text-decoration: none !important;
  color: inherit !important;
}

/* ========================================
   OPERATING HOURS TABLE STYLING
   ======================================== */
#hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  border: none;
  font-family: inherit;
}

#hours-table th,
#hours-table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #e0e0e0;
  text-decoration: none !important;
}

#hours-table th {
  background-color: var(--navy);
  color: white;
  font-weight: 600;
}

#hours-table td {
    background: white;
}

#hours-table tr td:first-of-type {
    border-left: none !important;
}

#hours-table tr td:last-of-type {
    border-right: none !important;
}

#hours-table tr:last-of-type td {
    border-bottom: none !important;
}

#hours-table td input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--bb-content-border-color);
  border-radius: 0px;
  font-family: inherit;
  color: var(--navy);
  text-decoration: none !important;
}

#hours-table tr:hover td {
  background-color: #f2f9fa;
}

/* ========================================
   FORM LABEL + HINT STYLING
   ======================================== */
.pmpro_form_label {
  font-weight: bold;
  color: var(--navy);
  text-decoration: none !important;
}

.pmpro_form_hint {
  font-size: 13px;
  color: #666;
  margin-top: 5px;
  text-decoration: none !important;
}

/* ========================================
   PHONE INPUT VALIDATION
   ======================================== */
.phone-input-container {
    margin-bottom: 1rem;
}

.phone-hidden {
    display: none;
}

.error {
    border-color: red !important;
}

.iti {
    width: 100%;
}

.validation-message {
    color: red;
    font-size: 0.8rem;
    margin-top: 5px;
    display: none;
}

.validation-message.visible {
    display: block;
}

/* ========================================
   LOCATION MODAL
   ======================================== */

.modal-content {
    border-radius: 0 !important;
}

.modal-content h2 {
    font-size: 30px;
}

.modal-overlay.active[id*="consultationModal"] .modal-content {
    background: var(--light-orange) !important;
}

.modal-overlay.active[id*="consultationModal"] form input,
.modal-overlay.active[id*="consultationModal"] form textarea {
    border-radius: 0 !important;
    border: none !important;
    color: var(--text);
    font-size: 14px;
}

.modal-overlay.active[id*="consultationModal"] form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10px;
}

.modal-overlay.active[id*="consultationModal"] form textarea {
    width: 100%;
}

.modal-overlay.active[id*="consultationModal"] form input:not([type="checkbox"]) {
    width: calc(50% - 5px) !important;
}

#locationModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#locationModalContent {
    background-color: white;
    padding: 2rem;
    border-radius: 0;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#locationModalContent h3 {
    margin-top: 0;
    color: var(--navy);
    font-size: 1.5rem;
    font-weight: 600;
}

#locationModalContent p {
    color: #7f8c8d;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

#citySelect {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 0;
    background-color: #f9f9f9;
    color: #333;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    transition: all 0.2s ease;
    cursor: pointer;
    height: unset;
    margin-bottom: 20px;
}

#citySelect:focus {
    outline: none;
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    background-color: white;
}

#citySelect option {
    padding: 12px;
    background: white;
}

#locationModal button {
    border: none;
    font-size: 14px;
    margin-right: 10px;
}

@media (max-width: 480px) {
    #locationModalContent {
        padding: 1.5rem;
        width: 95%;
    }

    #locationModalContent h3 {
        font-size: 1.3rem;
    }

    #citySelect {
        padding: 10px 14px;
    }

    #locationModalContent button {
        padding: 8px 16px;
    }

    .custom-modal {
        z-index: 10;
        padding: 100px 20px;
    }
}

/* ========================================
   SEARCH PROVIDERS LAYOUT (DEFAULT)
   ======================================== */

.pmpro:not(.directory-only) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 50px;
}

.pmpro_member_directory_before {
    width: 100%;
    order: 1;
}

.pmpro_member_directory_before #distance-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.pmpro_member_directory_before .search-widget {
    width: 100%;
}

.pmpro:not(.directory-only) .pmpro_member_directory.pmpro_member_directory-div {
    width: calc(42% - 25px);
    max-height: 75vh;
    overflow: scroll;
    order: 3;
}

.pmpro_member_directory_after {
    height: 75vh;
    width: calc(58% - 25px);
    order: 2;
}

.pmpro_member_directory-div .pmpro_card:first-of-type {
    margin-top: 0 !important;
}

.pmpro_member_directory_before > p:nth-child(2) {
    display: none;
}

/* ========================================
   PMPRO MEMBER DIRECTORY (Provider Cards)
   PMPRO MY ACCOUNT STYLES
   PMPRO SINGLE PROFILE PAGE