/*
Plugin Name: WEBART.BG: Direct Product Enquiry ¯\_(ツ)_/¯  
Description: Adds custom HTML and a Gravity Form before product_meta.
Version: 1.0
*/

.dpe-block-wrapper {  padding-top: 20px; margin-bottom: 20px;    }

.dpe-block { display: flex; align-items: center; justify-content: center; gap: 0 38px;  }
.dpe-block .dpe-media { flex-shrink: 0; width: 156px; }
.dpe-block .dpe-data { flex-grow: 1; }

/* CTA */
.dpe-question { 
    display: flex; align-items: center; justify-content: center; gap: 0 8px;
    transition:all 0.2s;
    border: 2px solid var(--grey-light);
    padding: 8px 9px; 
    border-radius: 4px; 
    color: inherit; 
    text-decoration: none;
}
.dpe-question .quest-media { flex-shrink: 0; }
.dpe-question .quest-data { flex-grow: 1; }
.dpe-question .quest-icon { 
    display: flex; width: 36px; height: 36px; 
    align-items: center; justify-content: center; border-radius: 50%;
    line-height: 1; font-size: 30px; 
}
.dpe-question .superlabel {}
.dpe-question .normallabel { font-size: 14px; font-weight: 600; text-transform: uppercase; }
.dpe-question .sublabel { display: block; font-size: 11px; opacity: 0.4; }

.dpe-question:hover { border-color: var(--sky); }
.dpe-question:hover .normallabel {  }

/* Form */

.dpeform-header { display: flex; align-items: center; justify-content: center; gap: 0 12px;  }
.dpeform-header .dpe-picture { flex-shrink: 0; width: 60px;}
.dpeform-header .dpe-picture picture { display: block; border: 2px solid var(--grey-10); }
.dpeform-header .dpe-info { flex-grow: 1; }
.dpeform-header .dpe-info h5 { margin: 0 0 5px 0; font-size: 22px; font-weight: 600; color: var(--blue); }
.dpeform-header .dpe-actions { flex-shrink: 0; }
.dpeform-header .dpe-actions button { display: inline-flex; min-width: auto; }

.dpe-requirements { font-size: 13px; opacity: 0.8; }
hr.dpeform-hr { border-width: 3px; margin: 20px 0; }


.dpegform .gform_heading { display: none; }
.dpegform .gform-footer {  justify-content: flex-end;  }

/* GRAVITY FORMS */
.dpegform .gform-theme--framework {
    --gf-color-primary: #2D84CE !important;
    --gf-ctrl-color: rgb(8,196,237) !important;
    --gf-ctrl-outline-color-focus: rgb(206, 231, 236) !important;
    --gf-desc-space: 2px !important;
    --gf-label-space-primary: 5px !important;
}
.dpegform .gform-theme--foundation {
    --gf-form-footer-gap: 15px !important;
}

.dpegform .gform-theme--foundation .gform_fields {
    --gf-form-gap-y: 15px !important;
    --gf-form-gap-x: 15px !important;
}

.dpegform form .gform_button.button {
    background-color: var(--green-dark) !important;
    height: 44px !important;
    border-radius: 4px;
    font-weight: 500; 
    font-size: 16px !important;
    min-width: 160px !important;
}

/* Turnstile */
.dpegform .gfield--input-type-turnstile { position: relative; }
.dpegform .gfield--input-type-turnstile .ginput_container { transform: scale(0.7); transform-origin: bottom left; display: inline-block; position: absolute; top: 0; left: 0; z-index: 10; }




.prodsharer-wrapper { padding: 15px 0; }
ul.prodsharer {
    margin: 0; padding: 0; list-style: none none; list-style-position: inside;
    display: flex; align-items: center; gap: 0 15px; 
}
ul.prodsharer > li { font-size: 24px; line-height: 1; opacity: 0.35; transition:all 0.2s; }
ul.prodsharer > li.sitem-sign { pointer-events: none; }
ul.prodsharer > li.sitem-divider {  flex-shrink: 0; line-height: 1; opacity: 1; color: #9e9e9e; text-transform: uppercase; font-weight: 600; font-size: 10px;  }
ul.prodsharer > li.sitem-divider hr { margin: 0; opacity: 1; border-width: 2px; }
ul.prodsharer > li:hover { opacity: 1; }
ul.prodsharer > li a { color: inherit;  }

ul.prodsharer > li a.facebook:hover { color: #0866FF; }
ul.prodsharer > li a.twitter:hover { color: #101419; }
ul.prodsharer > li a.linkedin:hover { color: #0A66C2; }
ul.prodsharer > li a.pinterest:hover { color: #E40124; }


/* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║ ####################################   DEVELOPMENT BREAKPOINTS   ##################################  ║ */
/* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */

/* XL */ @media (max-width: 1365.98px) {
 
} /* @media ---| width < 1366px |--- */


/* LG */ 
@media (max-width: 1279.98px) {

 

} /* @media ---| width < 1200px |--- */

/* MD */ @media (max-width: 991.98px) {

    .dpe-block { gap: 0 15px; }
    .dpe-block .dpe-media { width: 110px; }
    .dpe-question .quest-icon { width: 30px; height: 30px; }
    .dpe-question .sublabel { display: none; }

} /* @media ---| width < 992px |--- */

/* SM */ @media (max-width: 767.98px) {


} /* @media ---| width < 768px |--- */

/* XS */ @media (max-width: 575.98px) and (orientation:landscape) {}
@media (max-width: 575.98px) {

    .dpe-question { padding: 4px 8px; }
    .dpe-question .quest-icon { width: 26px; height: 26px; }
    .dpe-question .normallabel { font-size: 13px; }

  
} /* @media ---| width < 576px |--- */

@media screen and (min-width: 320px) and (max-width: 767.98px) and (orientation: landscape) { }

/* XXS */ @media (max-width: 319.98px) and (orientation:landscape) {}
@media (max-width: 319.98px) {


} /* @media ---| width < 320px |--- */

/* ---| END |--- */
/* ¡ NO STYLES BELOW THIS LINE PLEASE ! */