/* ==========================================================================
   CLEAR UTILITIES
   ========================================================================== */

.clr_10,
.clr_20,
.clr_hr {
    clear: both;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

.clr_10 {
    height: 10px;
}

.clr_20 {
    height: 20px;
}

.clr_hr {
    border-bottom: 1px solid #ccc;
}


/* ==========================================================================
   BASE STYLES
   ========================================================================== */

#ao_facebookpsconnect p {
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   LEGACY SOCIAL BUTTONS
   ========================================================================== */

.ao_bt_fpsc,
.ao_bt_fpsc:hover,
.ao_bt_fpsc:active,
.ao_bt_fpsc:visited {
    color: #fff;
}

.ao_bt_fpsc {
    display: inline-block;
    height: 30px;
    margin: 10px 8px 0;
    padding: 0 20px 0 5px;

    background: url(../img/bt_sprite2.png) 0 0 repeat-x;

    border-radius: 3px;
    box-shadow: 1px 2px 2px #aaa;

    font-size: 12px;
    line-height: 30px;
    text-shadow: 0 1px 1px #333;
}

.ao_bt_fpsc:active {
    box-shadow: 1px 1px 1px #bbb;
}

.ao_bt_fpsc span {
    display: block;
    float: left;
    height: 28px;
    font-weight: bold;
}

.ao_bt_fpsc span.picto {
    width: 30px;
    background: url(../img/bt_sprite2.png) 0 0 no-repeat;
}

.ao_bt_fpsc span.title {
    padding-left: 10px;
}


/* ==========================================================================
   LEGACY SOCIAL NETWORK COLORS
   ========================================================================== */

/* Facebook */

.ao_bt_fpsc.ao_bt_fpsc_facebook {
    border: 1px solid #3f6387;
    background-position: 0 -5px;
}

.ao_bt_fpsc.ao_bt_fpsc_facebook:hover {
    background-position: 0 0;
}

.ao_bt_fpsc.ao_bt_fpsc_facebook span.picto {
    background-position: 0 -156px;
    border-right: 1px solid #3a5f81;
}

.ao_bt_fpsc.ao_bt_fpsc_facebook span.title {
    border-left: 1px solid #5d85a9;
}


/* Twitter */

.ao_bt_fpsc.ao_bt_fpsc_twitter {
    border: 1px solid #008cb3;
    background-position: 0 -85px;
}

.ao_bt_fpsc.ao_bt_fpsc_twitter:hover {
    background-position: 0 -80px;
}

.ao_bt_fpsc.ao_bt_fpsc_twitter span.picto {
    background-position: 0 -235px;
    border-right: 1px solid #33bcf1;
}

.ao_bt_fpsc.ao_bt_fpsc_twitter span.title {
    border-left: 1px solid #008cb3;
}


/* Google */

.ao_bt_fpsc.ao_bt_fpsc_google {
    border: 1px solid #a51012;
    background-position: 0 -45px;
}

.ao_bt_fpsc.ao_bt_fpsc_google:hover {
    background-position: 0 -40px;
}

.ao_bt_fpsc.ao_bt_fpsc_google span.picto {
    background-position: 0 -195px;
    border-right: 1px solid #d14c4c;
}

.ao_bt_fpsc.ao_bt_fpsc_google span.title {
    border-left: 1px solid #a40000;
}


/* PayPal */

.ao_bt_fpsc.ao_bt_fpsc_paypal {
    border: 1px solid #0082c2;
    background-position: 0 -125px;
}

.ao_bt_fpsc.ao_bt_fpsc_paypal:hover {
    background-position: 0 -120px;
}

.ao_bt_fpsc.ao_bt_fpsc_paypal span.picto {
    background-position: 0 -275px;
    border-right: 1px solid #0096d0;
}

.ao_bt_fpsc.ao_bt_fpsc_paypal span.title {
    border-left: 1px solid #0082c2;
}


/* Amazon */

.ao_bt_fpsc.ao_bt_fpsc_amazon {
    border: 1px solid #9d6c00;
    background-position: 0 -316px;
}

.ao_bt_fpsc.ao_bt_fpsc_amazon:hover {
    background-position: 0 -321px;
}

.ao_bt_fpsc.ao_bt_fpsc_amazon span.picto {
    background-position: 0 -367px;
    border-right: 1px solid #9d6c00;
}

.ao_bt_fpsc.ao_bt_fpsc_amazon span.title {
    border-left: 1px solid #ffdf95;
    color: #000;
    text-shadow: 0 1px 0 #fff;
}


/* ==========================================================================
   USER ACCOUNT BLOCK
   ========================================================================== */

.fbpsc_block_user_account {
    background: #eee;
    color: #666;
    text-shadow: 0 1px 0 #fff;
}

.fbpsc_block_user_account .content {
    height: 150px;
    padding: 10px;
    border: 1px solid #ccc;
    background: #eee;
}

.fbpsc_block_user_account .ao_input {
    height: 20px;
    padding: 0 5px;
    border: 1px solid #ccc;
    color: #999;
}

.fbpsc_block_user_account fieldset {
    border: none;
}

.fbpsc_block_user_account p {
    display: block;
    padding-bottom: 20px;
}

.fbpsc_block_user_account .ao_input,
.fbpsc_block_user_account .button {
    margin: 0;
}


/* ==========================================================================
   MINI BUTTONS
   ========================================================================== */

.fbpsc_mini_button .ao_bt_fpsc {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    padding: 0;
    overflow: hidden;

    background: url(../img/bt_sprite_mini.png) 0 0 repeat-x;
}

.fbpsc_mini_button .ao_bt_fpsc span.picto {
    width: 20px;
    height: 20px;
    background: url(../img/bt_sprite_mini.png) 0 0 no-repeat;
}

.fbpsc_mini_button .ao_bt_fpsc .title {
    display: none;
}

.fbpsc_mini_button .ao_bt_fpsc span {
    border: none !important;
}

.fbpsc_mini_button .btn-mini-fbpsc {
    margin-right: 10px !important;
    text-align: center !important;
}

.fbpsc_mini_button a:first-child {
    margin-left: 0;
}

.fbpsc_mini_button a:last-child {
    margin-right: 0;
}


/* Mini button variants */

.fbpsc_mini_button .ao_bt_fpsc.ao_bt_fpsc_facebook {
    background-position: 0 -5px;
}

.fbpsc_mini_button .ao_bt_fpsc.ao_bt_fpsc_facebook span.picto {
    background-position: 2px -97px;
}

.fbpsc_mini_button .ao_bt_fpsc.ao_bt_fpsc_twitter {
    background-position: 0 -48px;
}

.fbpsc_mini_button .ao_bt_fpsc.ao_bt_fpsc_twitter span.picto {
    background-position: 3px -143px;
}

.fbpsc_mini_button .ao_bt_fpsc.ao_bt_fpsc_google {
    background-position: 0 -24px;
}

.fbpsc_mini_button .ao_bt_fpsc.ao_bt_fpsc_google span.picto {
    background-position: 3px -119px;
}

.fbpsc_mini_button .ao_bt_fpsc.ao_bt_fpsc_paypal {
    background-position: 0 -71px;
}

.fbpsc_mini_button .ao_bt_fpsc.ao_bt_fpsc_paypal span.picto {
    background-position: 3px -167px;
}

.fbpsc_mini_button .ao_bt_fpsc.ao_bt_fpsc_amazon {
    background-position: 0 -197px;
}

.fbpsc_mini_button .ao_bt_fpsc.ao_bt_fpsc_amazon span.picto {
    background-position: 2px -228px;
}


/* ==========================================================================
   HEADER USER
   ========================================================================== */

#header_user .fbpsc_mini_button {
    margin: 0;
    padding: 0;
    text-align: right;
    line-height: 25px;
}

