/* FILE_VERSION = 1.0.7
 * VOGO Product Page Style - pagina de detalii produs (sablonul Elementor 711), incarcat numai pe is_product()
 * de vogo-product-page-style.php, dupa vogo-brand-blue.css (de unde vine --vogo-brand-blue = #0F6CBD).
 * Stilul iconitelor: C:\VOGO\images\modele\vogo-icons-style.png - plate, doar contur, albastru VOGO.
 *
 * SECTIUNI:
 *   1. Iconitele de sus (live, video, chat, favorite, recomanda, ajutor) si butonul de inchidere (1.0.7: toate cu contur, fara fundal)
 *   2. Titlul produsului
 *   3. Pretul si cantitatea
 *   4. Butonul „Adauga in cos”: iconita de cos albastra, pe randul cantitatii (1.0.2)
 *   5. Produsele similare: carduri ca in paginile de categorie
 *   6. Fereastra „Ce inseamna aceste pictograme?”
 *   7. Telefon
 *   8. Verdele VOGO din descrieri -> albastru (1.0.3)
 *   9. Butoanele de recomandare cu eticheta albastra (1.0.3)
 */

/* 1. Iconitele de sus: fara fundal si fara contur, iconite mari cu contur in albastru VOGO (1.0.1).
 *    Prefixul body.single-product bate <style id="vogo-provider-links-fix"> (fundalul gri #f2f2f5, !important), care e scris
 *    in pagina dupa acest fisier si castiga la aceeasi specificitate. */
body.single-product #fs-share-link .product-provider-links .product-provider-links-buttons {
    gap: 4px !important;
}
body.single-product #fs-share-link .product-provider-links a.provider-link-custom,
body.single-product #fs-share-link .product-provider-links button.provider-link-custom,
body.single-product #fs-share-link .product-provider-links .small-screen-back-to-category > .material-icons {
    width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    transition: background-color .15s ease;
}
/* Nici la atingere / apasare fara fundal: pe telefon starea de atingere ramane pe iconita apasata si arata ca un patrat gri (1.0.5) */
body.single-product #fs-share-link .product-provider-links a.provider-link-custom:hover,
body.single-product #fs-share-link .product-provider-links button.provider-link-custom:hover,
body.single-product #fs-share-link .product-provider-links a.provider-link-custom:focus,
body.single-product #fs-share-link .product-provider-links button.provider-link-custom:focus,
body.single-product #fs-share-link .product-provider-links a.provider-link-custom:active,
body.single-product #fs-share-link .product-provider-links button.provider-link-custom:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}
/* Iconita: fontul cu contur in locul celui plin, albastru VOGO. Butonul de inchidere ramane pe Material Icons Outlined. */
body.single-product #fs-share-link .product-provider-links .material-icons {
    font-family: "Material Icons Outlined" !important;
    font-size: 30px !important;
    color: var(--vogo-brand-blue) !important;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
}
/* 1.0.7: actiunile pe Material Symbols Outlined cu FILL 0 (Material Icons Outlined deseneaza pline video, chat, inima, ajutor) si
 * fara fundal pe iconita interioara: post-711.css pune #f2f2f5 !important pe „.product-provider-links a span.material-icons.notranslate” */
body.single-product #fs-share-link .product-provider-links .provider-link-custom .material-icons {
    font-family: "Material Symbols Outlined" !important;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
    background: transparent !important;
    background-color: transparent !important;
}
/* Butonul de inchidere: aceeasi forma, iconita gri, ca sa nu concureze cu actiunile */
body.single-product #fs-share-link .product-provider-links .small-screen-back-to-category > .material-icons {
    color: #6b7280 !important;
    align-items: center !important;
    font-weight: normal !important;
}

/* 2. Titlul produsului */
.single-product .elementor-711 h1.product_title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #111827 !important;
    letter-spacing: 0 !important;
    margin: 4px 0 0 !important;
}

