/*
 * main-front-pyh-new-1.0.css
 *
 * Piyavate design overlay (design_sub_version = pyh-new-1.0).
 * Loaded after the main CSS by views/include/web_header*.php when
 * web_config.design_sub_version = 'pyh-new-1.0'.
 *
 * Add Piyavate-specific overrides below.
 */

/* === Piyavate overrides go below === */

/* ============================================================
   Recolor brand color #0ab4ab -> #00aeef across the design.
   Mirrors every selector that uses #0ab4ab in the loaded
   stylesheets (app-bpk9.css, main-front-bpk9-3.6.css,
   main-front-4.3.css). This file loads last, so equal-specificity
   rules win without needing !important.
   ============================================================ */

/* --- color --- */
a,
.text-primary,
.btn-primary .badge,
.btn-link,
.list-group-item.active > .badge,
.nav-pills > .active > a > .badge,
.panel-primary > .panel-heading .badge,
.text-blue,
.page-title,
.section-title,
.section-sub-title,
.b-card .b-card-title,
.section-center .section-title,
.section-center .section-desc,
.section-news .media-line:before,
.section-news .media-heading,
.contact-address .glyphicon,
.map-sidebar-container li a,
.footer-item-right,
.footer-item-right a,
.facility-icon .media-highlight h4,
.pagination > li > a,
.pagination > li > span {
    color: #00aeef;
}

/* --- background-color --- */
.bg-primary,
.btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.label-primary,
.progress-bar,
.header-nav,
.footer-nav,
.modal-blue .modal-header,
.schedule-table .th,
.b-card .tag,
.center-card .center-card-title,
.doctor-card .doctor-card-title,
.doctor-panel-title,
.contact-form .form-header,
.medical_travel-page .section-title2,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: #00aeef;
}

/* --- border-color --- */
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active,
.panel-primary,
.panel-primary > .panel-heading,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    border-color: #00aeef;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #00aeef;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #00aeef;
}
.border-title {
    border-bottom-color: #00aeef;
}