#header_user .fbpsc_mini_button .ao_bt_fpsc {
    margin: 0 8px;
}


/* ==========================================================================
   FBPSC BLOCK
   ========================================================================== */

#fbpsc .btn {
    margin-right: 10px;
}

#fbpsc .block .title_block,
.block h4 {
    margin-bottom: 0 !important;
}

#fbpsc .block-account-title {
    font-size: 15px;
    text-align: center;
}

#fbpsc .btn-warning {
    font-style: normal !important;
}

#fbpsc_block_user_account .block .title_block {
    margin: -1px;
}


/* ==========================================================================
   AUTHENTICATION
   ========================================================================== */

#authenticationAlign {
    text-align: center !important;
}

#authenticationAlign a {
    display: inline-block;
    margin-bottom: 20px;
}

#connectorText {
    min-height: 60px;
    padding: 10px 10px 10px 85px !important;

    border-top: 2px solid #385b94;
    border-right: none;
    border-bottom: 2px solid #385b94;
    border-left: none;

    color: #385b94;
    line-height: 20px;
}


/* ==========================================================================
   FANCYBOX
   ========================================================================== */

#fpcFancyboxContent {
    width: 850px !important;
    padding: 15px;
    text-align: center;
}

#fpcFancyboxContent h3 {
    padding: 10px 20px !important;
    border: none !important;
    background: #333;
    color: #fff;
    line-height: 20px;
}


