/*
 Theme Name:   Kosa Child
 Theme URI:    http://kosa.bold-themes.com
 Description:  Kosa child theme
 Author:       BoldThemes
 Author URI:   http://bold-themes.com
 Template:     kosa
 Version:      1.0.0
 Tags:         one-column, right-sidebar, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  kosa-child
*/


/* Theme customization starts here
-------------------------------------------------------------- */

/* =========================================================
   THE SHOPS - CUSTOM STYLES (CLEAN VERSION, CONSOLIDATED)
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL SINGLE PAGE BACKGROUND
--------------------------------------------------------- */

body.single,
body.single .site-wrapper,
body.single-post,
body.single-gd-place {
  background: #f5f5f5 !important;
}

/* ---------------------------------------------------------
   BUTTON + BASE STYLES
--------------------------------------------------------- */

.bt_bb_button.bt_bb_style_outline .bt_bb_link {
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  background-color: transparent !important;
}
.bt_bb_button.bt_bb_style_outline .bt_bb_link:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Smaller text for subheadline */
.bt_bb_size_normal.bt_bb_headline.bt_bb_subheadline
  .bt_bb_headline_subheadline {
  font-size: 1rem;
  line-height: 1.65;
  margin-top: 1em;
}

/* Extra padding on right for "The Shops Advantage" column */
.advantage-column .bt_bb_column_content_inner {
  padding-right: 80px !important;
}
@media (max-width: 1024px) {
  .advantage-column .bt_bb_column_content_inner {
    padding-right: 40px !important;
  }
}
@media (max-width: 768px) {
  .advantage-column .bt_bb_column_content_inner {
    padding-right: 20px !important;
  }
}

/* Smaller headline styling */
.smaller-headline .bt_bb_headline_tag {
  font-size: 48px !important;
  line-height: 1.25 !important;
}
.smaller-headline .bt_bb_headline_subheadline {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* ---------------------------------------------------------
   SHOPS ACCORDION
--------------------------------------------------------- */

.bt_bb_raw_content section.shops-accordion,
section.shops-accordion {
  --accent: #111;
  max-width: 920px;
  margin: 0 auto;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.bt_bb_raw_content section.shops-accordion .shops-acc-item,
section.shops-accordion .shops-acc-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0.75rem 0;
}

.bt_bb_raw_content section.shops-accordion .shops-acc-item > summary,
section.shops-accordion .shops-acc-item > summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px 0;
  list-style: none !important;
}
.bt_bb_raw_content section.shops-accordion .shops-acc-item > summary::-webkit-details-marker,
section.shops-accordion .shops-acc-item > summary::-webkit-details-marker {
  display: none !important;
}
.bt_bb_raw_content section.shops-accordion .shops-acc-item > summary::marker,
section.shops-accordion .shops-acc-item > summary::marker {
  content: "";
}

.bt_bb_raw_content section.shops-accordion .shops-acc-item-title,
section.shops-accordion .shops-acc-item-title {
  font-weight: 700;
  line-height: 1.35;
  margin-right: 10px;
  flex: 1 1 auto;
}

.bt_bb_raw_content section.shops-accordion .shops-acc-icon,
section.shops-accordion .shops-acc-icon {
  flex: 0 0 auto;
  width: 28px;
  text-align: right;
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
  position: relative;
}

.bt_bb_raw_content section.shops-accordion .shops-acc-icon::before,
section.shops-accordion .shops-acc-icon::before {
  content: "+";
  position: relative;
}

.bt_bb_raw_content
  section.shops-accordion
  .shops-acc-item[open]
  > summary
  .shops-acc-icon::before,
section.shops-accordion
  .shops-acc-item[open]
  > summary
  .shops-acc-icon::before {
  content: "-";
}

.bt_bb_raw_content section.shops-accordion .shops-acc-content,
section.shops-accordion .shops-acc-content {
  padding: 0.5rem 0 0.75rem;
}

/* ---------------------------------------------------------
   LEASING INFO BUTTON
--------------------------------------------------------- */

.leasing-info-btn.bt_bb_button.bt_bb_style_outline .bt_bb_link {
  color: #000 !important;
  border: 2px solid #000 !important;
  background-color: transparent !important;
  transition: all 0.25s ease-in-out;
}
.leasing-info-btn.bt_bb_button.bt_bb_style_outline .bt_bb_link:hover {
  color: #fff !important;
  background-color: #000 !important;
  border-color: #000 !important;
}

/* ---------------------------------------------------------
   COMPARISON TABLE
--------------------------------------------------------- */

.bt_bb_price_item_title,
.bt_bb_price_item_price {
  font-size: 16px !important;
  line-height: 1.4 !important;
}

.bt_bb_price_item_title::after {
  width: 20px !important;
  margin: 0 auto;
  display: block;
}

.bt_bb_price_item_title_price .bt_bb_price_item_title {
  position: relative;
  display: inline-block;
}

.bt_bb_price_item_price {
  display: inline-block;
  min-width: 150px;
  text-align: right;
}

/* ---------------------------------------------------------
   ICON SIZE HELPERS
--------------------------------------------------------- */

.smaller-icon .bt_bb_icon_holder::before {
  font-size: 26px !important;
  line-height: 1.2 !important;
  vertical-align: top !important;
}

.smaller-stuff .bt_bb_icon_holder::before {
  font-size: 60px !important;
  line-height: 1.2 !important;
  vertical-align: top !important;
  padding-right: 8px !important;
}

/* ---------------------------------------------------------
   EASY APPOINTMENTS
--------------------------------------------------------- */

.ea-label {
  display: none !important;
}

#book-a-tour .ea-bootstrap a.time-value.selected-time,
#book-a-tour a.time-value.selected-time,
.ea-bootstrap a.time-value.selected-time,
a.time-value.selected-time {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

#book-a-tour a.time-value.selected-time:link,
#book-a-tour a.time-value.selected-time:visited,
#book-a-tour a.time-value.selected-time:hover,
#book-a-tour a.time-value.selected-time:focus,
#book-a-tour a.time-value.selected-time:active,
.ea-bootstrap a.time-value.selected-time:link,
.ea-bootstrap a.time-value.selected-time:visited,
.ea-bootstrap a.time-value.selected-time:hover,
.ea-bootstrap a.time-value.selected-time:focus,
.ea-bootstrap a.time-value.selected-time:active,
a.time-value.selected-time:link,
a.time-value.selected-time:visited,
a.time-value.selected-time:hover,
a.time-value.selected-time:focus,
a.time-value.selected-time:active {
  color: #fff !important;
  text-decoration: none !important;
}

a.time-value.selected-time {
  background-image: none !important;
}

.ea-standard .section {
  color: #000 !important;
}

.ea-standard .step {
  width: 100%;
  padding-top: 7px;
  padding-bottom: 20px !important;
  padding-left: 7px;
  padding-right: 7px;
  position: relative;
}

.ea-helper-heading {
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
  font-size: 1.2rem !important;
}

.ea-btn.ea-submit,
.ea-btn.ea-cancel {
  background-color: #000 !important;
  color: #fff !important;
  padding: 12px 24px !important;
  border: none !important;
  border-radius: 0;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* ---------------------------------------------------------
   HIDE / TWEAK SOME ELEMENTS
--------------------------------------------------------- */

.row-price {
  display: none !important;
}

.directorist-search-top__title,
.directorist-search-top__subtitle {
  display: none !important;
}

.directorist-search-contents {
  background-size: cover;
  padding: 20px 0 120px;
}

.directorist-listing-card-posted-on {
  display: none !important;
}

.bt-content a {
  color: #003366 !important;
}

body.single-post h2 {
  font-size: 1.8rem;
  line-height: 1.6em;
  font-weight: 400;
}

.bt-comments-content {
  display: none !important;
}

/* ---------------------------------------------------------
   SIMPLE BANNER (PROFILE HEADER)
--------------------------------------------------------- */

.ts-simple-banner {
  width: 100%;
  height: 125px;
  background: #ffffff;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
}

.ts-simple-banner-inner {
  margin-left: 30px;
}

.ts-banner-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700 !important;
  color: #000;
  line-height: 1em;
}

.ts-banner-tagline {
  margin-top: 4px;
  letter-spacing: 3px !important;
}

.ts-banner-tagline .geodir-field-label,
.ts-banner-tagline .geodir-field-icon {
  display: none;
}

.ts-banner-tagline .geodir-field-value {
  font-size: 16px;
  font-weight: 400;
  color: #555;
}

@media (max-width: 480px) {
  .ts-simple-banner {
    height: auto;
    padding: 20px 0;
  }

  .ts-simple-banner-inner {
    margin-left: 20px;
  }

  .ts-banner-title {
    font-size: 26px;
  }

  .ts-banner-tagline .geodir-field-value {
    font-size: 14px;
  }
}

/* =========================================================
   THE SHOPS TWO-CARD LAYOUT (SINGLE BEAUTY PRO)
   ========================================================= */

.ts-two-card-section {
  background: #f5f5f5;
  padding-top: 40px;
  padding-bottom: 40px;
  max-width: 1600px;
  margin: 0 auto;
}

.ts-two-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 30px;
  margin-left: 30px;
  margin-right: 40px;
}

