/* =================================
   OUSTAOO FORMS
================================= */

/* Carte */

.app-card{

    max-width:900px;

    margin:auto;

}


/* Introduction */

.oa-intro{

    margin:0 0 35px;

    color:#666;

    line-height:1.6;

}


/* =================================
   SECTION
================================= */

.oa-section{

    margin-bottom:40px;

    padding-bottom:35px;

    border-bottom:1px solid #ececec;

}

/*
.oa-section:last-of-type{

    border-bottom:none;

    padding-bottom:0;

}
*/

.oa-section h2{

    margin:0 0 25px;

    font-size:22px;

    font-weight:700;

}


/* =================================
   LABELS
================================= */

.oa-section label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#333;

}


/* =================================
   CHAMPS
================================= */
.oa-section input[type="url"],
.oa-section input[type="text"],
.oa-section input[type="email"],
.oa-section input[type="password"],
.oa-section input[type="tel"],
.oa-section textarea,
.oa-section select{

    width:100%;

    height:50px;

    padding:0 16px;

    margin-bottom:20px;

    border:1px solid #d9d9d9;

    border-radius:12px;

    font-size:15px;

    transition:.2s;

    background:#fff;

}


.oa-section textarea{

    height:120px;

    padding:15px;

    resize:vertical;

}


.oa-section input:focus,
.oa-section textarea:focus,
.oa-section select:focus{

    outline:none;

    border-color:var(#DCAD56);

    box-shadow:0 0 0 3px rgba(220,173,86,.15);

}


/* =================================
   LIGNES
================================= */

.oa-row{

    display:flex;

    gap:20px;

}


.oa-col{

    flex:1;

}


/* =================================
   TEXTE AIDE
================================= */

.oa-help{

    margin:0 0 20px;

    color:#666;

    font-size:14px;

}


/* =================================
   DOMAINE
================================= */

.domain-field{

    display:flex;

    align-items:stretch;

}


.domain-field input{

    margin:0;

    border-radius:12px 0 0 12px;

}


.domain-field span{

    display:flex;

    align-items:center;

    padding:0 18px;

    background:#f5f5f5;

    border:1px solid #d9d9d9;

    border-left:none;

    border-radius:0 12px 12px 0;

    white-space:nowrap;

    color:#666;

}


.domain-preview{

    margin-top:15px;

    font-size:15px;

}


#domain-preview{

    color:var(--oustaoo-orange);

}


/* =================================
   CONFIRMATION
================================= */

#slug-confirmation{

    margin-top:25px;

    padding:20px;

    background:#FFF9ED;

    border:1px solid #F0D59A;

    border-radius:14px;

}


/* =================================
   OFFRE
================================= */

.oa-offer{

    border:2px solid var(#DCAD56);

    border-radius:18px;

    padding:25px;

    background:#fffdf8;

}


.oa-offer-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

}


.oa-offer-header h3{

    margin:0;

    font-size:24px;

}


.oa-offer-header p{

    margin:8px 0 0;

    color:#666;

}


.oa-price{

    text-align:right;

    font-size:36px;

    font-weight:700;

    color:var(--oustaoo-orange);

    white-space:nowrap;

}


.oa-price small{

    display:block;

    font-size:14px;

    color:#666;

    font-weight:400;

}


/* =================================
   AVANTAGES
================================= */

.oa-features{

    margin:25px 0 0;

    padding:0;

    list-style:none;

}


.oa-features li{

    margin:12px 0;

    color:#333;

}


/* =================================
   CHECKBOX
================================= */

.oa-checkbox{

    display:flex !important;

    align-items:flex-start;

    gap:12px;

    cursor:pointer;

    font-weight:500;

}


.oa-checkbox input[type="checkbox"]{

    width:18px !important;

    height:18px !important;

    min-width:18px;

    margin-top:2px;

    margin-bottom:0 !important;

    accent-color:var(--oustaoo-orange);

}


.oa-checkbox span{

    line-height:1.5;

}


/* =================================
   ACTIONS
================================= */

#create_restaurant{

    width:100%;

    height:56px;

    margin-top:20px;

    border:none;

    border-radius:14px;

    background:var(--oustaoo-orange);

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}


#create_restaurant:hover:not(:disabled){

    background:#c45725;

}


#create_restaurant:disabled{

    background:#d6d6d6;

    cursor:not-allowed;

}

/* =================================
   CHAMP DOMAINE
================================= */

.domain-field{

    display:flex;

    align-items:stretch;

}

.domain-field input{

    margin:0;

    border-radius:12px 0 0 12px !important;

    border-right:none;

}

.domain-field span{

 height:50px;

 padding:0 12px;

 font-size:13px;

 font-weight:500;

 display:flex;

 align-items:center;


 background:#f5f5f5;

 border:1px solid var(--oustaoo-border);

 border-radius:0 12px 12px 0;

 white-space:nowrap;

 color:#666;
}


/* =================================
   ACTIONS
================================= */

.oa-actions{

    margin-top:40px;

    display:flex;

    justify-content:flex-end;

}