/* ==========================================================================
   SOCIAL MESSAGE
   ========================================================================== */

#socialMessage button {
    margin-top: 20px;
    margin-bottom: 20px;
}

#socialMessage label {
    display: inline;
    font-size: 12px;
    font-weight: bold;
}


/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert.error {
    margin-top: 10px;
    padding: 10px 15px;

    border: 1px solid #ec9b9b;
    background-color: #fae2e3;
    color: #f00;
}

.alert.valide {
    margin-top: 10px;
    padding: 10px 15px;

    border: 1px solid #b8c8b3;
    background-color: #dff0d8;
    color: #3a811d;
}

.alert-info {
    border-top: none;
    border-right: none;
    border-bottom: none;
}


/* ==========================================================================
   VOUCHER POPUP
   ========================================================================== */

.fbpsc_voucher_popup {
    width: 500px;
    text-align: center;
}

.fbpsc_voucher_popup h3 {
    padding-top: 5px;
    padding-bottom: 5px;

    background-color: #000;
    color: #f5f5f5;

    font-size: 14px;
    text-align: center;
}

.fbpsc_voucher_popup h4 {
    font-size: 13px;
}

.fbpsc_voucher_popup > .alert-success {
    position: relative;
    padding: 15px;

    border: none;
    border-left: 3px solid #3c763d;

    background-color: #dff0d8;
    color: #3c763d;

    text-align: center;
}

.fbpsc_voucher_popup > .alert-info {
    padding: 15px;
    text-align: center;
}

.fbpsc_voucher_popup_button {
    text-align: right;
}


/* ==========================================================================
   PRESTASHOP 1.7
   ========================================================================== */

#fbpsc .a_link_17 {
    padding-bottom: 10px;
    color: #2fb5d2 !important;
    font-size: 12px;
}

.fbpsc_funnel_17_above,
.fbpsc_funnel_17_below {
    padding: 15px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.25);

    background-color: #fff;
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
}

.fbpsc_funnel_17_above {
    margin-bottom: 10px;
}

.fbpsc_funnel_17_below {
    margin-top: 10px;
    margin-bottom: 10px;
}


/* ==========================================================================
   PRESTASHOP 1.5
   ========================================================================== */

#fbpsc .login-form-15 {
    padding: 10px;
    border: none;
}

#fbpsc #login_form #email,
#fbpsc #login_form #passwd {
    width: 150px;
}

#fbpsc .submit-15 {
    padding-right: 15px;
}


/* ==========================================================================
   VAPIFY - GOOGLE LOGIN BUTTON
   ========================================================================== */

/*
 * Custom hook jest renderowany bezpośrednio pod natywnym przyciskiem
 * #submit-login w login-form.tpl.
 *
 * Przycisk Google zachowuje klasy motywu:
 * .btn
 * .btn-primary
 * .form-control-submit
 *
 * Dzięki temu border-radius i typografia pozostają zgodne z motywem.
 */

.form-footer .fpsc-hook-buttons {
    width: 100%;
    margin-top: 12px;
}


/* --------------------------------------------------------------------------
   BUTTON SIZE
   -------------------------------------------------------------------------- */

/*
 * Oba przyciski mają identyczną wysokość.
 */

#submit-login,
.form-footer .fpsc-google-theme-button {
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
}


/* --------------------------------------------------------------------------
   GOOGLE BUTTON
   -------------------------------------------------------------------------- */

.form-footer .fpsc-google-theme-button {
    position: relative;

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

    width: 100%;
    max-width: none;
    height: 38px;
    min-height: 38px;

    margin: 0;
    padding: 0 48px;

    border-color: #d6d6d6;
    background: #fff;
    box-shadow: none;

    color: #444;
    line-height: normal;
    text-decoration: none;
}