/* 3. Pretul si cantitatea pe acelasi rand: pretul in stanga, cantitatea in dreapta */
.single-product .vogo-inline-qty-price {
    justify-content: space-between !important;
    gap: 10px !important;
}
.single-product .vogo-inline-qty-price .product-price,
.single-product .vogo-inline-qty-price .product-price .amount {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--vogo-brand-blue) !important;
    white-space: nowrap;
}
.single-product .vogo-quantity-wrapper {
    width: auto !important;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 4px;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
}
.single-product .vogo-quantity-wrapper .vogo-qty-btn {
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--vogo-brand-blue) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.single-product .vogo-quantity-wrapper .vogo-qty-btn:hover {
    background: #f4f6f9 !important;
}
.single-product .vogo-quantity-wrapper input.vogo_quantity {
    width: 44px !important;
    height: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    -moz-appearance: textfield;
}
.single-product .vogo-quantity-wrapper input.vogo_quantity::-webkit-outer-spin-button,
.single-product .vogo-quantity-wrapper input.vogo_quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 4. „Adauga in cos” (1.0.2): buton patrat albastru VOGO, plat, doar cosul cu contur alb, pe randul cantitatii (mutat acolo de
 *    vogo-product-page-style.js). Selectorul trebuie sa fie mai precis decat regula Elementor din post-711.css
 *    „.elementor-shortcode button.single_add_to_cart_button.button.alt { background-color: rgb(0,157,129) !important }”. */
body.single-product .elementor-711 .elementor-shortcode form.cart button.single_add_to_cart_button.button.alt {
    position: relative;
    top: 0 !important; /* o regula a temei il ridica cu 11px (top: -11px) fata de cantitate */
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--vogo-brand-blue) !important;
    background-color: var(--vogo-brand-blue) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 0 !important;
    transition: background-color .15s ease;
}
body.single-product .elementor-711 .elementor-shortcode form.cart button.single_add_to_cart_button.button.alt:hover {
    background: var(--vogo-brand-blue-dark) !important;
    background-color: var(--vogo-brand-blue-dark) !important;
}
/* Textele „Adauga in cos” / „Adaugat!” nu se mai vad; numele butonului ramane pentru cititoarele de ecran (aria-label din JS) */
body.single-product .elementor-711 .elementor-shortcode form.cart button.single_add_to_cart_button > span {
    display: none !important;
}
/* Cosul: in ::before, care in tema e un strat absolut invizibil (opacity 0) folosit la incarcare - aici devine iconita */
body.single-product .elementor-711 .elementor-shortcode form.cart button.single_add_to_cart_button.button.alt::before {
    content: "" !important;
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / 24px 24px no-repeat !important;
}
/* Dupa adaugare, scriptul din functions2.php afiseaza 2,5 s „Adaugat!” (style="display: inline"): in locul cosului, bifa */
body.single-product .elementor-711 .elementor-shortcode form.cart button.single_add_to_cart_button.button.alt:has(.vogo-added-text[style*="inline"])::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
}
/* Randul: pretul in stanga; cantitatea si cosul alaturate in dreapta */
.single-product .vogo-inline-qty-price form.cart {
    display: flex;
    flex: 0 0 auto;
    margin: 0 !important;
}
.single-product .vogo-inline-qty-price .vogo-quantity-wrapper {
    margin-left: auto !important;
}
/* Widgetul din care a plecat formularul ramane gol: nu mai ocupa loc */
.single-product .elementor-711 .elementor-element-0b9470f:not(:has(form.cart)) {
    display: none !important;
}

