:root
{
    --transition-duration : 200ms;    
}

.infos-sub 
{
    font-size: 0.85em;
    color: rgba(0, 0, 0, 0.4);
}

.lock-scroll
{
    overflow:   hidden;
}

/*
---- GALLERY
*/
.gallery .image-container .btn-cart
{
    display:    none;
    position:   absolute;
	top: 		15px;
	right: 		15px;
	width: 		25px;
	height: 	25px;
}

.gallery .image-container .infos
{
    font-size:      15px;
    color:          rgba(0, 0, 0, 0.6);
}


.gallery .image-container .btn-cart svg
{
    position:       absolute;
    top:            0;
    left:           0;
	width: 			100%;
	height: 		100%;
	cursor : 		pointer;
}

.artwork-series
{
    font-family:    'Kern-i';
}

/*
---- BUBBLE FOR SELECT
*/

.bubble 
{
    position: fixed;
    font-size: 12px;
    padding: 0.5em;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 32px;
  border-width: 12px 12px 0;
  border-style: solid;
  border-color: #ffffff transparent transparent;
}


/*
---- POP-UP
*/
.pop-up
{
    position:   fixed;
    top:        100px;
    right:      1.25em;
    width:      25%;
    max-height: 75%;
    min-width:  450px;
    background-color: rgba(255,255,255,1);
    display:    none;
    padding:    1em 1em 1em 1em;
    border-radius: 5px;
    box-shadow: 0 0 15px 2px rgba(0,0,0,0.4);
    overflow-y:   scroll;
    opacity:    0.0;
    transition: opacity var(--transition-duration);
}

.pop-up p
{
    font-size:  1em;
}

/*
---- CART MENU
*/
#cart-menu
{
	position:   fixed;
	top: 		30px;
	right: 		1em;
    cursor:     pointer;
    font-size:  1.5vw;
    display:    none;
    background-color: white;
    padding: 0.25em;
    border-radius: 5px;    
    transform-origin: 50% 50%;
}


#cart-menu.shake {
  animation: cart-shake-rotate 0.5s cubic-bezier(.36,.07,.19,.97) 2;
}

@keyframes cart-shake-rotate {
  0%   { transform: translateX(0) rotate(0); }
  15%  { transform: translateX(-4px) rotate(-1deg); }
  30%  { transform: translateX(4px) rotate(1deg); }
  45%  { transform: translateX(-3px) rotate(-0.8deg); }
  60%  { transform: translateX(3px) rotate(0.8deg); }
  75%  { transform: translateX(-2px) rotate(-0.5deg); }
  90%  { transform: translateX(2px) rotate(0.5deg); }
  100% { transform: translateX(0) rotate(0); }
}


#cart-shipping-infos
{
    padding:    0.5em 0 0.5em 0;
}

/*
---- CHECKOUT RETURN
*/
#checkout-return
{
    height:     200px;
}


/*
---- CART CONTENT
*/
.pop-up.reveal
{
    opacity:    1.0;
}


#cart-content p#thanks
{
    margin: 0;
}


#cart-content #cart-table 
{
    position: relative;
    width: 100%;
}

#cart-content #cart-table-disable
{
    display:    none;
    position:   absolute;
    width:      100%;
    height:     100%;
    top:        0;
    left:       0;
    background-color: rgba(255,255,255,0.6);
}


.cart-row
{
    display :           flex;
    gap :               0.5em;
    margin-bottom:      0.5em;
}

#cart-content #cart-table .td-image img
{
    height:         150px;
}

#cart-content #cart-table .td-cart-title
{
    flex :      3;
}


#cart-content #cart-table .td-cart-price
{
    text-align:     center;
}

#cart-content #cart-table .td-btn-remove-cart
{
    flex:           2;
    text-align:     right;
}

#cart-content #cart-table .btn-remove-cart
{
    font-size:      0.8em;
    color:          rgba(0,0,0,0.4); 
    cursor:         pointer;
    animation:      color 200ms;
}

#cart-content #cart-table .btn-remove-cart:hover
{
    color:          rgba(0,0,0,1.0);
}