/* Base card styling – peach theme, square corners */
.ts-card {
  background: #fff4ee;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

/* Left card top section */
.ts-card-left-top {
  background: #fbbda5;
  padding: 20px;
}

.ts-card-left-top-inner {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

/* Columns inside left card */
.ts-card-left-col {
  display: flex;
  flex-direction: column;
}

/* Left column: LOGO + BOOK NOW */
.ts-card-left-col-logo {
  flex: 0 0 320px;
  max-width: 320px;
  padding-right: 0; /* remove inner gap on the right */
}

/* Right column: owner + contact + socials */
.ts-card-left-col-contact {
  flex: 1;
}

/* PROFILE IMAGE WRAP – make it fill the entire left column width */
.ts-card-left-col-logo .ts-profile-image-wrap,
.ts-card-left-col-logo .ts-profile-image-wrap .geodir-post-slider,
.ts-card-left-col-logo .ts-profile-image-wrap .geodir-image-container,
.ts-card-left-col-logo .ts-profile-image-wrap .geodir-images,
.ts-card-left-col-logo .ts-profile-image-wrap .carousel-item {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill 16x9 ratio constraints so height is natural */
.ts-card-left-col-logo .ts-profile-image-wrap .ratio,
.ts-card-left-col-logo .ts-profile-image-wrap .ratio-16x9,
.ts-card-left-col-logo .ts-profile-image-wrap .embed-responsive {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Actual headshot image – full-width, square corners */
.ts-card-left-col-logo .ts-profile-image-wrap img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Owner name */
.ts-owner-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #111111;
}

/* Owner divider */
.ts-owner-divider {
  width: 95%;
  max-width: 95%;
  height: 4px;
  background: #000000;
  margin: 10px 0 15px;
}

/* Contact list */
.ts-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ts-contact-row {
  display: flex;
  align-items: flex-start;
}

/* Contact icons */
.ts-contact-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 8px;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}

/* Contact text */
.ts-contact-text {
  font-size: 16px !important;
  line-height: 1.45 !important;
  color: #111111;
}
.ts-contact-address .ts-contact-text {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* Social icons */
.ts-social-icons {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ts-social-link img {
  width: 22px;
  height: 22px;
  display: block;
}

/* Left card middle + bottom */
.ts-card-left-middle,
.ts-card-left-bottom {
  padding: 20px;
  background-color: #fff4ee;
}

/* Right card */
.ts-card-right {
  padding: 0;
}

/* MOBILE: Stack left columns (logo on top, contact below) */
@media (max-width: 991.98px) {
  .ts-card-left-top-inner {
    flex-direction: column;
  }

  .ts-card-left-col-logo,
  .ts-card-left-col-contact {
    width: 100%;
    max-width: 100%;
  }

  .ts-card-left-col-contact {
    margin-top: 20px;
  }
}

/* MOBILE: Stack the left/right cards (whole layout) */
@media screen and (max-width: 900px) {
  .ts-two-card-inner {
    grid-template-columns: 1fr;
    margin-left: 20px;
    margin-right: 20px;
  }

  .ts-testimonials-track .comment {
    flex: 0 0 220px;
  }

  .ts-gallery-track img.ts-gallery-image {
    width: 180px;
    height: 180px;
  }
}

/* =========================================================
   SECTION TITLE BARS (ABOUT, SERVICES, LOCATION, HOURS, REVIEWS)
   ========================================================= */

.ts-about-title-bar,
.ts-right-title-bar,
.ts-bh-title-bar,
#ts-review-section .ts-card-title-bar {
  height: 50px;
  background-color: #f26f63;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding-left: 30px;
  border-radius: 0;
}

/* =========================================================
   SERVICES – RIGHT CARD
   ========================================================= */

.ts-services-section {
  background-color: #fff4ee;
  padding: 30px !important;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/* Inner white card */
.ts-services-box {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Service row */
.ts-service-row {
  display: flex;
  align-items: flex-end;
  padding: 6px 0;
}

/* Service name */
.ts-service-name {
  padding-left: 20px;
  font-size: 15px;
  font-weight: 500;
  color: #222;
}

/* Dotted line */
.ts-service-dots {
  flex: 1;
  border-bottom: 1px dotted #d0d0d0;
  margin: 0 12px;
}

/* Price */
.ts-service-price {
  padding-right: 20px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
}

/* Last row spacing fix */
.ts-service-row:last-child {
  padding-bottom: 0;
}

/* Services intro text */
.ts-services-intro {
  font-size: 15px;
  line-height: 1.55;
  color: #333;
  margin-bottom: 18px;
  padding-left: 20px;
  padding-right: 20px;
}

/* =========================================================
   LIFESTYLE IMAGE SECTION
   ========================================================= */

.ts-lifestyle-section {
  background-color: #fff4ee;
  padding: 0 30px 30px 30px;
}

.ts-lifestyle-image-wrap {
  max-width: 100%;
}

.ts-lifestyle-image-wrap img.ts-lifestyle-image {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   GEODIRECTORY ADDRESS FORMAT
   ========================================================= */

.geodir_post_meta.geodir-field-address br {
  display: none !important;
}

.geodir_post_meta.geodir-field-address [itemprop="addressCountry"] {
  display: none !important;
}

.geodir_post_meta.geodir-field-address span[itemprop] {
  display: inline;
}

.geodir_post_meta.geodir-field-address span[itemprop="streetAddress"] {
  display: block;
  margin-bottom: 2px;
}

.geodir_post_meta.geodir-field-address span[itemprop="addressLocality"]::after {
  content: ",";
  margin-right: 4px;
}
.geodir_post_meta.geodir-field-address span[itemprop="addressRegion"]::after {
  content: "";
  margin-right: 4px;
}

/* =========================================================
   TRUST STATEMENT
   ========================================================= */

.ts-trust-statement {
  padding-top: 30px !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: #222;
  font-style: italic !important;
  font-weight: 600 !important;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

/* =========================================================
   OUR WORKS GALLERY
   ========================================================= */

.ts-gallery-live-card {
  grid-column: 1 / -1;
  width: 100%;
}

.ts-gallery-card {
  background-color: #ffffff;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 0;
}

.ts-gallery-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  padding-bottom: 20px !important;
}

.ts-gallery-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ts-gallery-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.ts-gallery-image,
.ts-gallery-track img.ts-gallery-image {
  width: 220px;
  height: 220px;
  object-fit: cover;
  flex: 0 0 auto;
  border-radius: 0;
  display: block;
}

.ts-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 28px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.ts-gallery-nav-prev {
  left: 10px;
}
.ts-gallery-nav-next {
  right: 10px;
}

.ts-gallery-nav:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* =========================================================
   TESTIMONIALS - CARD + SCROLLER
   ========================================================= */

.ts-testimonials-card {
  grid-column: 1 / -1;
  width: 100%;
  background: #fff4ee;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 0;
  padding: 30px;
  position: relative;
}

.ts-testimonials-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 0 20px 0 !important;
}

/* Scroll container for reviews */
.ts-testimonials-track {
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 40px;
}

/* GD or fake reviews list */
.ts-testimonials-track .comment-list,
.ts-testimonials-track .commentlist,
.ts-testimonials-track ol {
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Each review box */
.ts-testimonials-track .comment {
  flex: 0 0 225px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 0;
  padding: 20px 22px;
  box-sizing: border-box;
  min-height: 25px;
}

/* Star rating container */
.ts-testimonials-track .gd-rating,
.ts-testimonials-track .gd-stars,
.ts-testimonials-track .geodir-rating,
.ts-testimonials-track .gd-rating-wrap {
  margin-bottom: 8px;
}

/* Review text */
.ts-testimonials-track .comment p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Author/meta */
.ts-testimonials-track .gd-review-meta,
.ts-testimonials-track .comment .comment-author {
  font-size: 12px;
  color: #777;
}

/* Empty state */
.ts-testimonials-empty {
  display: none;
  font-size: 14px;
  color: #666;
  padding-top: 10px;
}

/* Review form inside testimonials card (if used) */
.ts-testimonials-form {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

/* Testimonial arrows */
.ts-testimonials-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.ts-testimonials-prev {
  left: 10px;
}
.ts-testimonials-next {
  right: 10px;
}

.ts-testimonials-nav:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Testimonials header: title on left, button on right */
.ts-testimonials-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Leave a Review button (pill is intentional) */
.ts-leave-review-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

/* Smooth scroll for anchor jumps */
html {
  scroll-behavior: smooth;
}

/* Testimonials-related cards in the grid */
.ts-gallery-live-card,
.ts-testimonials-card,
.ts-testimonials-form-card {
  width: 100%;
  grid-column: 1 / -1;
}

/* Testimonials form card */
.ts-testimonials-form-card {
  display: block;
  position: relative;
  background-color: #ffffff;
  border-radius: 0;
  padding: 30px;
  margin-top: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.ts-testimonials-form-card input,
.ts-testimonials-form-card textarea {
  border-radius: 0;
}

/* Remove top spacing above review form */
#ts-review-section .comment-respond,
#ts-review-section #reply-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#ts-review-section h3.comment-reply-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Style the Leave a Review title */
#ts-review-section #reply-title,
#ts-review-section #reply-title .gd-comment-review-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1.3;
}

/* Remove extra space from the empty testimonials header */
#ts-review-section .ts-testimonials-form-header {
  margin: 0;
  padding: 0;
}

#ts-review-section .ts-testimonials-form-header .ts-testimonials-title {
  margin: 0;
  padding: 0;
  display: none;
}

/* Make sure the respond block doesn't add extra space on top */
#ts-review-section #respond.comment-respond {
  margin-top: 0;
  padding-top: 0;
}

/* Limit styling to the testimonials card only */
.ts-testimonials-track .geodir-comments-area {
  padding: 0;
}

/* Optional: tighten spacing around the review list itself */
.ts-testimonials-track .commentlist-wrap,
.ts-testimonials-track ol.comment-list {
  margin: 0;
  padding: 0;
}

/* Make each review feel like a “card” */
.ts-testimonials-track ol.comment-list > li.comment {
  list-style: none;
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Ensure the GD rating stars show nicely in each review */
.ts-testimonials-track ol.comment-list .gd-rating,
.ts-testimonials-track ol.comment-list .gd-rating-wrap {
  display: inline-flex;
  margin-bottom: 6px;
}

/* =========================================================
   BOTTOM ROW CARDS (MAP / HOURS / MINI GALLERY / REVIEW FORM)
   ========================================================= */

.ts-bottom-left-card,
.ts-testimonials-form-card {
  width: auto;
  grid-column: auto;
}

/* Content body styling */
.ts-bottom-card-body {
  background-color: #fff4ee;
  padding: 30px;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/* Rating summary layout */
.ts-rating-summary-wrapper {
  margin-top: 30px;
}

.ts-rating-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.ts-rating-col {
  box-sizing: border-box;
}

.ts-rating-col-aggregate,
.ts-rating-col-breakdown {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .ts-rating-col-aggregate {
    flex: 0 0 260px;
    max-width: 260px;
  }
  .ts-rating-col-breakdown {
    flex: 1 1 calc(100% - 260px);
    max-width: 100%;
  }
}

/* BUSINESS HOURS card wrapper – square corners */
.ts-bottom-card-body.ts-bottom-card-body-hours {
  background: #ffffff !important;
  padding: 1.75rem 2rem !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.ts-bottom-card-body-hours .gd-bh-open-hours {
  background: #ffffff !important;
  border-radius: 0 !important;
  padding: 1rem 1.25rem !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Row layout for hours */
.ts-bottom-card-body-hours .gd-bh-open-hours .gd-bh-days-list {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0.4rem 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ts-bottom-card-body-hours
  .gd-bh-open-hours
  .gd-bh-days-list:not(:last-child) {
  border-bottom: 1px dotted rgba(0, 0, 0, 0.35) !important;
}

.ts-bottom-left-card {
  padding-bottom: 0px;
}

/* GALLERY UNDER BUSINESS HOURS */

.ts-bottom-card-gallery {
  margin-top: 30px;
}

.ts-bottom-card-gallery ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Turn the GD/Bootstrap row into a 2x2 grid with 30px gutters */
.ts-bottom-left-card .geodir-images {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  row-gap: 30px !important;
  column-gap: 30px !important;
  margin-top: 30px;
}

/* Kill bootstrap column spacing */
.ts-bottom-left-card .geodir-images > .col {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Remove internal spacing & rounding from the card wrapper */
.ts-bottom-left-card .geodir-images .card {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}

/* Remove any rounding coming from ratio / anchor */
.ts-bottom-left-card .geodir-images .ratio,
.ts-bottom-left-card .geodir-images a {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  height: 100%;
}

/* Images fill their cell and have square corners */
.ts-bottom-left-card .geodir-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
}

/* Ensure bottom cards stack nicely on mobile */
@media screen and (max-width: 900px) {
  .ts-bottom-left-card,
  .ts-testimonials-form-card {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   REVIEWS CARD / COMMENTS AREA
   ========================================================= */

/* Wrap the comments block like other cards */
#comments {
  border: 1px solid #ddd;
  border-radius: 0;
  overflow: hidden;
}

/* Inner spacing */
#comments .comment-list,
#comments #respond {
  padding: 20px 30px 30px;
}

/* Padding around rating summary row */
#comments .row.gy-4.mb-5 {
  padding: 20px 20px 0 20px;
}

/* Remove stray text nodes in right-side column */
#comments .row.gy-4.mb-5 .col-sm-8 {
  font-size: 0 !important;
}
#comments .row.gy-4.mb-5 .col-sm-8 .ts-rating-side-summary {
  font-size: initial !important;
}

#comments .row.gy-4.mb-5 .col-sm-8::before,
#comments .row.gy-4.mb-5 .col-sm-8::after {
  content: none !important;
}

/* Make GD review list scrollable */
#comments .commentlist {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 10px;
  padding-top: 10px;
}

/* Outer review section card (matching other sections) */
#ts-review-section {
  border: 1px solid #ddd;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
}

/* Content area padding below the REVIEWS bar */
#ts-review-section .ts-review-content {
  padding: 20px 30px 30px;
}

/* REVIEW SUBMIT BUTTON */
#ts-review-section input.submit {
  background-color: #1d4ea8 !important;
  border-color: #1d4ea8 !important;
  color: #ffffff !important;
}

#ts-review-section input.submit:hover {
  background-color: #3993d5 !important;
  border-color: #3993d5 !important;
}