/* --- gradient (.blue-stripe) --- */
.blue-stripe {
    background: #1478bd;
    background: -moz-linear-gradient(top, #1478bd 7%, #00aeef 100%);
    background: -webkit-linear-gradient(top, #1478bd 7%, #00aeef 100%);
    background: linear-gradient(to bottom, #1478bd 7%, #00aeef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1478bd', endColorstr='#00aeef', GradientType=0);
}

/* --- media-query scoped (matches original location) --- */
@media only screen and (min-width: 480px) {
    .text-controls .active {
        background-color: #00aeef;
    }
}

/* --- home service-link buttons: pyh-only recolor ---
   home.php is shared by every theme, so the new colors live here (loaded only
   for pyh-new-1.0) instead of editing the shared inline styles. Each button is
   matched by its original inline color, which is unique per button. */
.section-service-link[style*="ed1b24"] {   /* Center        */
    background-color: #015DAB !important;
}
.section-service-link[style*="969696"] {   /* Find a doctor */
    background-color: #00AEEF !important;
}
.section-service-link[style*="0ab4ab"] {   /* Checkup       */
    background-color: #EF4782 !important;
}

/* --- inline style="background-color:#0ab4ab" (medical_travel / privacy_policy) --- */
.btn-square[style*="0ab4ab"] {
    background-color: #00aeef !important;
}

/* --- cart icon (img/customer/3.png) recolored via CSS mask ---
   Markup: <span class="cart-icon" style="--icon:url('.../img/customer/3.png')"></span>
   Image is 120x103; at 30px wide the height is ~26px. */
.cart-icon {
    display: inline-block;
    width: 30px;
    height: 26px;
    margin-bottom: 5px;
    vertical-align: middle;
    background-color: #00aeef;
    -webkit-mask: var(--icon) no-repeat center / contain;
            mask: var(--icon) no-repeat center / contain;
}

/* --- hotline icon: swap to Piyavate artwork --- */
.hotline-icon {
    background-image: url(../img/icon/hotline-icon-pyh.png);
}

/* --- contact page: FontAwesome icons (bus, LINE) match the glyphicons --- */
.contact-address .fa {
    color: #00aeef;
}

/* --- room rates section: title/desc recolored --- */
.section-room-rates .section-title,
.section-room-rates .section-desc {
    color: #00aeef;
}

/* ============================================================
   Recolor ecommerce/customer accent #51C3C1 -> #00AEEF (pyh only).
   These rules live in ecom.css + per-page <style> blocks that load
   AFTER this file, plus inline styles, so !important is required.
   Generic selectors are scoped to #my-display (the ecommerce layout
   wrapper) so the rest of the site is untouched.
   ============================================================ */

/* color — ecommerce-specific classes (class names unique to the shop) */
.text-light-green,
.sidenav a,
.dropdown-btn,
.sidenav a:hover,
.dropdown-btn:hover,
.sidenav .active,
.sidenav a .active,
#sidebar .active,
.login-header,
.button-outline,
.form-register::placeholder,
.form-login::placeholder,
.form-edit::placeholder {
    color: #00AEEF !important;
}

/* color — generic input placeholders, scoped to the ecommerce layout */
#my-display input::placeholder {
    color: #00AEEF !important;
}

/* background-color */
.bg-light-green,
.btn-light-green,
.login-btn,
.button-outline:hover {
    background-color: #00AEEF !important;
}

/* border */
.button-outline {
    border-color: #00AEEF !important;
}

/* inline styles — home btn-square, customer h1/button/p/span/icons, JS-set #provice.
   The bare [style] rule only matches elements that actually carry the colour
   inline, so it is self-limiting even though it is unscoped. */
[style*="51c3c1" i] {
    color: #00AEEF !important;
}
.btn-square[style*="51c3c1" i] {
    background-color: #00AEEF !important;
}
.input-group[style*="51c3c1" i] {
    border-color: #00AEEF !important;
}
#provice {
    color: #00AEEF !important;
}

/* ---  #0DB3AA -> #00AEEF (pyh only) ---
   Inline color on the customer form fields (register / edit / change password)
   and the cart count badge. The badge is transparent when empty, so :not(:empty)
   keeps that state and only recolors it when a count is shown (beats inline + the
   JS-set colour via !important). input/select are matched explicitly so the
   badge's number text is never recoloured. */
input[style*="0db3aa" i],
select[style*="0db3aa" i] {
    color: #00AEEF !important;
}
#cartItems:not(:empty) {
    background-color: #00AEEF !important;
}

/* --- customer pages: recolor the teal PNG icons to #00AEEF (pyh only) ---
   Icons are <img> so we can't set their colour directly; CSS filter is used.
   Sidebar icons are single-tone, so the standard "force to black then tint"
   chain reproduces #00AEEF closely. The account avatar is two-tone (teal disc +
   white figure), so it only gets a hue/saturation nudge that keeps the figure
   white. Both are filter-based, so the result is very close but not guaranteed
   pixel-exact. */
.sidenav .side-logo,
.img-label,                              /* login / reset-password field icons */
img[src*="customer/1.png"],             /* register field icons (person, house, */
img[src*="customer/5.png"],             /* phone, email, lock, etc.) — all       */
img[src*="customer/6.png"],             /* single-tone teal PNGs                  */
img[src*="customer/7.png"],
img[src*="customer/8.png"],
img[src*="customer/9.png"] {
    filter: brightness(0) saturate(100%) invert(56%) sepia(92%) saturate(1638%) hue-rotate(165deg) brightness(96%) contrast(101%);
}
img[src*="customer/detail_user.png"] {
    filter: hue-rotate(15deg) saturate(1.7) brightness(0.92);
}

.social-icon-bar .phone1489 {
    background: #e74382;
    color: white;
    background-image: url(../img/icon/logo-1489.png);
    background-repeat: no-repeat;
    background-size: 46px;
    background-position: center;
}