/* dienshop-ticket.css — Panier #ticket-curtain, checkout, paiement */

/* ======= #TICKET-CURTAIN (drawer panier latéral) ======= */
#ticket-curtain-trigger {
    right: 0
}

#ticket-curtain {
    position: fixed;
    top: 0;
    height: 100%;
    width: min(320px, 90vw);
    padding-top: 60px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    z-index: 3
}

#ticket-curtain {
    background: #cddff7 url("fd-ticket") repeat scroll 0 0;
    padding-top: 80px;
    right: -100%;
    -webkit-transition: right 0.5s;
    transition: right 0.5s
}

#ticket-curtain .curtain-tit {
    border-bottom: 3px dotted #990033;
    font-size: 1.9em;
    font-weight: 300;
    margin-bottom: 15px;
    padding-left: 25px
}

#ticket-curtain.speed-in {
    right: 0
}

#ticket-curtain.speed-out {
    right: 0;
    opacity: 0.7;
    background-color: #cddff7
}

#ticket-curtain>* {
    padding: 0 1em
}

#ticket-curtain h2 {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase;
    margin: 1em 0
}

#ticket-curtain .ticket-items {
    padding: 0
}

#ticket-curtain .ticket-items li {
    position: relative;
    padding: 1em;
    border-top: 1px solid #e0e6ef
}

#ticket-curtain .ticket-items li:last-child {
    border-bottom: 1px solid #e0e6ef
}

#ticket-curtain .cd-qty,
#ticket-curtain .cd-price {
    color: #a5aebc
}

#ticket-curtain .cd-price {
    margin-top: .4em
}

#ticket-curtain .cd-item-remove {
    position: absolute;
    right: 1em;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: url("../img/cd-remove-item.svg") no-repeat center center
}

#ticket-curtain .cd-item-remove:hover {
    background-color: #e0e6ef
}

#ticket-curtain .ticket-total {
    padding-top: 1em;
    padding-bottom: 1em
}

#ticket-curtain .ticket-total span {
    float: right
}

#ticket-curtain .ticket-total::after {
    content: '';
    display: table;
    clear: both
}

#ticket-curtain .checkout-btn {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #7dcf85;
    color: #FFF;
    text-align: center
}

#ticket-curtain .checkout-btn:hover {
    background: #a2dda8
}

#ticket-curtain .cd-go-to-cart {
    text-align: center;
    margin: 1em 0
}

#ticket-curtain .cd-go-to-cart a {
    text-decoration: underline
}

.aduana {
    display: inline-block;
    bottom: 5%;
    position: absolute;
    border: 1px solid #fff;
    padding: 5px 10px !important;
    width: 90%;
    text-align: center;
    border-radius: 3px;
    margin-left: 10px
}

/* Tablet */
@media only screen and (min-width:768px) {
    #ticket-curtain {
        width: 350px
    }
}

/* Desktop */
@media only screen and (min-width:1200px) {
    #ticket-curtain-trigger {
        right: 0
    }

    #ticket-curtain-trigger a {
        position: relative;
        width: 100px;
        border-left: none;
        background-color: #26292f
    }

    #ticket-curtain>* {
        padding: 0 2em
    }

    #ticket-curtain .ticket-items li {
        padding: 1em 2em
    }

    #ticket-curtain .cd-item-remove {
        right: 2em
    }

    #ticket-curtain {
        width: 30%;
        padding-top: 120px
    }
}

/* ======= CONTENU DU TICKET (#ticket, checkout, paiement) ======= */
/* Source: dsindex-ticket.css — section ticket/paiement */

#ticket {
    background-color: #fff;
    border: 1px solid #007abc;
    border-radius: 10px;
    font-family: trebuchet ms, helvetica, sans-serif;
    margin: 0 15px;
    padding: 10px
}

#ticket a {
    color: #000
}

#ticket a:hover {
    color: #007abc
}

#ticket ul li {
    font-size: 14px;
    letter-spacing: -1px;
    line-height: 25px;
    list-style: outside none none
}

#ticket span {
    display: inline-block;
    float: right;
    text-align: right
}

.ticketbas {
    border: 1px solid #990033;
    border-radius: 10px;
    height: 215px;
    margin: 15px;
    background-color: #fff
}

.seguir-comprando {
    background-color: #cddff7;
    border: 1px solid #007abc;
    border-radius: 10px;
    color: #007abc;
    font-size: 0.8em;
    padding: 10px;
    position: absolute;
    right: 18px;
    top: 61px;
    height: 35px
}

.validar-help {
    border: 1px solid #FFF;
    border-radius: 10px;
    margin: 9px 15px;
    display: inline-block;
    padding: 0 10px 0 15px;
    background: #caddee
}

.validar-help ol {
    list-style: decimal;
    padding: 10px
}

.validar-help ol li {
    margin-bottom: 15px
}

.validar-help span {
    color: #0c5177;
    font-variant: small-caps
}

@media only screen and (min-width:1200px) {
    .seguir-comprando {
        top: 93px;
        right: 33px
    }
}

.seguir-comprando:hover {
    background-color: #007abc;
    box-shadow: 0 0 4px 2px #fff inset;
    color: #fff
}

#paisos {
    margin-top: 5px;
    text-align: right
}

#formapago {
    font-size: 1.1em;
    line-height: 1.4em;
    margin-bottom: 5px;
    padding: 5px 4px 0 0;
    text-align: right
}