/* Rating side summary (right column) */
.ts-rating-side-summary {
  border-radius: 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.04),
    rgba(37, 99, 235, 0.06)
  );
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.ts-rating-side-summary .ts-rating-side-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #0f172a;
}

.ts-rating-side-summary .ts-rating-side-text {
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
  color: #4b5563;
}

/* “Leave a Review” button (pill is intentional) */
.ts-rating-side-summary .ts-rating-side-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(37, 99, 235, 0.8);
  color: #1d4ed8;
  background: #eff6ff;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease,
    transform 120ms ease;
}

.ts-rating-side-summary .ts-rating-side-btn:hover {
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

/* Individual review cards – square */
.geodir-single-reviews-container .commentlist .card {
  border-radius: 0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   ARCHIVE ITEM CARD – LIST LAYOUT
   ========================================================= */

.ts-listing-card-left img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  margin-bottom: 0.75em;
}

.ts-listing-contact {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.9;
}

.ts-listing-card-right {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.ts-listing-title {
  margin: 0 0 0.2em;
  font-size: 1.1rem;
}

.ts-listing-title a {
  text-decoration: none;
}

.ts-listing-actions {
  margin-top: 0.75em;
}

/* Simple button (pill – intentional) */
.ts-btn.ts-btn-primary {
  display: inline-block;
  padding: 0.55em 1.3em;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid currentColor;
}

/* =========================================================
   LAYOUT: SIDEBAR / CONTENT
   ========================================================= */

/* Hide the Kosa sidebar completely */
aside.btSidebar {
  display: none !important;
}

/* Make the main content area stretch full width */
.btContentWrap.btWithSidebar .bt-content-holder .bt-content {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* =========================================================
   HERO SECTION WITH BACKGROUND (ARCHIVE HERO)
   ========================================================= */

.ts-archive-hero {
  background-image: url("https://theshops.pro/wp-content/uploads/2025/11/find-beauty-salon-hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 20px;
  text-align: center;
  border-radius: 0;
  margin-bottom: 40px;
  position: relative;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 370px;
}

/* BANNER RATING UNDER TAGLINE */

.ts-banner-rating {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ts-banner-rating .ts-rating--has-reviews {
  display: inline-flex;
  align-items: center;
}

.ts-banner-rating--empty {
  font-size: 16px;
}

.ts-rating-stars--empty {
  font-size: 18px;
  letter-spacing: 2px;
  color: #c7c7c7;
}

.ts-rating-text--empty {
  font-size: 10px;
  color: #888888;
}

.ts-banner-rating .ts-rating-text--empty,
.ts-banner-rating .gd-rating-text,
.ts-banner-rating .gd-rating-average,
.ts-banner-rating .gd-rating-count {
  font-size: 10px !important;
  line-height: 1.2;
  opacity: 0.75;
}

/* Archive item wrapper */
.ts-archive-item {
  padding: 15px 20px;
  border-bottom: none !important;
  max-width: 900px;
  margin: 0 auto 15px;
}

/* =========================================================
   BEAUTY PROS ARCHIVE – HERO + RESULTS LAYOUT
   ========================================================= */

body.post-type-archive-gd_beauty_pros .ts-archive-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 370px;
  padding: 0 20px;
  text-align: center;
}

/* Hero title + text */
body.post-type-archive-gd_beauty_pros .ts-archive-hero-title {
  color: #ffffff;
  margin-bottom: 15px;
  max-width: 1000px;
  font-size: 3rem;
}

body.post-type-archive-gd_beauty_pros .ts-archive-hero-text {
  color: #ffffff;
  max-width: 750px;
  margin: 0 auto;
  font-size: 1.15rem;
  padding-bottom: 30px;
}

/* Search bar wrapper + white card */
body.post-type-archive-gd_beauty_pros .ts-archive-search {
  width: 100%;
  max-width: 900px;
  margin-bottom: 25px !important;
}

body.post-type-archive-gd_beauty_pros .ts-archive-search-inner {
  background: #ffffff;
  border-radius: 12px;
  padding: 15px 20px;
}

/* Style GD search inside hero */
body.post-type-archive-gd_beauty_pros
  .ts-archive-hero
  .geodir-search
  .form-control {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
}

body.post-type-archive-gd_beauty_pros
  .ts-archive-hero
  .geodir-search
  .input-group-text {
  background: transparent !important;
  border: 0 !important;
}

/* RESULTS WRAP */
body.post-type-archive-gd_beauty_pros .ts-results-wrap {
  max-width: 1800px;
  margin: 40px auto 0;
  padding: 0 20px;
}

/* Top row (notifications + filters) */
body.post-type-archive-gd_beauty_pros .ts-results-top {
  margin-bottom: 20px;
}

/* Archive heading ("Discover Beauty Salons") */
body.post-type-archive-gd_beauty_pros .ts-results-title {
  font-size: 1.8rem;
  margin: 0 0 20px 0;
  font-weight: 600;
}

/* Map + results split row */
body.post-type-archive-gd_beauty_pros .ts-results-map-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  align-items: flex-start;
}

/* Left column – scrollable results */
body.post-type-archive-gd_beauty_pros .ts-results-column {
  flex: 1 1 50%;
  min-width: 300px;
  max-height: 750px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Right column – map */
body.post-type-archive-gd_beauty_pros .ts-map-column {
  flex: 1 1 50%;
  min-width: 300px;
}

/* Stack map/results on smaller screens */
@media (max-width: 900px) {
  body.post-type-archive-gd_beauty_pros .ts-results-map-row {
    flex-wrap: wrap;
  }
  body.post-type-archive-gd_beauty_pros .ts-results-column,
  body.post-type-archive-gd_beauty_pros .ts-map-column {
    flex: 1 1 100%;
    max-height: none;
  }
}

/* Archive footer under the list/map */
body.post-type-archive-gd_beauty_pros .ts-archive-footer {
  margin-top: 60px;
  padding: 50px 20px;
  text-align: center;
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.post-type-archive-gd_beauty_pros .ts-archive-footer-logo {
  max-width: 180px;
  margin: 0 auto 25px auto;
  display: block;
}

body.post-type-archive-gd_beauty_pros .ts-archive-footer-text {
  margin: 0;
  color: #ffffff;
  font-size: 0.95rem;
}

/* Hide GD hints/notifications box on archive */
body.post-type-archive-gd_beauty_pros
  .geodir-notifications
  .alert.alert-info.alert-dismissible,
body.post-type-archive-gd_beauty_pros .geodir-notifications .gd-hints-list,
body.post-type-archive-gd_beauty_pros .geodir-notifications .gd-hints-list li {
  display: none !important;
}

/* Thumbnails: remove rounded corners in the results list */
body.post-type-archive-gd_beauty_pros .ts-results-column .geodir-image-container,
body.post-type-archive-gd_beauty_pros
  .ts-results-column
  .geodir-image-container *,
body.post-type-archive-gd_beauty_pros .ts-results-column .geodir-link-image,
body.post-type-archive-gd_beauty_pros
  .ts-results-column
  .geodir-link-image
  img,
body.post-type-archive-gd_beauty_pros
  .ts-results-column
  img.geodir-image-90 {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* =========================================================
   BEAUTY PROS ARCHIVE ITEM CARD LAYOUT
   ========================================================= */

/* Force each GD result to be full-width inside loop */
body.post-type-archive-gd_beauty_pros .geodir-loop-container > .row > div {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Outer wrapper */
body.post-type-archive-gd_beauty_pros .ts-archive-item {
  padding: 15px 20px;
  border-bottom: none !important;
  max-width: 900px;
  margin: 0 auto 15px;
}

body.post-type-archive-gd_beauty_pros .ts-archive-item:last-child {
  margin-bottom: 0;
}

/* Row layout: logo + text */
body.post-type-archive-gd_beauty_pros .ts-item-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Logo column */
body.post-type-archive-gd_beauty_pros .ts-item-logo {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  overflow: hidden;
  background: #f5f5f5;
}

body.post-type-archive-gd_beauty_pros .ts-item-logo a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

body.post-type-archive-gd_beauty_pros .ts-item-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
}

/* Main text column */
body.post-type-archive-gd_beauty_pros .ts-item-main {
  flex: 1 1 auto;
}

/* Top line: title + rating */
body.post-type-archive-gd_beauty_pros .ts-item-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0;
}

body.post-type-archive-gd_beauty_pros .ts-item-title {
  font-size: 1.1rem;
  margin: 0 !important;
}

body.post-type-archive-gd_beauty_pros .ts-item-rating {
  white-space: nowrap;
}

/* Description / excerpt */
body.post-type-archive-gd_beauty_pros .ts-item-desc {
  font-size: 0.95rem;
  color: #444;
}

body.post-type-archive-gd_beauty_pros
  .ts-item-desc
  .geodir-post-content-container,
body.post-type-archive-gd_beauty_pros .ts-item-desc .geodir_post_meta {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Reset BSUI heading margins inside cards */
body.post-type-archive-gd_beauty_pros .bsui h1,
body.post-type-archive-gd_beauty_pros .bsui .h1,
body.post-type-archive-gd_beauty_pros .bsui h2,
body.post-type-archive-gd_beauty_pros .bsui .h2,
body.post-type-archive-gd_beauty_pros .bsui h3,
body.post-type-archive-gd_beauty_pros .bsui .h3,
body.post-type-archive-gd_beauty_pros .bsui h4,
body.post-type-archive-gd_beauty_pros .bsui .h4,
body.post-type-archive-gd_beauty_pros .bsui h5,
body.post-type-archive-gd_beauty_pros .bsui .h5,
body.post-type-archive-gd_beauty_pros .bsui h6,
body.post-type-archive-gd_beauty_pros .bsui .h6 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Mobile tweaks for archive item */
@media (max-width: 767px) {
  body.post-type-archive-gd_beauty_pros .ts-item-row {
    flex-direction: row;
    align-items: flex-start;
  }
  body.post-type-archive-gd_beauty_pros .ts-item-logo {
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
  }
  body.post-type-archive-gd_beauty_pros .ts-archive-item {
    max-width: 100%;
  }
}

/* =========================================================
   BEAUTY PROS ARCHIVE HERO – MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .ts-archive-hero-title {
    font-size: 1.8rem !important;
    line-height: 1.1 !important;
    margin-top: 20px !important;
    max-width: 80% !important;
  }

  .ts-archive-hero-text {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    margin-top: 0.5rem !important;
  }
}
/* ==========================================
   HEADSHOT HEIGHT FIX – FULL WIDTH + ORIGINAL LENGTH
   ========================================== */

/* Make the profile image area a fixed tall square (like original) */
.ts-card-left-col-logo .ts-profile-image-wrap,
.ts-card-left-col-logo .ts-profile-image-wrap .geodir-post-slider,
.ts-card-left-col-logo .ts-profile-image-wrap .geodir-image-container,
.ts-card-left-col-logo .ts-profile-image-wrap .geodir-images,
.ts-card-left-col-logo .ts-profile-image-wrap .carousel-item,
.ts-card-left-col-logo .ts-profile-image-wrap .ratio,
.ts-card-left-col-logo .ts-profile-image-wrap .ratio-16x9,
.ts-card-left-col-logo .ts-profile-image-wrap .embed-responsive {
  width: 100% !important;
  max-width: 100% !important;
  height: 270px !important;      /* match original image height */
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Image fills that square, keeps it tall */
.ts-card-left-col-logo .ts-profile-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;              /* crop if needed, no distortion */
  border-radius: 0 !important;
  display: block !important;
  margin: 0 !important;
}
/* Style and center the POST REVIEW button */
input#submit.btn.btn-primary,
input.submit.btn.btn-primary,
.gd-reviews-wrap input#submit.btn-primary {
    --bs-btn-color: #fff;              /* WHITE TEXT */
    --bs-btn-bg: #3993d5;
    --bs-btn-border-color: #3993d5;
    --bs-btn-hover-color: #fff;        /* WHITE TEXT ON HOVER */
    --bs-btn-hover-bg: #57a3db;
    --bs-btn-hover-border-color: #4d9ed9;

    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
    color: var(--bs-btn-color) !important;

    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;

    width: auto !important;            /* avoid full-width */
    display: block !important;         /* allows centering */
    margin: 15px auto 0 auto !important; /* CENTERED */
    text-align: center;
}

/* Hover */
input#submit.btn.btn-primary:hover,
input.submit.btn.btn-primary:hover,
.gd-reviews-wrap input#submit.btn-primary:hover {
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
    color: var(--bs-btn-hover-color) !important;
}
/* Style the "Leave a Review" link like the POST REVIEW button */
a.ts-rating-side-btn {
    --bs-btn-color: #fff;                 /* white text */
    --bs-btn-bg: #3993d5;
    --bs-btn-border-color: #3993d5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #57a3db;
    --bs-btn-hover-border-color: #4d9ed9;

    background-color: var(--bs-btn-bg) !important;
    border: 1px solid var(--bs-btn-border-color) !important;
    color: var(--bs-btn-color) !important;

    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;

    /* optional: add spacing if needed */
    margin: 10px 0;
}

/* Hover state */
a.ts-rating-side-btn:hover {
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
    color: var(--bs-btn-hover-color) !important;
}
/* Tone down hover/focus shadow on review buttons */
input#submit.btn.btn-primary:focus,
input#submit.btn.btn-primary:hover,
a.ts-rating-side-btn:focus,
a.ts-rating-side-btn:hover {
    box-shadow: 0 0 4px rgba(48,125,181, 0.25) !important; /* softer shadow */
}
/* ----------------------------------------------------
   BOOK NOW BUTTON — Text perfectly centered
   Static width + animated arrow reveal
----------------------------------------------------- */

.ts-book-btn,
.ts-book-btn:link,
.ts-book-btn:visited,
.ts-book-btn:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* centers text perfectly */
  position: relative;

  background-color: #000;
  color: #fff !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;

  padding: 1.1em 2.4em;      /* SAME before/after hover */
  border-radius: 0;
  min-height: 3rem;
  font-size: 14px;
  font-weight: 700;

  white-space: nowrap;
  margin: 15px auto 0;
  overflow: hidden;          /* hides arrow before slide-in */
  transition: background-color 300ms ease;
}

/* Hover background only */
.ts-book-btn:hover {
  background-color: #0a0a0a;
}

/* ------------------------
   Text (truly centered)
------------------------- */
.ts-book-btn__text {
  position: relative;
  z-index: 2;
  transition: transform 300ms ease;
}

/* ------------------------
   Arrow (absolute, so it
   does NOT affect centering)
------------------------- */
.ts-book-btn__icon {
  font-family: 'IoniconsFilled', sans-serif;
  font-size: 1.05em;
  color: #fff;

  position: absolute;
  /* FINAL POSITION: ~2px after the text */
  right: 1.1em;   /* adjusted so it's visually ~2px from text */
  top: 50%;

  /* START POSITION: hidden inside the text */
  transform: translateY(-50%) translateX(-0.7em);
  opacity: 0;

  transition: transform 300ms ease, opacity 300ms ease;
}


/* Hover: arrow slides in from text area */
.ts-book-btn:hover .ts-book-btn__icon {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Subtle text nudge (optional, purely aesthetic) */
.ts-book-btn:hover .ts-book-btn__text {
  transform: translateX(-0.15rem);
}

/* =========================================================
   Make ALL Bold Builder icon-hover buttons match TS Book Btn
   (black square, white text, arrow slide)
========================================================= */

/* BUTTON BASE */
.bt_bb_button.bt_bb_icon_style_hover.btWithIcon a.bt_bb_link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;

    background-color: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    font-size: 14px;

    padding: 1.1em 2.8em;
    border-radius: 0 !important;
    position: relative;
    overflow: hidden; /* needed for icon animation */
    transition: all 300ms ease;
}

/* TEXT SHIFT ON HOVER */
.bt_bb_button.bt_bb_icon_style_hover.btWithIcon .bt_bb_button_text {
    position: relative;
    z-index: 2;
    transition: transform 300ms ease-out;
}

.bt_bb_button.bt_bb_icon_style_hover.btWithIcon:hover .bt_bb_button_text {
    transform: translateX(-0.2rem);
}

/* ICON ANIMATION (same as ts-book-btn icon logic) */
.bt_bb_button.bt_bb_icon_style_hover.btWithIcon .bt_bb_icon_holder {
    position: absolute;
    top: 50%;

    /* final position: approx 2px past text */
    right: 1.1em;

    font-size: 1.05em;
    color: #fff !important;

    opacity: 0;
    transform: translateY(-50%) translateX(-0.6rem);

    transition: all 300ms ease-out;
}

/* ARROW EMERGES FROM TEXT */
.bt_bb_button.bt_bb_icon_style_hover.btWithIcon:hover .bt_bb_icon_holder {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* MATCH HOVER COLOR */
.bt_bb_button.bt_bb_icon_style_hover.btWithIcon a.bt_bb_link:hover {
    background-color: #111 !important;
    color: #fff !important;
}

/* =========================================================
   TEXT LINK WITH SLIDE-OUT ARROW (not a button)
   Default text black → hover text #3993d5
========================================================= */

.ts-text-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    text-decoration: none !important;
    color: #000 !important;
    font-weight: 600;
    font-size: 15px;

    position: relative;
    overflow: visible;
    cursor: pointer;

    transition: color 250ms ease;
}

/* Slide-left text on hover */
.ts-text-arrow-link__text {
    position: relative;
    transition: transform 250ms ease;
}

/* Arrow animation */
.ts-text-arrow-link__icon {
    font-family: 'IoniconsFilled', sans-serif;
    font-size: 1em;
    line-height: 1;

    /* starting position (hidden inside text) */
    opacity: 0;
    transform: translateX(-0.4rem);
    transition: all 250ms ease-out;

    /* same color as text */
    color: #000;
}

/* HOVER STATE (arrow reveals + text shifts slightly) */
.ts-text-arrow-link:hover {
    color: #3993d5 !important;
}

.ts-text-arrow-link:hover .ts-text-arrow-link__text {
    transform: translateX(-0.2rem);
}

.ts-text-arrow-link:hover .ts-text-arrow-link__icon {
    opacity: 1;
    transform: translateX(0);
    color: #3993d5;
}
/* Text link with slide-out arrow (not a button) */
.ts-text-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  text-decoration: none !important;
  color: #000 !important;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  cursor: pointer;
  transition: color 250ms ease;
}

.ts-text-arrow-link__text {
  position: relative;
  transition: transform 250ms ease;
  text-decoration: underline !important;
}

.ts-text-arrow-link__icon {
  font-family: 'IoniconsFilled', sans-serif;
  font-size: 1em;
  line-height: 1;
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: all 250ms ease-out;
  color: #000;
}

.ts-text-arrow-link:hover {
  color: #3993d5 !important;
}

.ts-text-arrow-link:hover .ts-text-arrow-link__text {
  transform: translateX(-0.2rem);
}

.ts-text-arrow-link:hover .ts-text-arrow-link__icon {
  opacity: 1;
  transform: translateX(0);
  color: #3993d5;
}
/* Make the reviews form section a vertical flex container */
.ts-testimonials-form-content {
    display: flex;
    flex-direction: column;
    height: 100%; /* ensures the bottom push works */
}
/* Push link to bottom right with 20px padding */
.ts-more-pros-link-wrap {
    margin-top: auto;          /* THIS pushes it to the bottom */
    display: flex;
    justify-content: flex-end; /* right aligned */
    padding: 0 20px 20px 20px; /* bottom/right padding */
}

/* Business Customer Login – page-id-4661 */

.page-id-4661 .bt-content-holder {
    display: flex;
    justify-content: center;
}

.page-id-4661 .bt-content {
    width: 100%;
}

/* Centered card layout */
.page-id-4661 .pro-login-wrapper {
    max-width: 460px;
    margin: 6rem auto 5rem;
    padding: 2.75rem 2.25rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* Dark-skin safety (if this page ever uses dark skin) */
.btDarkSkin .page-id-4661 .pro-login-wrapper {
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
}

/* Title + subtitle */
.page-id-4661 .pro-login-title {
    text-align: center;
    font-size: 2.1rem;
    margin: 0 0 0.35em;
}

.page-id-4661 .pro-login-subtitle {
    text-align: center;
    margin: 0 0 1.8rem;
    opacity: 0.8;
}

/* Generic form layout inside wrapper – works with any login plugin */
.page-id-4661 .pro-login-wrapper form {
    margin: 0;
}

.page-id-4661 .pro-login-wrapper form p,
.page-id-4661 .pro-login-wrapper form .form-row,
.page-id-4661 .pro-login-wrapper form .form-group {
    margin-bottom: 1rem;
}

/* Labels */
.page-id-4661 .pro-login-wrapper label {
    display: block;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    opacity: 0.75;
}

/* Text/email/password inputs */
.page-id-4661 .pro-login-wrapper input[type="text"],
.page-id-4661 .pro-login-wrapper input[type="email"],
.page-id-4661 .pro-login-wrapper input[type="password"] {
    width: 100%;
    border-radius: 999px;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #fafafa;
    font-size: 0.95rem;
    line-height: 1.2;
    box-sizing: border-box;
}

.page-id-4661 .pro-login-wrapper input[type="text"]:focus,
.page-id-4661 .pro-login-wrapper input[type="email"]:focus,
.page-id-4661 .pro-login-wrapper input[type="password"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px rgba(212, 169, 119, 0.3);
}

/* Remember me row (checkbox + label) */
.page-id-4661 .pro-login-wrapper .login-remember,
.page-id-4661 .pro-login-wrapper .remember-me,
.page-id-4661 .pro-login-wrapper .form-row-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-top: 0.3rem;
    margin-bottom: 1.4rem;
}

.page-id-4661 .pro-login-wrapper .login-remember label,
.page-id-4661 .pro-login-wrapper .remember-me label,
.page-id-4661 .pro-login-wrapper .form-row-remember label {
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 0 0.4rem;
    opacity: 0.85;
}

.page-id-4661 .pro-login-wrapper .login-remember input[type="checkbox"],
.page-id-4661 .pro-login-wrapper .remember-me input[type="checkbox"],
.page-id-4661 .pro-login-wrapper .form-row-remember input[type="checkbox"] {
    width: auto;
    display: inline-block;
}

/* Submit button */
.page-id-4661 .pro-login-wrapper input[type="submit"],
.page-id-4661 .pro-login-wrapper button[type="submit"] {
    width: 100%;
    border-radius: 999px;
    padding: 0.95rem 1.1rem;
    border: none;
    font-size: 0.95rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    background: var(--accent-color);       /* uses Kosa theme accent */
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.page-id-4661 .pro-login-wrapper input[type="submit"]:hover,
.page-id-4661 .pro-login-wrapper button[type="submit"]:hover {
    background: var(--accent-color-dark);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.page-id-4661 .pro-login-wrapper input[type="submit"]:active,
.page-id-4661 .pro-login-wrapper button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: none;
}

/* “Register your business” footer */
.page-id-4661 .pro-login-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.9;
}

.page-id-4661 .pro-login-footer a {
    font-weight: 500;
    text-decoration: none;
}

.page-id-4661 .pro-login-footer a:hover {
    text-decoration: underline;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .page-id-4661 .pro-login-wrapper {
        margin: 4rem 1.25rem;
        padding: 2rem 1.5rem;
        border-radius: 14px;
    }

    .page-id-4661 .pro-login-title {
        font-size: 1.7rem;
    }
}

/* Hide 'Forgot Password' link in banners for the login page */
.page-id-4661 .btContentWrapIn .pageHeader a,
.page-id-4661 .btContentWrapIn .pageHeadline a,
.page-id-4661 .btPageHeadline a {
    display: none !important;
}
/* Make profile image smaller on Business Customer Login page */
/* Smaller profile image in Business Customer Login dashboard */
body .bsui .rounded-circle {
    width: 100px !important;   /* adjust as needed */
    height: 100px !important;
    object-fit: cover;
}

/* Business Customer Login – simple blue top bar using a gradient */
.page-id-4661 .pro-login-wrapper {
    position: relative !important;
    border-radius: 18px !important;

    /* Top 120px blue, rest white */
    background: linear-gradient(
        to bottom,
        #3993d5 0,
        #3993d5 120px,
        #ffffff 120px,
        #ffffff 100%
    ) !important;

    text-align: center !important;
    padding: 0 32px 32px !important; /* no top padding so the math is clean */
}

/* Title inside the blue bar */
.page-id-4661 .pro-login-title {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 30px 16px 30px !important; /* visually centers it within 120px */
    line-height: 1.2 !important;

    color: #ffffff !important;
    text-align: center !important;
}

/* Subtitle below the blue area, in black */
.page-id-4661 .pro-login-subtitle {
    position: relative !important;
    z-index: 1;
    margin: 8px 0 24px !important;
    color: #000000 !important;
}
/* Move the Business Customer Login title slightly upward */
.page-id-4661 .pro-login-title {
    padding-top: 20px !important;   /* was 30px — moved up by 5px */
    padding-bottom: 40px !important; /* was 30px — compensates evenly */
}

/* Make sure UsersWP profile/cover upload modal sits on top of Kosa header/layout */

#uwp-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998 !important;
}

/* Try common UsersWP modal containers */
.uwp-modal,
.uwp-profile-image-change-modal,
.uwp-profile-banner-change-modal,
.uwp-profile-cover-change-modal {
    position: fixed;
    inset: 0;
    z-index: 99999 !important;
}

/* If the modal uses Bootstrap-style classes */
.modal.uwp-modal,
.modal.uwp-profile-image-change-modal {
    display: block; /* just in case Bootstrap class isn't toggling correctly */
}

/* ================================
   TS Avatar Upload – Global Styling
   Used on: /edit-profile-photo/
   Wrapper: .ts-avatar-upload--wrapper
   ================================ */

/* Center the card and control width */
.ts-avatar-upload--wrapper {
    max-width: 420px;
    margin: 60px auto;
    padding: 32px 28px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    box-sizing: border-box;
}

/* Heading style – similar to login title */
.ts-avatar-upload--wrapper h2 {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* Current avatar area */
.ts-avatar-upload-current {
    text-align: center;
}

.ts-avatar-upload-image img {
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 4px #ffffff, 0 6px 16px rgba(0,0,0,0.12);
    max-width: 150px;
    height: auto;
}

/* Message box (error/success/info) */
.ts-avatar-upload-message {
    margin: 15px 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.4;
}

.ts-avatar-upload-message--success {
    background: #e3f6ea;
    color: #225b36;
    border: 1px solid #b0e1c0;
}

.ts-avatar-upload-message--error {
    background: #fde8e8;
    color: #7c1b1b;
    border: 1px solid #f4b4b4;
}

.ts-avatar-upload-message--info {
    background: #eef1ff;
    color: #28356b;
    border: 1px solid #c5cffd;
}

/* Form layout */
.ts-avatar-upload-form {
    margin-top: 1rem;
}

.ts-avatar-upload-form p {
    margin-bottom: 1rem;
}

/* Label + file input */
.ts-avatar-upload-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
}

#ts_avatar_file {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #d0d0d5;
    font-size: 0.96rem;
    background-color: #fafafa;
}

