@charset "utf-8";
/* CSS Document */

    body {
      margin: 0;
      padding: 0;
      font-family: 'Roboto', sans-serif;
      background: #0f0f0f;
      color: #f1f1f1;
      overflow-x: hidden;
      background-image: url("images/bg.webp");  
    }

table {border-collapse: collapse;}
table td {padding: 0; border: none;}

    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;      
      min-height: 100vh;
      padding: 0 20px;
    }

    .hero h1 {
      font-size: 3em;
      margin-bottom: 20px;
      opacity: 0;
    }

    .hero p {
      font-size: 1.2em;
      max-width: 700px;
      margin-bottom: 30px;
      opacity: 0;
    }

    .hero a {
      color: #9dc323;
      text-decoration: none;
      font-weight: bold;
      border-bottom: 1px solid #9dc323;
      transition: all 0.3s ease-in-out;
    }

    .hero a:hover {
      color: #fff;
      border-color: #fff;
    }

    .animated-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
        
      /*background: radial-gradient(#1a1a1a, #000);*/
      animation: moveBg 20s linear infinite;
    }

    @keyframes moveBg {
      0% {background-position: 0 0;}
      100% {background-position: 1000px 1000px;}
    }
      
    .button {display: inline-block; padding:30px 40px 30px 40px; border-radius: 40px;  color:#ffffff !important; font-size: 28px; font-weight: bold; border:0px !important; text-decoration: none; position: relative; z-index:10; background-color: #9dc323;}
    .button:hover {background-color: #698510;}
      
    .button_buy, .button_in_cart, .button_return { padding:10px 20px 10px 20px; border-radius: 20px;  color:#ffffff !important; font-size: 16px; font-weight: bold; border:0px !important; text-decoration: none; position: relative; z-index:10; width: 100px;}
    .button_buy:hover {background-color: #698510;} 
  
    .button_buy {background-color: #9dc323; display: inline-block;} 
    .button_in_cart {background-color: #565656; display: none; }
      
      
    .button_return {background-color: #565656; display: inline-block; width:200px; text-align: center;} 
    .button_return:hover {background-color: #404040;}
      
      #page_cart,#page_order {margin: 0 auto;width: 1200px;}
        

      #tab_buy_links, #tab_cart {margin-top: 50px;padding-bottom: 40px;}

     .tab {margin: 0 auto;width: 100%;background-color: rgba(0, 0, 0, 0.7); border-radius: 20px; padding-bottom: 10px; padding-top: 10px;}     
      
      .tab td {text-align: center; padding: 10px;}
      .tab a {color: #9dc323; text-decoration: none; border-bottom: 1px solid; }
      .tab a:hover {border-bottom:none;}   
      .tab_header {color: #9dc323; height: 60px; font-weight: bold;}      
      
      .tab_form {padding-top: 20px; padding-bottom: 20px;}
      .tab_form td {text-align: left !important; padding: 10px 30px 10px 30px !important;}
      .tab_form input[type="text"] {width: 400px; height:25px; border-radius: 10px; border: 0; padding-left: 5px; outline: 0;}
      .tab_form input[type="submit"] {padding:10px 20px 10px 20px; border-radius: 20px;  color:#ffffff; font-size: 16px; font-weight: bold; border:0px !important; text-decoration: none; position: relative; z-index:10; width: 250px; height:40px; background-color: #9dc323; cursor:pointer;}
      .tab_form input[type="submit"]:hover {background-color: #698510;}
      .tab_form textarea {width:600px; height:200px; border-radius: 10px; border: 0; padding: 5px;  outline: 0;}
      
      
      
     .hidden_url {cursor: pointer; background-color: #BDBDBD; width:calc(100% - 40px); height:25px; padding-top: 5px; color:#000000; margin-left: 20px; margin-right: 20px;}
     .hidden_url:hover {background-color: #666666; color: #FFFFFF;}
      
      
      .show_url a {color:#9dc323; text-decoration: none; margin-left: 20px;}

      
      .full_price {text-decoration-line: line-through; color: #777777; margin-right: 20px;}
      
    .cart_empty { margin-top: 50px; margin-bottom: 50px; font-size: 24px;}    

      #cart {position: fixed; top: 50%; right: 0; transform: translateY(-50%);  background-color: rgba(157, 195, 35, 0.95); border-top-left-radius: 20px;border-bottom-left-radius: 20px; padding: 30px; display: none;}
      #cart img {width: 50px;}


    .cart_del {color:#474747; cursor: pointer;}
    .cart_del:hover {color: #969696;} 
      
        #cart_order {
            background-color: #f25300;
            color: #fff;
            text-align: center;
            line-height: 25px; /* вирівнювання цифри по центру */
            border-radius: 50%; /* робимо ідеальне коло */
            animation: blink 1s infinite;
            width: 25px;
            height: 25px;
            position: absolute;
            right: 0;
            top: 0;
            margin-right: 20px;
            margin-top: 20px;
            font-size: 16px;
        }

        @keyframes blink {
            0% {
                background-color: #f25300;
            }

            50% {
                background-color: rgba(242, 83, 0, 0.5);
            }
            100% {
                background-color: #f25300;
            }
        }
      
      .crumbs {color: #D4D4D4; margin-top: 20px;}
      .crumbs a {text-decoration: none; border-bottom: 1px solid; color: #D4D4D4;}
      .crumbs a:hover {border-bottom: none;}
      
      .quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.qty-input {
  width: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

.qty-btn {
  background: #565656;
  color: #fff;
  border: none;
  padding: 5px 10px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
  width:30px;
 
}

.qty-btn:hover {
  background: #7fa01b;
}


.order-status {font-size: 20px;line-height:1.5;}
.order-status a {color: #9dc323; text-decoration: none;}
.order-status a:hover {color: #698510;}


.page {width: 1250px; margin: 0 auto;}    
    
.mobile_tab {margin: 0 auto;width: 100%;background-color: rgba(0, 0, 0, 0.7); border-radius: 20px; padding-top: 20px; padding-bottom: 20px; }      
.mobile_tab td {text-align: center; padding:20px 10px 20px 10px;}
.mobile_tab a {color: #9dc323; text-decoration: none; border-bottom: 1px solid; }
.mobile_tab a:hover {border-bottom:none;}
    
  
    
    
.char_title {color: #9dc323; margin-bottom: 5px;}  
    
    .mobile_page {padding:10px; margin-bottom: 20px;}
    
.mobile_tab_form {width:100%;}
.mobile_tab_form td {text-align: left !important; padding: 5px 10px 5px 10px !important;}
.mobile_tab_form input[type="text"] {width: calc(100% - 10px); height:25px; border-radius: 10px; border: 0; padding-left: 5px; outline: 0;}
.mobile_tab_form input[type="submit"] {padding:10px 20px 10px 20px; border-radius: 20px;  color:#ffffff; font-size: 16px; font-weight: bold; border:0px !important; text-decoration: none; position: relative; z-index:10; width: 250px; height:40px; background-color: #9dc323; cursor:pointer;}
.mobile_tab_form input[type="submit"]:hover {background-color: #698510;}
.mobile_tab_form textarea {width:calc(100% - 10px); height:100px; border-radius: 10px; border: 0; padding: 5px;  outline: 0;} 

    .mobile_tab_form p {margin-top: 5px;} 
    
.mobile_cart_total_price {margin: 0 auto;width: 100%;background-color: rgba(0, 0, 0, 0.7); border-radius: 20px;
} 
.mobile_cart_total_price td {padding: 7px 10px 7px 10px;}  
    
.mobile-order-status {font-size: 16px;line-height:1.5;}
.mobile-order-status a {color: #9dc323; text-decoration: none;}
.mobile-order-status a:hover {color: #698510;}