#cart-content #cart-total
{
    font-size:          1.25em;
    padding:            0 0 0.5em 0;
    text-align:         right;
}

#cart-content #btn-cart-checkout,
#cart-content #btn-cart-ask
{
    display:            flex;
    padding:            0.5em;
    height:             44px;
    box-sizing:         border-box;
    background-color: black;
    color:              white; 
    border-radius:      5px;
    cursor:             pointer;
    justify-content:    center;
    align-items:        center;
    
    -webkit-tap-highlight-color: transparent;
}

#cart-content #btn-cart-ask.sending
{
    cursor:             wait;
}

#cart-content #cart-inform
{
    padding-top :       0.5em;
    padding-bottom :    0.5em;
    border:             1px solid rgba(0,0,0,0.2);
    margin-bottom :     0.5em;
    border-radius:      5px;
    text-align:         center;
}

/*
---- CHECKOUT
*/
#checkout
{
    background-color:   white; 
    display:            none;
    position:           fixed;
    width:              100vw;
    height:             100dvh;
    top:                0;
    left:               0;
    opacity:            0;
    transition:         opacity var(--transition-duration);
    overflow-y:         scroll;
}

#checkout.reveal
{
    opacity:            1.0;
}

#btn-close-checkout
{
    display:        none;
    position:       absolute;
    right:          10px;
    top:            10px;
    font-size:      1.25em;
    border-bottom:  1px solid rgba(0,0,0,0.2);
    cursor:         pointer;
}

/*
page-store-ask.php
*/

.artwork-form 
{
    position :      relative;
  display:          flex;
  flex-direction:   column;
  gap:              0.5em;
  margin-top:       1em;
  margin-bottom:    1em;
    padding-top: 1em;
  border-top:       1px solid #ddd;

}

.artwork-form #artwork-form-disable
{
    display:            none;
    position:           absolute;
    width:              100%;
    height:             100%;
    top:                0;
    left:               0;
    background-color:   rgba(255,255,255,0.6);
}


.artwork-form p
{
    font-family:    "Kern-r";
    font-size:      0.75em;
    color:          black;
    margin-bottom:  0.5em;
}

.artwork-form label
{
    font-family:    "Kern-r";
    font-size:      0.85em;
    color:          black;
    margin-bottom:   4px;
}

.artwork-form .form-row {
  display:          flex;
  gap:              0.5em;
  flex-wrap:        wrap;
}

.artwork-form  .form-group {
  display:          flex;
  flex-direction:   column;
  flex:             1; 
}

.artwork-form   input {
  padding:          8px;
  border:           1px solid #ccc;
  border-radius:    5px;
}

.artwork-form .error-message {
  color: #b00020;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.artwork-form input.invalid {
  border-color: #b00020;
}

/* 
-------------- LOADER
*/

.lds-ring 
{
    display: inline-block;
    position: relative;
    width: 28px;
    height: 28px;
}

.lds-ring div 
{
    box-sizing: border-box;
    display: block;
    position: absolute;
    top : 4px;
    width: 20px;
    height: 20px;
    margin: 0px;
    border: 4px solid white;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: white transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring 
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
    



@media screen and (max-width: 640px) 
{
    p.text-intro
    {
        width:      80%;
    }

    #cart-menu 
    {
        font-size:  5vw;
        top:        18px;
    }



    .gallery .image-container .btn-cart
    {
	    top: 		10px;
	    right: 		10px;
        width:      50px;
        height:     50px;
    }

    .gallery .image-container .btn-cart svg
    {
        width:      24px;
        height:     24px;
        left:       26px;
    }


    .gallery .image-container svg .icon.icon.info
    {
	    stroke-width: 			1px;
    }


    .gallery .title
    {
        font-size:  3.75vw;
    }

    .gallery .image-container .infos
    {
        font-size:  3vw;
    }

    .pop-up
    {
        top:        62px;
        left:       0;
        right:      unset;
        min-width:  unset;
        max-height: 70%;
        width:      100%;
        box-sizing: border-box;
    }

    .btn-remove-cart
    {
        font-size:  1.05em;
    }
}