/* Main action button – blue, rounded, like login button */
.ts-avatar-upload-button {
    display: inline-block;
    width: 100%;
    padding: 10px 16px;
    border-radius: 999px; /* pill / rounded */
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.03em;
    background: #21759b;           /* adjust to match your exact login blue if needed */
    color: #ffffff;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.ts-avatar-upload-button:hover {
    background: #1a5c78;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.ts-avatar-upload-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Small text tweaks */
.ts-avatar-upload--wrapper p {
    font-size: 0.96rem;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .ts-avatar-upload--wrapper {
        margin: 30px 16px;
        padding: 24px 20px;
        border-radius: 12px;
    }
}

/* TS – Match Upload & Save button to outline-primary login-style button */

.ts-avatar-upload-button {
    display: inline-block;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #3993d5;
    background-color: #ffffff;
    color: #3993d5 !important;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s ease;
}

.ts-avatar-upload-button:hover {
    background-color: #3993d5;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Edit Profile link styling to match “Search More Pros →” */

.ts-edit-profile-link-wrapper {
    margin-top: 20px;
}

.ts-edit-profile-link {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #0d6efd;
    text-decoration: none;
    position: relative;
    padding-right: 24px;
    transition: all 0.25s ease;
}

.ts-edit-profile-link::after {
    content: "→";
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.25s ease;
}

.ts-edit-profile-link:hover {
    color: #0a58ca; /* darker blue hover */
}

.ts-edit-profile-link:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* style.css – tighten UWP account layout and align it flush left */

/* Make the account container full-width and flush left */
.uwp-account-class .uwp_page .container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove row gutters inside the account container */
.uwp-account-class .uwp_page .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.uwp-account-class .uwp_page .container > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Just in case any wrapper around the widget has extra padding */
.bt-content-holder .uwp-account-class,
.bt-content-holder .uwp-account-class .uwp_page {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Base state – white button, blue border, dark text */
.bsui .adv-dashboard-new-ad-button,
.adv-dashboard-new-ad-button {
    background-color: #ffffff !important;
    color: #1f1b2d !important;
    border: 1px solid #3993d5 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Hover / focus / active – solid blue, white text, no shadow */
.bsui .adv-dashboard-new-ad-button:hover,
.bsui .adv-dashboard-new-ad-button:focus,
.bsui .adv-dashboard-new-ad-button:active,
.adv-dashboard-new-ad-button:hover,
.adv-dashboard-new-ad-button:focus,
.adv-dashboard-new-ad-button:active {
    background-color: #3993d5 !important;
    color: #ffffff !important;
    border-color: #3993d5 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Fix avatar circle alignment on login screen */
.business-login-avatar img,
#loginform img.avatar,
img.rounded-circle.shadow.border.border-white.border-width-4 {
    display: block;
    margin: 0 auto;
    border-radius: 50% !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 0 0 0 transparent !important; /* no shadow interference */
    padding: 0 !important; /* prevent offset */
}

/* Force profile banner to be only 40px tall */
.uwp-banner-image {
    height: 40px !important;
    object-fit: cover !important;   /* keeps it visually clean */
    width: 100% !important;
}

/* Remove extra spacing below the banner */
.uwp-banner-image + .card-img-overlay {
    height: 40px !important;
    padding: 0 !important;
}

/* Pull everything upward so there's no gap under the banner */
.uwp-banner-image ~ .card-body {
    padding-top: 0.5rem !important;  /* adjust if needed */
}


/* 2. BUT show them on the Account page (and only there) */
.uwp-account-class .fa-camera,
.uwp-account-class .fa-camera-alt {
    display: inline-block !important;
}

/* Move pencil icon down inside the circle */
.uwp-profile-name .btn-circle i {
    position: relative;
    top: 4px;   /* adjust to 1px, 2px, 3px depending on what looks perfect */
    left: 2px !important;
}

/* Make the camera edit button slightly smaller */
.uwp-account-class .uwp-banner-change-icon {
    width: 26px !important;   /* smaller circle */
    height: 26px !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

/* /account/ – shrink the camera circle + move it UP a bit */
.uwp-account-class .uwp-banner-change-icon {
    width: 24px !important;      /* slightly smaller circle */
    height: 24px !important;
    border-radius: 50% !important;
    padding: 0 !important;

    /* visually move the entire circle up */
    transform: translateY(-4px) !important;  /* try -3px or -5px if you want */
}

/* keep the camera icon centered inside the circle */
.uwp-account-class .uwp-banner-change-icon i {
    line-height: 1 !important;
}

/* Only on the account area */
.uwp-account-class i.fas.fa-camera::before,
.uwp-account-class i.fas.fa-camera-alt::before {
    padding-bottom: 10px !important;
}

/* Add space under the "Hide profile from listing" checkbox */
#uwp_hide_from_listing,
.uwp_hide_from_listing {
    margin-bottom: 20px !important;
}

/* Make UWP account form 70% width and centered */
.uwp-account-form.uwp_form {
    max-width: 70% !important;
    margin: 0 auto !important;
}

/* Make the invoices history block 70% width and centered */
.wpinv-history-class.bsui {
    max-width: 70% !important;
    margin: 0 auto !important;
}

/* Make the subscriptions table 70% width and centered */
.table.table-bordered.table-striped {
    max-width: 70% !important;
    margin: 0 auto !important;
}

/* Make the GetPaid billing address form 70% width and centered */
.bsui form {
    max-width: 70% !important;
    margin: 0 auto !important;
}

.uwp-return-dashboard {
    margin-bottom: 10px;
}

/* Add spacing after the Logout item in the UsersWP account menu */
.uwp-account-class .uwp-account-logout {
    display: inline-block;
    padding-bottom: 50px !important;
}

/* Move pencil icon upward slightly without altering the circle button
   (this is the SMALL pencil-in-circle next to the name, keep as-is) */
.uwp-profile-name .btn-circle i.fas.fa-pencil-alt {
    position: relative;
    top: -1px;
}

/* Profile header banner: make it a 40px strip */
.uwp-profile-header-img,
.uwp-profile-header-img .uwp-profile-header-img-src {
    height: 40px !important;
    max-height: 40px !important;
    width: 100% !important;
    display: block !important;
    object-fit: cover !important;
    overflow: hidden !important;
}

/* Add some breathing room below the header area */
.uwp-profile-header {
    margin-bottom: 20px;
}

/* Stack "Return to Dashboard" + avatar nicely */
.uwp-profile-header .uwp-profile-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Return to Dashboard:
   - 30px down from banner
   - 20px gap above avatar */
.uwp-profile-header .uwp-return-dashboard {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}

/* Avatar wrapper is positioning context for pencil icon */
.uwp-profile-header .uwp-profile-avatar-inner {
    position: relative;
}

/* Make UsersWP profile avatar round and overlap banner a bit */
.uwp-profile-header .uwp-profile-avatar-inner img.avatar {
    border-radius: 50% !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    display: block;
    margin: -40px auto 0 auto;  /* overlap banner, no bottom margin */
    width: 150px;
    height: 150px;
    object-fit: cover;
}

/* Pencil icon at bottom of profile image */
.uwp-avatar-pencil-btn {
    position: absolute;
    bottom: 3px;                 /* 3px from bottom edge of avatar */
    left: 50%;
    transform: translateX(-50%); /* centered */

    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;                /* small circle, just bigger than icon */
    border-radius: 50%;
    text-decoration: none;
    color: #000;
    background: transparent;     /* no circle until hover */

    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Pencil icon glyph */
.uwp-avatar-pencil-btn i.fas.fa-pencil-alt {
    font-size: 12px;
    line-height: 1;
}

/* Hover: subtle dark circle around pencil */
.uwp-avatar-pencil-btn:hover {
    background-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.18);
}

/* "Update Profile Image" text – 20px below the avatar */
.uwp-profile-avatar-update-link {
    margin-top: 20px !important;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Text style: black + underline */
.uwp-profile-avatar-update-link .uwp-profile-image-text-link {
    color: #000000 !important;
    text-decoration: underline !important;
    font-weight: 500;
}

.uwp-profile-header .uwp-return-dashboard {
    margin-top: 30px !important;      /* space from banner */
    margin-bottom: 50px !important;   /* increase gap before avatar */
}
/* Match "Edit Profile" link to Update Profile Image link style */
.uwp-profile-avatar-edit-profile-link {
    margin-top: 10px;        /* space between the two links */
    text-align: center;
}

.uwp-profile-avatar-edit-profile-link a {
    color: #000 !important;
    text-decoration: underline !important;
    font-weight: 500;
}