/* 5. Produsele similare: carduri albe egale, poza 16:10, titlul aliniat la stanga, pretul albastru, cosul in stilul de iconite VOGO */
.single-product .related-products .wd-el-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #111827 !important;
    text-align: left !important;
}
.single-product .related-products .wd-carousel-item {
    height: auto;
}
.single-product .related-products .wd-product {
    height: 100%;
}
.single-product .related-products .wd-product .product-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .06);
    transition: box-shadow .2s ease, transform .2s ease;
}
.single-product .related-products .wd-product .product-wrapper:hover {
    box-shadow: 0 8px 24px rgba(17, 24, 39, .12);
    transform: translateY(-2px);
}
.single-product .related-products .wd-product .product-element-top {
    margin: 0 !important;
    border-radius: 0 !important;
}
.single-product .related-products .wd-product .product-image-link img {
    width: 100% !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
.single-product .related-products .wd-product .product-element-bottom {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px !important;
    text-align: left !important;
}
.single-product .related-products .wd-product .wd-entities-title {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    text-align: left !important;
}
.single-product .related-products .wd-product .wd-entities-title a {
    color: #111827 !important;
}
.single-product .related-products .wd-product .wd-product-cats {
    margin: 0 !important;
    font-size: 13px !important;
    text-align: left !important;
}
.single-product .related-products .wd-product .wd-product-cats a {
    color: #6b7280 !important;
}
/* Pretul si cosul imediat sub categorie, nu impinse la baza cardului (1.0.4, cerut de utilizator) */
.single-product .related-products .wd-product .price-cart-wrapper {
    margin-top: 6px !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
}
.single-product .related-products .wd-product .price,
.single-product .related-products .wd-product .price .amount {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--vogo-brand-blue) !important;
}
/* Tema pune 10px deasupra butonului de cos, care coborau tot randul cu pretul */
/* Cosul urca in dreapta, langa „Mall Delivery”, ca pretul sa vina imediat sub categorie (1.0.6, cerut de utilizator) */
.single-product .related-products .wd-product .price-cart-wrapper {
    margin-top: 2px !important;
    align-items: flex-end !important;
}
.single-product .related-products .wd-product .price-cart-wrapper .wd-add-btn {
    margin: -26px 0 0 !important;
}
.single-product .related-products .wd-product a.add-to-cart-loop {
    width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #ffffff !important;
    border: 1.5px solid var(--vogo-brand-blue) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.single-product .related-products .wd-product a.add-to-cart-loop:hover {
    background-color: #f4f6f9 !important;
}
/* Glifa din fontul temei (&#xf123;) se ascunde; in locul ei, cosul desenat ca in categorii (vogo-brand-blue.css 8b) */
.single-product .related-products .wd-product a.add-to-cart-loop > span {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 0 !important;
    color: transparent !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6CBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
}

/* 6. Fereastra „Ce inseamna aceste pictograme?”: aceleasi iconite cu contur, albastre */
.swal2-popup .pop-paragraph .material-icons {
    font-family: "Material Icons Outlined" !important;
    color: var(--vogo-brand-blue) !important;
    vertical-align: middle;
    margin-right: 6px;
}

/* 8. Verdele VOGO scris inline in descrierile produselor (de ex. <span style="color: #0c542d;"> cu telefonul si e-mailul
 *    de comenzi) devine albastrul VOGO; aceleasi verzi ca in vogo-brand-blue.css (1.0.3) */
.single-product .elementor-711 [style*="#0c542d" i],
.single-product .elementor-711 [style*="#1a3d2b" i],
.single-product .elementor-711 [style*="#2e4f26" i],
.single-product .elementor-711 [style*="#30653e" i] {
    color: var(--vogo-brand-blue) !important;
}

/* 9. Butoanele „Recomandati produse sau servicii noi” si „Recomanda-le urmaritorilor tai” (#fs-common-btn, widgeturile
 *    ce00cc7 si b81f5fc): eticheta, iconita si conturul in albastrul VOGO in locul negrului (1.0.3) */
.single-product .elementor-711 #fs-common-btn a.btn,
.single-product .elementor-711 #fs-common-btn a.elementor-button {
    color: var(--vogo-brand-blue) !important;
    border-color: var(--vogo-brand-blue) !important;
    fill: var(--vogo-brand-blue) !important;
}
.single-product .elementor-711 #fs-common-btn a .wd-btn-text,
.single-product .elementor-711 #fs-common-btn a .elementor-button-text {
    color: var(--vogo-brand-blue) !important;
}
.single-product .elementor-711 #fs-common-btn a svg,
.single-product .elementor-711 #fs-common-btn a svg * {
    fill: var(--vogo-brand-blue) !important;
    color: var(--vogo-brand-blue) !important;
}
.single-product .elementor-711 #fs-common-btn a:hover {
    background-color: #f4f6f9 !important;
}

/* 7. Telefon: iconitele se strang ca sa incapa pe un rand; titlul mai mic */
@media (max-width: 767px) {
    body.single-product #fs-share-link .product-provider-links .product-provider-links-buttons {
        gap: 2px !important;
    }
    body.single-product #fs-share-link .product-provider-links a.provider-link-custom,
    body.single-product #fs-share-link .product-provider-links button.provider-link-custom,
    body.single-product #fs-share-link .product-provider-links .small-screen-back-to-category > .material-icons {
        width: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
    }
    body.single-product #fs-share-link .product-provider-links .material-icons {
        font-size: 28px !important;
    }
    .single-product .elementor-711 h1.product_title {
        font-size: 21px !important;
    }
    .single-product .vogo-inline-qty-price .product-price,
    .single-product .vogo-inline-qty-price .product-price .amount {
        font-size: 24px !important;
    }
    .single-product .related-products .wd-el-title {
        font-size: 19px !important;
    }
    .single-product .related-products .wd-product .product-element-bottom {
        padding: 10px 10px 12px !important;
    }
    .single-product .related-products .wd-product .wd-entities-title {
        font-size: 14px !important;
    }
    .single-product .related-products .wd-product a.add-to-cart-loop {
        width: 36px !important;
        height: 36px !important;
    }
}