.pagosistema label {
    letter-spacing: 1px
}

/* Style pour les boutons radio */
input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s
}

input[type="radio"]:checked {
    background-color: green;
    border-color: green
}

input[type="radio"]:hover {
    background-color: #e0e0e0
}

.pagoamagat label {
    margin-left: 10px;
    cursor: pointer
}

#formapagoZ {
    border: 2px solid #fff;
    border-radius: 0 10px;
    box-shadow: 0 0 80px 40px #ffc850, 2px 2px 10px rgba(0, 0, 0, 0.7) inset;
    color: #fff;
    font-size: 1.2em;
    padding: 10px;
    text-align: center;
    text-shadow: 0 1px 0 #000;
    background: -webkit-linear-gradient(20deg, #990033 10%, #ff70a3 90%);
    background: linear-gradient(20deg, #990033 10%, #ff70a3 90%);
}

#ticketcontenido {
    color: #007abc;
    line-height: 15px;
    margin-bottom: 10px;
    padding: 5px 5px 0;
    text-align: left
}

#ticketcontenido span {
    float: right;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff
}

#paisPago {
    border: 1px solid #d2cec6;
    border-radius: 5px 0 0 5px;
    font-size: 1em;
    font-style: oblique;
    margin: 0 0 0 5px;
    padding: 2px 5px 2px 10px;
    width: 232px;
    background: rgb(246, 248, 249);
    background: -webkit-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%);
    background: linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9', GradientType=0)
}

option {
    font-size: 1.3em;
    font-style: normal;
    padding: 0 5px;
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, #cddff7 20%, #adbfd7 90%) repeat scroll 0 0;
    background: -webkit-linear-gradient(210deg, #cddff7 10%, #adbfd7 90%);
    background: linear-gradient(210deg, #cddff7 10%, #adbfd7 90%);
}

.validanula {
    display: flex;
    height: 30px;
    gap: 10px
}

.anular {
    cursor: pointer;
    font-weight: 400;
    font-size: 0.8em;
    padding: 4px 8px;
    text-align: center;
    text-transform: uppercase;
    line-height: 0.9;
    border-radius: 5px;
    margin-top: 3px;
    background: -webkit-linear-gradient(0deg, #757F9A 10%, #D7DDE8 90%);
    background: linear-gradient(0deg, #757F9A 10%, #D7DDE8 90%);
}

.anular:hover {
    color: #fff;
    background: -webkit-linear-gradient(180deg, #C04848 10%, #480048 90%);
    background: linear-gradient(180deg, #C04848 10%, #480048 90%);
}

.validar {
    cursor: pointer;
    border: 1px solid #666666;
    border-radius: 5px;
    font-size: 1.1em;
    flex: 1.5;
    padding: 5px 20px;
    text-align: center;
    text-transform: uppercase;
    background: -webkit-linear-gradient(0deg, #1D976C 10%, #93F9B9 90%);
    background: linear-gradient(0deg, #1D976C 10%, #93F9B9 90%);
}

.validar:hover {
    border: 1px solid #fff;
    background: -webkit-linear-gradient(0deg, #FF8008 10%, #FFC837 90%);
    background: linear-gradient(0deg, #FF8008 10%, #FFC837 90%);
}

#ticketdetalles {
    background-color: #fff;
    border: 1px solid #990033;
    border-radius: 10px;
    line-height: 25px;
    margin-bottom: 10px;
    padding: 5px 25px;
    text-align: left
}

#ticketdetalles span {
    float: right;
    padding-left: 10px
}

#cs_apagar {
    font-weight: bold
}

.pagoamagat {
    display: none
}

.cesta {
    margin-left: 200px;
    margin-right: -9px;
    margin-top: -100px;
    position: relative;
    text-align: center;
    width: 98px
}

.afegireina {
    display: block;
    margin: 0 auto;
    background-image: url(addcesta.png)
}

.afegireina:hover {
    background-position: -61px 0
}

.buybutton-cont {
    margin-left: 200px;
    margin-right: -9px;
    margin-top: -100px;
    position: relative;
    text-align: center;
    width: 98px
}

.buybutton {
    background-image: url("addcesta.png");
    display: block;
    margin: 0 auto
}

.cesta>h2 {
    display: inline-block;
    font-size: 1.7em;
    font-weight: 300;
    margin: 10px 3px 0 0;
    text-align: right
}

.cesta>h2 span {
    color: #ababab;
    font-size: 0.8em;
    letter-spacing: -1px
}

.borrarlinea {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    color: #990033;
    cursor: pointer;
    float: right;
    font-size: 1.4em;
    margin-top: 2px;
    padding: 0 0 0 6px
}

.avisolegal {
    font-size: 0.9em;
    line-height: 1em;
    padding-bottom: 20px;
    text-align: justify
}

@media screen and (max-width:480px) {
    .lascestas>h2 {
        font-size: 20px
    }

    .stabylo {
        margin-left: 0px
    }

    .avisolegal {
        font-size: 0.75em
    }

    .panel-fd {
        width: 230px
    }
}

/* EL VIDEO */
.embed-container {
    height: 0;
    margin-bottom: -25%;
    overflow: hidden;
    padding-bottom: 79%;
    padding-top: 80px;
    position: relative
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    height: 75%;
    left: 0;
    max-width: 1240px;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%
}