.form-footer .fpsc-google-theme-button:hover,
.form-footer .fpsc-google-theme-button:focus,
.form-footer .fpsc-google-theme-button:active,
.form-footer .fpsc-google-theme-button:active:focus {
    border-color: #c8c8c8 !important;
    background: #f7f7f7 !important;

    color: #333 !important;
    box-shadow: none !important;
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   GOOGLE ICON
   -------------------------------------------------------------------------- */

/*
 * Celowo:
 * - position: sticky,
 * - brak height na spanie,
 * - span ma tylko 30 px szerokości,
 * - SVG ma rzeczywiste 20 × 20 px.
 *
 * Nie używamy już klasy .btn-social na tym customowym przycisku,
 * więc stara reguła .btn-social > :first-child nie powinna go dotyczyć.
 */

/* --------------------------------------------------------------------------
   GOOGLE ICON
   -------------------------------------------------------------------------- */

.form-footer .fpsc-google-theme-button__icon {
    position: sticky;
    left: 14px;

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

    width: 30px;

    /* Celowo bez height. */
    margin: 0;
    padding: 0;

    border: 0;

    line-height: 0;
}

.form-footer .fpsc-google-theme-button__icon svg {
    display: block;

    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;

    margin: 0;
    padding: 0;

    vertical-align: middle;
}


/* --------------------------------------------------------------------------
   BUTTON LABEL
   -------------------------------------------------------------------------- */

.form-footer .fpsc-google-theme-button .btn-title-connect {
    display: block;

    margin: 0;
    padding: 0;

    line-height: normal;
    text-align: center;
}

/* ==========================================================================
   VAPIFY - GOOGLE REGISTRATION BUTTON
   ========================================================================== */

/*
 * Ta sekcja celowo kopiuje styl działającego przycisku Google
 * ze strony logowania, ale jest ograniczona tylko do kontenera:
 * .fpsc-registration-social
 *
 * Dzięki temu nie zmieniamy żadnej reguły przycisku logowania.
 */

.fpsc-registration-social {
    width: 100%;
    margin: 18px 0 0;
}

.fpsc-registration-social .fpsc-hook-buttons {
    width: 100%;
    margin: 0;
}


/* --------------------------------------------------------------------------
   BUTTON SIZE
   -------------------------------------------------------------------------- */

.fpsc-registration-social .fpsc-google-theme-button {
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
}


/* --------------------------------------------------------------------------
   GOOGLE BUTTON
   -------------------------------------------------------------------------- */

.fpsc-registration-social .fpsc-google-theme-button {
    position: relative;

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

    width: 100%;
    max-width: none;
    height: 38px;
    min-height: 38px;

    margin: 0;
    padding: 0 48px;

    border-color: #d6d6d6;
    background: #fff;
    box-shadow: none;

    color: #444;
    line-height: normal;
    text-decoration: none;
}

.fpsc-registration-social .fpsc-google-theme-button:hover,
.fpsc-registration-social .fpsc-google-theme-button:focus,
.fpsc-registration-social .fpsc-google-theme-button:active,
.fpsc-registration-social .fpsc-google-theme-button:active:focus {
    border-color: #c8c8c8 !important;
    background: #f7f7f7 !important;

    color: #333 !important;
    box-shadow: none !important;
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   GOOGLE ICON
   -------------------------------------------------------------------------- */

/*
 * Dokładnie ten sam układ ikony co na stronie logowania.
 */

.fpsc-registration-social .fpsc-google-theme-button__icon {
    position: sticky;
    left: 14px;

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

    width: 30px;

    /* Celowo bez height. */
    margin: 0;
    padding: 0;

    border: 0;

    line-height: 0;
}

.fpsc-registration-social .fpsc-google-theme-button__icon svg {
    display: block;

    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;

    margin: 0;
    padding: 0;

    vertical-align: middle;
}


/* --------------------------------------------------------------------------
   BUTTON LABEL
   -------------------------------------------------------------------------- */

.fpsc-registration-social .fpsc-google-theme-button .btn-title-connect {
    display: block;

    margin: 0;
    padding: 0;

    line-height: normal;
    text-align: center;
}


/* ==========================================================================
   REGISTRATION SEPARATOR
   ========================================================================== */

.fpsc-registration-separator {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    margin: 24px 0 20px;

    color: #777;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}

.fpsc-registration-separator::before,
.fpsc-registration-separator::after {
    content: "";

    flex: 1 1 auto;
    height: 1px;

    background: #d5d5d5;
}

.fpsc-registration-separator span {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

/* ==========================================================
   Mobile — cena + przycisk CrossSell w jednej linii
   ========================================================== */

@media (max-width: 767px) {

    .cs-product-sections .price-add-to-cart {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px;
        width: 100%;
    }

    .cs-product-sections .product-price-and-shipping {
        flex: 0 0 auto;
        margin: 0 !important;
        white-space: nowrap;
    }

    .cs-product-sections .product-add-to-cart {
        display: flex;
        flex: 0 0 auto;
        justify-content: flex-end;
        margin-left: auto;
    }

    .cs-product-sections .add-to-cart-form {
        margin: 0;
    }

    .cs-product-sections .qty-and-button-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin: 0 !important;
    }
}