/**
* 2010-2026 SwissGeek | Web Developer Freelance
*
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https:// opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https:// devdocs.prestashop.com/ for more information.
*
* @Module		SGK CheckOut
* @Description	One-page checkout replacing the native order tunnel, with a side cart drawer, address autocompletion and inline carrier and payment widgets.
* @Version		1.2.5
* @Copyright	SwissGeek | Web Developer Freelance <https://swissgeek.dev/>
* @support		Support Requests <https://admin.swissgeek.dev/forms/ticket?styled=1&with_logo=1>
* @Blog			Breaking News <https://news.swissgeek.dev/> <https://news.prestageek.ch/>
* @Addons		Developments <https://prestageek.ch/> <https://add.swissgeek.dev/>
*
* @license		http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*				Valid for 1 website (or project) for each purchase of license International Registered 
*				Trademark & Property of SwissGeek. More information on <https://swissgeek.dev/license/>
*/

/* Panier latéral SGK CheckOut — chargé sur toutes les pages sauf le tunnel et la page panier. */

.sgk-canvas {
    position: fixed;
    inset: 0;
    z-index: 1300;
}

.sgk-canvas[hidden],
.sgk-canvas [hidden] {
    display: none !important;
}

.sgk-canvas__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .42);
    opacity: 0;
    transition: opacity .22s ease;
}

.sgk-canvas.is-open .sgk-canvas__backdrop {
    opacity: 1;
}

.sgk-canvas__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(420px, 100%);
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s ease;
    box-shadow: -12px 0 32px rgba(0, 0, 0, .14);
}

.sgk-canvas.is-open .sgk-canvas__panel {
    transform: translateX(0);
}

.sgk-canvas__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.sgk-canvas__head h2 {
    margin: 0;
    font-size: 1.02rem;
}

.sgk-canvas__close {
    background: none;
    border: 0;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    color: #6b6b75;
}

.sgk-canvas__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 18px;
}

.sgk-canvas__empty {
    color: #6b6b75;
    font-size: .92rem;
    padding: 24px 0;
    text-align: center;
}

.sgk-canvas__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.sgk-canvas__thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 6px;
    overflow: hidden;
    background: #f4f4f6;
}

.sgk-canvas__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sgk-canvas__desc {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .88rem;
}

.sgk-canvas__name {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.sgk-canvas__attr {
    display: block;
    color: #6b6b75;
    font-size: .82rem;
    margin-bottom: 6px;
}

.sgk-canvas__stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 6px;
    overflow: hidden;
}

.sgk-canvas__stepper button {
    width: 30px;
    height: 30px;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
}

.sgk-canvas__stepper span {
    min-width: 32px;
    text-align: center;
    font-size: .88rem;
}

.sgk-canvas__side {
    text-align: right;
    font-size: .9rem;
}

.sgk-canvas__price {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.sgk-canvas__remove {
    background: none;
    border: 0;
    padding: 0;
    font-size: .8rem;
    color: #6b6b75;
    cursor: pointer;
    text-decoration: underline;
}

.sgk-canvas__confirm {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fdecea;
    border-radius: 6px;
    font-size: .82rem;
}

.sgk-canvas__confirm button {
    background: none;
    border: 0;
    padding: 0 6px;
    cursor: pointer;
    font-weight: 600;
    color: #96261a;
}

.sgk-canvas__foot {
    flex: 0 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
    padding: 14px 18px 18px;
}

.sgk-canvas__foot[hidden] {
    display: none;
}

.sgk-canvas__voucher {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.sgk-canvas__voucher input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 6px;
}

.sgk-canvas__voucher button {
    min-height: 40px;
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    background: #1b1b1f;
    color: #fff;
    cursor: pointer;
    font-size: .88rem;
}

.sgk-canvas__totals {
    margin: 0 0 12px;
}

.sgk-canvas__line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: .9rem;
}

.sgk-canvas__line dt,
.sgk-canvas__line dd {
    margin: 0;
}

.sgk-canvas__line--total {
    border-top: 1px solid rgba(0, 0, 0, .1);
    margin-top: 6px;
    padding-top: 10px;
    font-weight: 700;
    font-size: 1.02rem;
}

.sgk-canvas__cta {
    display: block;
    text-align: center;
    padding: 14px 18px;
    border-radius: 8px;
    background: #c9461f;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.sgk-canvas__cta:hover {
    background: #a93816;
    color: #fff;
}

.sgk-canvas__link {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: .86rem;
    color: #6b6b75;
}

@media (prefers-reduced-motion: reduce) {
    .sgk-canvas__panel,
    .sgk-canvas__backdrop {
        transition: none;
    }
}