/* =================================
   BOUTON PRINCIPAL
================================= */

#create_restaurant{

    min-width:280px;

}


#create_restaurant:disabled{

    opacity:.6;

    cursor:not-allowed;

}


/* =================================
   BOUTON SUBMIT FORMULAIRE
================================= */

#create_restaurant{

    background:var(--oustaoo-orange);

    color:#fff;

    border:none;

}


#create_restaurant:not(:disabled){

    background:var(--oustaoo-orange);

    color:#fff;

    cursor:pointer;

}


#create_restaurant:not(:disabled):hover{

    opacity:.9;

}


#create_restaurant:disabled{

    background:#d1d5db;

    color:#fff;

    cursor:not-allowed;

}

/* ==========================================
   OFFRES PRODUITS
========================================== */


/* ==========================================
   OFFRES PRODUITS - TABS
========================================== */


.oa-offer-tabs {

    display: flex;

    gap: 8px;

    margin-bottom: 30px;

    background: #f6edd9;

    padding: 6px;

    border-radius: 16px;

    width: fit-content;

}



.oa-offer-tab {

    border: 0;

    background: transparent;

    padding: 12px 30px;

    border-radius: 12px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    color: #555;

    transition: all .25s ease;

}



.oa-offer-tab:hover {

    color: #d86730;

}



.oa-offer-tab.is-active {

    background: #d86730;

    color: #fff;

    box-shadow: 0 5px 15px rgba(216,103,48,.25);

}


/* ==========================================
   CONTENEUR OFFRES
========================================== */


.oa-offers {

    display: none;

}



.oa-offers.is-active {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 25px;

}



/* CARTE */

.oa-offer {

    position: relative;

    display: block;

    background: white;

    border: 2px solid #eee;

    border-radius: 20px;

    padding: 25px;

    cursor: pointer;

    transition: all .25s ease;

}


.oa-offer:hover {

    transform: translateY(-4px);

    border-color: #d86730;

}



/* cacher radio */

.oa-offer input[type="radio"] {

    position: absolute;

    opacity: 0;

}



/* sélection */

.oa-offer.is-active {

    border-color: #d86730;

    box-shadow: 0 10px 30px rgba(216,103,48,.15);

}



/* HEADER */

.oa-offer-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap:20px;

}



.oa-offer h3 {

    margin:0 0 8px;

    font-size:22px;

}


.oa-offer p {

    margin:0;

    color:#666;

}



/* PRIX */

.oa-price {

    text-align:right;

    white-space:nowrap;

}


.oa-price strong {

    display:block;

    font-size:26px;

    color:#d86730;

}



/* ancien prix */

.oa-old-price {

    display:block;

    font-size:14px;

    color:#999;

    text-decoration:line-through;

    margin-bottom:3px;

}



/* remise */

.oa-discount {

    display:inline-block;

    margin-top:8px;

    padding:5px 10px;

    border-radius:20px;

    background:#e8f6ed;

    color:#218739;

    font-size:13px;

    font-weight:600;

}



/* FEATURES */

.oa-features {

    list-style:none;

    padding:20px 0 0;

    margin:20px 0 0;

    border-top:1px solid #eee;

}


.oa-features li {

    margin-bottom:10px;

    color:#444;

}

/* ==========================================
   SWITCH PRODUIT
========================================== */


.oa-offer {

    position: relative;

    
    padding-bottom: 70px;

}



.oa-product-switch-input {

    position: absolute;

    opacity: 0;

}



/* emplacement switch */

.oa-product-switch {

    position: absolute;

    bottom: 20px;

    right: 20px;

    width: 52px;

    height: 28px;

    background: #ddd;

    border-radius: 30px;

    transition: .25s ease;

}



/* bouton intérieur */

.oa-product-switch::after {

    content: "";

    position: absolute;

    width: 22px;

    height: 22px;

    top: 3px;

    left: 3px;

    background: white;

    border-radius: 50%;

    box-shadow: 0 2px 5px rgba(0,0,0,.15);

    transition: .25s ease;

}



/* actif */

.oa-product-switch-input:checked + .oa-product-switch {

    background: #d86730;

}



.oa-product-switch-input:checked + .oa-product-switch::after {

    transform: translateX(24px);

}



/* carte sélectionnée */

.oa-offer:has(.oa-product-switch-input:checked) {

    border-color: #d86730;

    box-shadow: 0 10px 30px rgba(216,103,48,.15);

}

/* MOBILE */

@media(max-width:700px) {


    .oa-offers {

        grid-template-columns:1fr;

    }


    .oa-offer-header {

        flex-direction:column;

    }


    .oa-price {

        text-align:left;

    }


}
/* =================================
   RESPONSIVE
================================= */

@media (max-width:768px){

    .oa-row{

        flex-direction:column;

        gap:0;

    }

    .oa-offer-header{

        flex-direction:column;

    }

    .oa-price{

        text-align:left;

    }

}


@media (max-width:700px){

    .oa-row{

        flex-direction:column;

        gap:0;

    }

}