/*janice css*/

/*header css*/
.body-wrapper #sp-header {
    position: absolute;
    background-color: transparent !important;
    margin-top: 12px;
}
#sp-header .container {border-bottom:none;}
.body-innerwrapper .sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {color: #000;font-weight: 500;}
.body-innerwrapper .sp-megamenu-parent .sp-dropdown li.sp-menu-item.current-item.active>a {color: #B59626 !important;font-weight: 700;}
.sp-megamenu-parent>li:after {background: #CCBC81;}
.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {color: #252525;font-weight: 700;}
.sp-megamenu-parent>li:hover>a {color: #fff;}
.sp-megamenu-parent>li>a {padding: 0 10px;color: #fff;}
.body-innerwrapper .sp-megamenu-parent>li>span {padding: 0 15px;color: #fff;font-family: 'manrope';}
.body-innerwrapper #sp-header.header-sticky {position: fixed !important;height: 77px;background-color: #ffffff !important;margin-top: 0px;}
.menu-surgeon .col-sm-6{padding-right: 0px;padding-left: 0px;align-content: center;}
.menu-surgeon .sp-mega-group li a {color: #B59626;}
.menu-surgeon .sp-mega-group li a:hover {text-decoration: underline;color: #000 !important;}
.getting-start .sp-dropdown.sp-dropdown-main.sp-menu-right {width: 350px !important;}
.header-sticky span.sp-menu-heading {color: #000 !important;}
.header-sticky .sp-megamenu-parent>li.active>a {color: #000;font-weight: 700;}
.header-sticky .sp-megamenu-parent>li>a {color: #000;}
.body-innerwrapper .sp-megamenu-parent > li > a {font-family: 'manrope';}
/*end of header css*/

/*article css*/
.view-article .sp-megamenu-parent > li > a {font-family: 'manrope';color: #252525;}
.view-article .sp-megamenu-parent>li>span {font-family: 'manrope';color: #252525;}
.view-article .col-lg-4.article-details-left-sidebar {
    order: 2;
    justify-content: space-around;
    display: grid;
    align-content: end;
    margin-top: 0px;
    margin-bottom: 30px;
}
.col-lg-8.article-details-right-sidebar p{font-size: 16px;}
.view-article .sphere-article-details .article-details-title-wrap h1 {
    font-size: 40px;
    line-height: 4rem;
    font-family: 'Playfair Display';
    color: #252525;
}
.article-author-information-wrap {display: none !important;}
.sppb-article-info-wrap h3 {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 22px;
    text-overflow: ellipsis;
    margin-top: 20px;
}
.article-details-title-wrap {padding: 80px 0px 30px 0px;}
.sppb-article-info-wrap h3 a{color: #393939;}
.sppb-article-info-wrap a.sppb-readmore {
    color: #393939;
    font-size: 16px;
    font-family: 'manrope';
    font-weight: 600;
    text-decoration: underline;
}
/* end of article css*/
/*language switcher*/
.body-innerwrapper .chosen-container.chosen-container-single.chosen-container-single-nosearch {
    width: 140px !important; left: 15px;}
.chosen-container-single .chosen-single {    background: #ffffff5e;    line-height: 35px;height: 35px;}
.chosen-container-single .chosen-single {justify-content: center;display: flex; font-weight: 600;}
.chosen-container-single .chosen-single div b {top: 5px;position: relative;}

/*footer css*/
#sp-footer {padding: 0px 0px;border-bottom: none;}
div#sp-footer1 {background: #CCBB83;align-content: center;}
div#sp-footer2 {background: #f4f4f4;align-content: center;}
#sp-footer #sp-footer2 .sp-copyright {
    margin-top: 0px;
    color: #000;
    margin-left: 120px;
}
#sp-footer a{color: #000 !important;font-size: 14px;}
#sp-footer .sp-copyright a {
    color: inherit !important;
    font-size: inherit;
    text-decoration: none;
}
#sp-footer .sp-copyright a:hover {
    text-decoration: underline;
}
/*end of footer css*/

/*--offcanva---*/
.offcanvas-menu {background-color: #CCBC81;}
.offcanvas-menu .offcanvas-inner ul.menu>li span {color: #fff;opacity: 1.0;}
.offcanvas-menu .d-flex.align-items-center.p-3.pt-4 {border-bottom: solid 1px #fff;}
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent .menu-toggler {color: #fff;}
.offcanvas-menu .offcanvas-inner ul.menu>li a {color: #fff;opacity: 1.0;}
.body-innerwrapper #sp-header.header-sticky .burger-icon>span {background-color: #252525;}
.burger-icon>span {background-color: #fff;}
.offcanvas-menu .offcanvas-inner ul.menu>li span:hover {color: #252525;}
body.ltr .offcanvas-menu .offcanvas-inner ul.menu li { margin-bottom: 10px;}
.offcanvas-menu .offcanvas-inner ul.menu>li>ul li a {font-weight: 600;}

/*end of offcanva*/

/*small screen ipad Css*/
/* display offcanvai toggler to avoid long menu*/
@media (max-width: 1500px) {
#sp-header nav.sp-megamenu-wrapper #offcanvas-toggler {display: block !important;top:15px;position: relative;}
ul.sp-megamenu-parent.menu-animation-fade-up.d-none.d-lg-block {display: none !important;}
}


/*Mobile Css*/

/*offcanva*/
@media (max-width: 767px) {
.logo-image {height: 67px;}
.mod-languages select.inputbox.advancedSelect {
    background: #ffffff52;
    border: 1px solid #fff;
    border-radius: 5px; font-size: 16px; padding: 5px 15px;  color: #000;
}

}
/*end of offcanva*/
/* === staging Helix-version bridge: toggler markup moved out of megamenu-wrapper === */
@media (max-width: 1500px) {
  #sp-header #offcanvas-toggler { display: block !important; top: 15px; position: relative; }
}

/* === staging header geometry bridge === */
/* original header container is wider (1620) than body (1320): logo flush-left, menu spread */
#sp-header > .container { max-width: 1620px; }
/* language switcher: J6 renders a bootstrap dropdown button; style it like original's Chosen "English" box */
.lang-switch .mod-languages__select > .dropdown-toggle {
  background-color: rgba(255,255,255,0.37); color: #444;
  border: 1px solid #aaa; border-radius: 5px;
  font: 13px/1 'Manrope', sans-serif; min-width: 140px; height: 35px;
  text-align: left; display: inline-flex; align-items: center; padding: 0 8px;
}
.lang-switch .mod-languages__select > .dropdown-toggle:hover,
.lang-switch .mod-languages__select > .dropdown-toggle:focus { background-color: rgba(255,255,255,0.55); color: #444; box-shadow: none; }
.lang-switch .mod-languages__select > .dropdown-toggle::after { margin-left: auto; }

/* === lang-switch order bridge: original has language box rightmost, hamburger to its left === */
#sp-header .sp-column.justify-content-end > .lang-switch { order: 1; margin-left: 15px; }

/* === contact form RSForm reproduction (Convert Forms, home + contact) === */
.cf-fields { display: flex; flex-wrap: wrap; gap: 0 40px; }
.cf-fields .cf-control-group { width: 100%; }
.cf-fields .cf-control-group[data-type="text"],
.cf-fields .cf-control-group[data-type="email"],
.cf-fields .cf-control-group[data-type="tel"] { width: calc(33.333% - 27px); }
.cf-fields .cf-input, .cf-fields textarea.cf-input, .cf-fields textarea { background: #ffffff !important; border: 1px solid #fff; color: #393939; }
.cf-fields .cf-control-group[data-type="text"] .cf-input,
.cf-fields .cf-control-group[data-type="email"] .cf-input,
.cf-fields .cf-control-group[data-type="tel"] .cf-input { height: 50px; }
.cf-fields .cf-label { color: #fff !important; font-weight: 700; }
.cf-fields .cf-control-group[data-type="checkbox"] .cf-control-input label,
.cf-fields .cf-choice-label, .cf-fields .cf-choice span { color: #fff !important; font-weight: 700; font-size: 16px; }
/* cf disclaimer + required marker */
.cf-fields .cf-control-group[data-type="html"] { color: #fff; font-size: 13px; line-height: 1.5; }
.cf-fields .cf-required-label { color: #fff; }

/* === megamenu white over transparent header (sphere bridge); sticky stays dark via existing rules === */
#sp-header:not(.header-sticky) .sp-megamenu-parent > li > a,
#sp-header:not(.header-sticky) .sp-megamenu-parent > li.active > a,
#sp-header:not(.header-sticky) .sp-megamenu-parent > li > span { color: #fff !important; }

/* === offcanvas top-level links white (sphere bridge; staging Helix lacks .offcanvas-inner nesting) === */
div.offcanvas-menu ul.menu > li > a,
div.offcanvas-menu ul.menu > li.active > a,
div.offcanvas-menu ul.menu > li > a:hover { color: #fff !important; }
/* form mobile stack: name/email/phone full-width on phones */
@media (max-width: 767px) {
  .cf-fields .cf-control-group[data-type="text"],
  .cf-fields .cf-control-group[data-type="email"],
  .cf-fields .cf-control-group[data-type="tel"] { width: 100%; }
}
/* === accordion title bridge (sphere template CSS): 28px Syne, responsive === */
.sppb-addon-accordion .sppb-panel-group > .sppb-panel .sppb-panel-title { font-family: Syne, sans-serif; font-size: 28px; line-height: 36px; font-weight: 600; }
.sppb-addon-accordion .sppb-panel-group > .sppb-panel { padding: 8px 0; }
@media (max-width: 991px){ .sppb-addon-accordion .sppb-panel-group > .sppb-panel .sppb-panel-title { font-size: 24px; line-height: 32px; } }
@media (max-width: 767px){ .sppb-addon-accordion .sppb-panel-group > .sppb-panel .sppb-panel-title { font-size: 18px; line-height: 26px; } }
/* accordion body text color (orig rgba(37,37,37,.8); staging renders white=invisible) */
.sppb-addon-accordion .sppb-panel-group > .sppb-panel .sppb-panel-body { color: rgba(37,37,37,0.8) !important; }

/* form fields all opaque white (Barry: 全部白色不透明) */
.cf-fields .cf-control-input .cf-input, .cf-fields textarea { background-color: #ffffff !important; }

/* === footer alignment bridge: staging stock template forces footer2 text-align:right; original is left. Footer content JSON is byte-identical, so left-align to match. === */
#sp-footer2, #sp-footer2 .sppb-section, #sp-footer2 .sppb-row, #sp-footer2 .sp-column, #sp-footer2 .sppb-column-addons { text-align: left; }

/* === megamenu/surgeon: Treatments button-grid pills (sphere template rule absent on stock Helix) === */
.sppb-addon-tab .sppb-tab ul.sppb-nav { margin: 0 -4px 80px; border: 0; }
.sppb-addon-tab .sppb-tab ul.sppb-nav li > a {
  font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: -0.5px;
  font-feature-settings: "pnum","lnum";
  padding: 7px 32px; background-color: transparent; border-radius: 32px;
  margin: 0 4px; transition: .3s;
}
.sppb-addon-tab .sppb-tab ul.sppb-nav.sppb-nav-custom li > a:hover,
.sppb-addon-tab .sppb-tab ul.sppb-nav.sppb-nav-custom li > a:focus { border-color: #b59626 !important; color: #b59626 !important; }
@media (max-width: 991px) {
  .sppb-addon-tab .sppb-tab ul.sppb-nav { margin: 0 -4px 60px; }
  .sppb-addon-tab .sppb-tab ul.sppb-nav li > a { font-size: 18px; padding: 6px 25px; }
}
@media (max-width: 767px) {
  .sppb-addon-tab .sppb-tab ul.sppb-nav { margin: 0 -2px 30px; }
  .sppb-addon-tab .sppb-tab ul.sppb-nav li > a { font-size: 16px; line-height: 24px; padding: 5px 20px; margin: 5px; }
}
/* === language dropdown OPEN: blue-gradient highlight on active item (match Chosen) === */
div.mod-languages ul li.lang-active { background-color: rgb(56,117,215) !important; background-image: linear-gradient(rgb(56,117,215) 20%, rgb(42,98,188) 90%) !important; }
div.mod-languages ul li.lang-active a { color: #fff !important; }
div.mod-languages ul.lang-block li:not(.lang-active):hover { background-color: rgba(130,130,130,0.5) !important; }

/* ===== VERIFICATION-DRIVEN FIXES (2026-06-20c) ===== */
/* G2 gold CTA service buttons: original is bold + capitalized (fixes ~30px width AND casing "of the"->"Of The"); NOT a padding diff */
.sppb-addon .sppb-btn-custom { font-weight: 700; text-transform: capitalize; }
/* G3 content lists: original suppresses bullet markers + left indent on text-addon lists */
.sppb-addon-text ul { list-style: none; padding-left: 0; margin-left: 0; }
/* G1 language switcher: match original padding (left-only 8px, no right pad) + reduce my margin overshoot to align position */
#sp-header .sp-column.justify-content-end > .lang-switch { margin-left: 5px; }
.lang-switch .mod-languages__select > .dropdown-toggle { padding: 0 0 0 8px; }
/* contact form: render checkbox option groups INLINE (original = horizontal row; staging stacked vertically) */
.cf-fields .cf-control-group[data-type="checkbox"] .cf-checkbox-group { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 22px; }
/* contact form (corrected): real flex container is .cf-control-input; inline the option rows */
.cf-fields .cf-control-group[data-type="checkbox"] .cf-control-input { flex-direction: row !important; flex-wrap: wrap; gap: 4px 24px; }
.cf-fields .cf-control-group[data-type="checkbox"] .cf-control-input > .cf-list { width: auto; flex: 0 0 auto; }
/* hide the conditional "specify" textareas — original keeps them hidden until a checkbox triggers them (we match the load state) */
.cf-fields .cf-control-group[data-name="i_have"], .cf-fields .cf-control-group[data-name="others"] { display: none; }
/* checkbox options inline (the 3 .cf-checkbox-group live inside ONE .cf-list — flex THAT) */
.cf-fields .cf-control-group[data-type="checkbox"] .cf-list { display: flex; flex-flow: row wrap; gap: 4px 24px; width: 100%; }
.cf-fields .cf-control-group[data-type="checkbox"] .cf-list > .cf-checkbox-group { width: auto; flex: 0 0 auto; margin: 0; }
/* content lists: original sphere strips bullets+indent on .sppb-addon-content lists (staging shows disc+32px) */
.sppb-addon-content ul:not([style*=decimal]) { list-style: none; padding-left: 0; margin-left: 0; }

/* ===== FAQ accordion: match original padding exactly (heading 0 vertical, body top-only, panel 24) ===== */
.sppb-addon-accordion .sppb-panel-group > .sppb-panel { padding: 24px 0 !important; }
.sppb-addon-accordion .sppb-panel-heading { padding: 0 30px 0 0 !important; }
.sppb-addon-accordion .sppb-panel-body { padding: 15px 0 0 !important; }
/* ===== Offcanvas logo: original shows the logo at panel top before the close button; staging omits it ===== */
.offcanvas-menu .d-flex.align-items-center.justify-content-between.p-3.pt-4::before {
  content: ""; display: block; width: 180px; height: 90px; margin-right: auto;
  background: url("/peh/images/image-3.png") no-repeat left center; background-size: contain;
}
/* lang switcher + hamburger position match (orig ham 1220/lang 1280; staging was ham 1255/lang 1285) */
#sp-header .sp-column.justify-content-end > .lang-switch { margin-left: 0 !important; }
#sp-header .offcanvas-toggler-right { margin-right: 35px !important; }
/* original lang box has no Bootstrap caret glyph (Chosen uses bg image) — hide staging's to match */
.lang-switch .mod-languages__select > .dropdown-toggle::after { display: none; }
/* lang box right-edge nudge: orig box ends at 1420 vs staging 1425; shifts box + hamburger left 5px to match */
#sp-header .sp-column.justify-content-end > .lang-switch { margin-right: 5px !important; }