/*

    /css/new.css
    v1.0 [21 Mai 25]

*/


  /* RESET */
  body{margin:0;}
  div{font-size:20px; font-family:'Manrope'; box-sizing:border-box;}
  a{text-decoration:none;}
  h1, h2, h3{font-family:'Manrope';}
  h2{margin:0 0 0 0;}
  input[type="text"], input[type="password"], input[type="text"], textarea{font-family:'Manrope'; box-sizing: border-box; outline:none;}
  ul{padding-left:0;}


  /* STRUK */
  #main{width:100%;}

  #menu-basic-wrapper{background-color:#FFF; padding:1em 1em 1em 2em;}

    #menu-basic-logo{}
      #menu-basic-logo a{display:inline-block;}
      #menu-basic-logo img{width:55px;}

    #basic-wrapper{padding-top:106px;}


    /* WRAPPERS */
      .mid-wrapper{width:60em; margin:0 auto 0 auto; clear:both;}
        .mid-wrapper h1{font-weight:700; font-size: 1.2em; margin: 0 0 0.4em 0; text-align:center;}
        .mid-wrapper h2{font-weight:700; font-size: 1.5em; margin: 3em 0 0.4em 0; text-align:center;}
        .mid-wrapper h3{font-weight:600; font-size: 1.5em; margin: 0.7em 0 0.4em 0;}
        .mid-wrapper h4{font-weight:600; font-size: 1.200em; margin: 0.7em 0 0.4em 0;}

        .mid-subtitle{color:#555; font-size:0.9em; text-align: center;}

      .small-wrapper{width:25em; margin:0 auto 0 auto; clear:both;}

        div#small-title h1{font-size:1.5em; text-align: center;}




    /* PLANS (flex) */
    #plans-wrap{display: flex; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; gap: 3em;
      margin-block-start: 1.2rem;
      margin-block-end: 0;
    }
    .plan-column {flex-grow: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; border: 2px solid #EEE; border-radius: 20px; padding: 1.5em; box-sizing: border-box;}

      .pack-title {font-size: 1.8em; font-weight: 700; text-align: center; padding-bottom: 0.3em;}
      .pack-price {font-size: 2em; font-weight: 700; text-align: center; padding: 0.3em 0 0.2em 0;}
      .pack-time {font-size: 0.9em; font-weight: 500; color: #686868; text-align: center; padding-bottom: 0.4em;}
      .pack-user {font-weight: 600; text-align: center; padding: 0.4em 0 0.4em 0;}

      .pack-btn {text-align: center; margin: 1.5em 0 1.5em 0;}

    #pack-features-wrapper{clear: both; width: 20em; margin:0 auto 1em auto; padding:0 1em 1em 1em;}
    ul#pack-features{padding-left:0;}
    ul#pack-features li {position: relative; list-style: none; border-bottom: 2px solid #EEEEEE; padding: 0.5em 0.5em 0.5em 3em;}
    ul#pack-features li img{position: absolute; top: 0.7em; left: 1em; width:20px;}
    ul#pack-features li span{font-size:0.8em;}

    #pack-faq-wrapper{clear:both; width:40em; margin:2em auto 1em auto; padding:1em;}
      #pack-faq-title{font-size:2.5em; text-align:center; margin-bottom:0.5em;}
      #pack-faq-subtitle{font-size:0.8em; font-weight:500; color:#838383; text-align:center; margin:0.5em 0 0.5em 0;}
      ul#pack-faq{}
      ul#pack-faq li{list-style:none; padding:1.5em 0 1.5em 0; font-size:0.750em; color:#000; border-bottom:2px solid #EEE; line-height:1.5em;}
        ul#pack-faq li a{color:#000; font-weight:600;}
        ul#pack-faq li a:hover{text-decoration: underline;}


    /* HR */
    hr.centred{width:20%; height:3px; color:#CCC; border:none; background-color:#CCC;}
    hr.plain{width:100%; height:1px; color:#DDD; border:none; background-color:#DDD; margin:1.5em 0 1.5em 0;}


    /* BUTTONS */
    .btn-green-gt {background-color: #1DEB8E; color: #111; border-radius: 30px; padding: 1em 2em 1em 2em; font-size: 0.8em; font-weight: 600; border: 2px solid #1DEB8E; text-decoration: none;}
    .btn-yellow-gt {background-color: #F5FD32; color: #111; border-radius: 30px; padding: 1em 2em 1em 2em; font-size: 0.8em; font-weight: 600; border: 2px solid #F5FD32; text-decoration: none;}
    .btn-purple-gt {background-color: #5333ED; color: #FFF; border-radius: 40px; padding: 1em 2em 1em 2em; font-size: 0.8em; font-weight: 600; border: 2px solid #5333ED; text-decoration: none;}

    .btn-purple{background-color:#5333ED; color:#FFF; font-weight:500; font-size:0.750em; padding:1em 3em 1em 3em; border-radius:4px; outline:none; border:none; cursor:pointer;}
    .btn-black{background-color:#000000; color:#FFF; font-weight:500; font-size:0.750em; padding:1em 3em 1em 3em; border-radius:4px; outline:none; border:none; cursor:pointer;}


    /* ALERTS */
    .simple-alert{display:none; border-radius:5px; color:#FFF; padding:1em 1.5em 1em 1.5em; font-size:0.7em; margin-bottom:1.5em;}
    .alert-red{background-color:#F2441D;}
    .wide-alert{display:none; padding:2em; font-size:0.750em; text-align:center;}
      .wide-alert-red{background-color:#ED4E34; color:#FFF;}

    /* MSGBOX */
    #msgbox{display:none; position:absolute; z-index:24; left:4em; bottom:4em; background-color:#111; padding:1.5em 2.5em 1.5em 4em; color:#FFF; border-radius:10px; font-size:0.9em;}
    #msgbox img{position:absolute; left:1.5em; top:1.5em; width:20px;}



    /* PROCESS */
    #group-buttons-wrapper{width:22em; margin:0 auto 0 auto;}
    ul#group2buttons{}
    ul#group2buttons li{float:left; list-style: none; width:50%;}
    ul#group2buttons li a{display: block; font-size:0.7em; color:#3C403D; text-align:center; padding:1em;}
    ul#group2buttons li:first-child a{border:1px solid #111; border-top-left-radius:5px; border-bottom-left-radius:5px;}
    ul#group2buttons li:last-child a{border:1px solid #111; border-top-right-radius:5px; border-bottom-right-radius:5px; border-left:none;}
    ul#group2buttons li a{background-color:#FFF;}
    ul#group2buttons li a.on{background-color:#111; color:#FFF;}


    /* FORM */
    #form-wrapper{width:30em; margin:0 auto 2em auto; padding:0 4em 0 4em;}


    /* FORM ELEMENTS  */
    ul.form-items{margin:0 0 0 0;}
    ul.form-items li{list-style: none; margin-bottom:1em;}
    .form-items input[type="text"],.form-items input[type="password"]{width:100%; font-size:0.7em; border:1px solid #D9D9D9; border-radius: 4px; padding:0.8em 0.8em 0.8em 4em; box-sizing:border-box;}
    span.legend{font-size:0.6em; color:#555;}
    span.legend-s{font-size:0.550em; color:#555;}
    li#btn-submit-wrapper{float:left; margin-top:0;}

    .form-items input[type="submit"]{float:left; background-color:#5333ED; color:#FFF; font-weight:500; font-size:0.750em; padding:1em 3em 1em 3em; border-radius:4px; outline:none; border:none; cursor:pointer;}

    li#infos{clear:both; font-size:0.650em; line-height:1.8em;}
    .codeantispam{position:absolute; bottom:0; left:0; height:44px; padding:0.950em; background-color:#CCC; color:#111; font-size:0.7em; border-bottom-left-radius: 4px; border-top-left-radius: 4px;}
    input#antispam{height:44px; padding-left:6em;}
    .form-items input.red,.form-items textarea.red{border-color:#F22929;}

    li#create-account-informations{clear:both; font-size:0.6em; color:#555555;}


    /* FORM ICONED, EYED */
    .iconed{position:absolute; width:16px; height:16px; top:0.650em; left:0.8em;}
    .iconed img{display:block; width:16px; height:16px;}
    .eyed{position:absolute; width:16px; height:16px; top:0.1em; right:1em; padding:0.3em 0 0 0; text-align:center;}
    .eyed a{color:#111324; display:block;}
    .eyed img{width:16px;}



    /* FORM LOADER */
    .loader{float:left; width:32px; height:32px; margin:0.650em 0 0 0.8em; display:none;}
    .loader img{animation: spinner 2s linear infinite; }
    @keyframes spinner{0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

    .loadercss{position:relative; left: 50%; top: 50%; margin:-20px 0 0 -20px; border: 6px solid #5333ED; border-top: 6px solid transparent; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite;}
    @keyframes spin{to{transform: rotate(360deg);}}

      /* new loader full css   */
      .newloader{display:none; float:left; width:30px; height:30px; border:5px solid #5333ED; border-top:5px solid transparent; border-radius: 50%; animation: spin 1s linear infinite;
        margin:0.4em 0 0 1em;}


    /* PAYMENT */
    ul#payment-summary{float:left; width:100%; margin:0.5em 0 0.5em 0;}
    ul#payment-summary li{float:left; width:100%; list-style:none;}
      ul#payment-summary li:not(:last-child){border-bottom:2px solid #EEE;}

    ul#payment-summary li div{padding:1em; font-size:0.8em; }
    ul#payment-summary li div.unit-30{text-align:right;}
    ul#payment-summary li#coupon-line{display:none;}


    form#form-paiement{margin-block-end:0;}


        div#pay-mode{color:#555; padding:1.1em 1.1em 1.1em 0.8em;}
        div#pay-btn-wrapper{padding:0.250em 0 0.5em 1.1em; text-align:right;}
        span#pay-mode-txt{font-size:0.7em;}
        span.payment-tva{font-size:0.7em; color:#555;}
        #btn-payer{cursor:pointer; background-color:#5333ED; color:#FFF; border-radius:40px; padding:1.2em 3em 1.2em 3em; font-size:0.8em; font-weight:500; border:2px solid #5333ED;}

        /* pay stripe */
        #pay-stripe-wrap{float:right;}

          #pay-stripe-lock{float:left; margin-right:0.5em;}
          #pay-stripe-text{float:left; font-size:0.6em; color:#777; margin-right:0.250em;}
          #pay-stripe-logo{float:left; padding-top:0.160em;}



          img#stripe{width:30px;}


        /* code promo */
        #alert-codepromo{clear:both;}
        #payment-coupon-handler{float:left; width: 100%; padding:1em;}
          #payment-coupon-handler a{float:left; color:#111; font-size:0.7em;}
          #payment-coupon-handler img{display:inline-block; margin:0 0 0 0.5em; width:18px; vertical-align: middle;}

          #form-coupon-wrapper{display:none; float:left; width:100%; margin-bottom:1em; padding-left:1em;}
          form#form-coupon input{float:left;}
            form#form-coupon input[type="text"]{height:38px; border:2px solid #111; font-size:0.7em; padding:0.5em;}
            form#form-coupon input[type="submit"]{height:38px; border:2px solid #111; font-size:0.7em; padding:0.6em 1em 0.6em 1em; background-color:#111; color:#FFF; cursor:pointer;}
            #loader-coupon{float: left; width: 32px; height: 32px; margin: 0.1em 0 0 0.8em; display:none;}
            #loader-coupon img{animation: spinner 2s linear infinite;}

            a#btn-codepromo-del{position:absolute; left:1em; top:1.150em; color:#111;}

            img#coupon-del-icon{width:18px;}

            /* loader pay */
            .overlaywhite img{position:fixed; width:40px; height:40px; top:50%; left:50%; margin-left:-20px; margin-top:-20px; z-index:21; animation: spinner 2s linear infinite;}


    /* OVERLAY */
    .overlay{position:absolute; display:none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); justify-content: center; align-items: center; z-index: 10;}


    /* CODE ACTIVATION */
    .code-container{display:flex; gap:15px;
      align-items: center;
      justify-content: center;
    }
    .code-input {width:55px; height:60px; font-size: 38px; font-weight:600; text-align:center; border:1px solid #ccc; border-radius:5px;}
    .error {color:red; margin-top: 10px; text-align:center; font-size:0.8em; padding:10px;}

    input[type="submit"].on{cursor:pointer;}
    input[type="submit"].off{cursor:not-allowed;}     /* sens interdit */






    /* CLASSES */
    .p-rela{position:relative;}

      /* UNIT */
      .unit{float:left; width:100%;}
      .unit-30{float:left; width:30%;}
      .unit-40{float:left; width:40%;}
      .unit-50{float:left; width:50%;}
      .unit-60{float:left; width:60%;}
      .unit-33{float:left; width:33.333%;}
      .unit-70{float:left; width:70%;}


    /* FONTS */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url(manrope.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }