/* ÉTAT OUVERT */
body.fps-gravure-open #fps-gravure-panel {
    transform: translateX(0);
}

body.fps-gravure-open #fps-gravure-overlay {
    opacity: 1;
    visibility: visible;
}

body.fps-gravure-open {
    overflow: hidden;
}

#fps-gravure-panel {
    position: fixed;
    top: 0;
    right: -42px;
    width: 100%;
    max-width: 520px;
    background: #fff;
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 9999;
    box-shadow: -6px 0 24px rgba(0,0,0,.15);
    height: 100vh; 
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#fps-gravure-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 9998;
}

#fps-gravure-form {
    width: 100%;
    max-width: 450px;
}

button.fps-gravure-close{
    position: absolute;
    top:15px;
    right:50px;
    font-size:35px;
}
.fps-section {
    margin-bottom: 24px;
}

.fps-section h4 {
    margin-bottom: 8px;
}

.fps-gravure-panel-inner {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
} 
button.fps-next-step, button.fps-next-step-step2, button.fps-next-step-position, button.fps-confirm-engraving{
    padding:1em;
    background-color: #ca322c;
    border-radius: 3px;
    color:white;
}

.fps-confirm-engraving {
    width: 100%;
    margin-top: 24px;
    padding: 1em;
    background-color: #ca322c;
    color: #fff;
    border-radius: 4px;
}

.fps-type-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.fps-type-buttons button {
    padding: 12px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    cursor: pointer;
}

.fps-type-buttons button.is-active {
    border-color: #ca322c;
    background: #ca322c;
    color: #fff;
}
button.fps-gravure-trigger{
    width: 100%;
    margin-top: 0.2em;
    background-color: darkblue;
    position: relative;
    .fps-gravure-is-free{
        position: absolute;
        font-size: 13px;
        top: 55%;
        right:10%;
        transform: translateY(-50%);
        padding:0.3em;
        border-right: 2px solid white;
    }
}

/* Positions */
.fps-position-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.fps-position {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s ease;
}

.fps-position img {
  width: 120px;
  height: auto;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}

.fps-position:hover {
  border-color: #aaa;
}

.fps-position.is-active {
  background: #ca322c;
  border-color: #ca322c;
}

.fps-position.is-active img {
  filter: brightness(0) invert(1);
}
/**
* Boutons de choix de la police
**/
.fps-font-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.fps-font-buttons button {
    padding: 14px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    cursor: pointer;
    font-size: 18px;
}

/* Preview sur l’input */
#fps_text.font-great-vibes {
    font-family: 'Great Vibes', cursive;
}

#fps_text.font-dancing {
    font-family: 'Dancing Script', cursive;
}

#fps_text.font-roboto {
    font-family: 'Roboto', sans-serif;
}

#fps_text.font-coiny {
    font-family: 'Coiny', sans-serif;
}

#fps_text.font-bentham {
    font-family: 'Bentham', serif;
}
#fps_text.font-edunswact {
    font-family: 'Edunswsact', serif;
}
#fps_text.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}
#fps_text.font-utendo {
    font-family: 'Utendo', sans-serif;
}

/* Styles réels */
.font-dancing {
    font-family: 'Dancing Script', cursive;
}

.font-coiny {
    font-family: 'Coiny', sans-serif;
}

.font-bentham{
    font-family: "Bentham", serif, 
}

.font-edunswact{
    font-family: "Edunswsact", serif;
}

.font-montserrat{
    font-family: "Montserrat", sans-serif;
}

.font-utendo{
    font-family: "Utendo", sans-serif;
}


/* Actif */
.fps-font-buttons button.is-active {
    border-color: #ca322c;
    background: #ca322c;
    color: #fff;
}

/*
* Icones 
*/
.fps-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 12px;
    max-height: 175px;
    overflow: hidden;
    transition: max-height 1s ease-in;
    &.seemore{
        max-height:1000px;
    }
}

#fps-icon-button-seemore{
    display:block;
    padding: 0.5em 1em;
    margin:0.4em auto;
    width:33%;
    background-color:#ca322c;
    border-radius: 5px;
    color: white;
}

.fps-section.fps-section-logo p{
    margin-bottom: 5px;
}

.fps-icon-tile {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all .15s ease;
}

.fps-icon-tile img {
    width: 100%;
    height: 48px;
    object-fit: contain;
}

.fps-icon-tile.is-active {
    border:2px solid #ca322c;
}

/*
* Hint concernant les uploads clients
*/
.fps-section.fps-section-logo p.fps-import-logo{
    margin-bottom: 0px;
}
.fps-upload-hint{
    color:red;
    font-size: 10px;
    strong{
        display: block;
        font-weight: bold;
    }
}


/* ================================
   Couleurs de gravure (pastilles)
================================ */

.fps-colors {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.fps-color {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ddd;           /* bordure par défaut */
    cursor: pointer;
    padding: 0;
    outline: none;
    background-clip: padding-box;
    transition: 
        border-color .2s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

/* Hover */
.fps-color:hover {
    border-color: #999;
    transform: scale(1.05);
}

/* Actif */
.fps-color.is-active {
    border-color: #ca322c;             /* rouge FPS */
    box-shadow: 0 0 0 2px rgba(202,50,44,.25);
}

/* Accessibilité focus clavier */
.fps-color:focus-visible {
    border-color: #ca322c;
    box-shadow: 0 0 0 3px rgba(202,50,44,.35);
}

/* Optionnel : couleur claire → bordure plus visible */
.fps-color[data-color="white"],
.fps-color[data-color="#fff"],
.fps-color[data-color="#ffffff"] {
    border-color: #bbb;
}

/* Par défaut desktop */
.fps-signature-mobile { display:none; }
.fps-signature-desktop { display:block; }

@media (max-width: 768px) {
    #fps-gravure-panel {
        width: 100%;
        max-width: none;
        right:0;
    }
    button.fps-gravure-trigger{
        .fps-gravure-is-free{
            right:3%;
        }
    }
    .fps-gravure-panel-inner{
        padding-top: 0;
    }
    button.fps-gravure-close{
        position: relative;
        top: unset;
        right: unset;
        margin: 0.5em 1em 0 0;
        font-size:25px;
        text-align: right;
    }
    .fps-signature-mobile { display:block; }
    .fps-signature-desktop { display:none; }
}