@import "./old_photo.css";
@import "./components/product_card/style.scss";
@import "./tailwindadd.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: "MotorBlock";
    src: url(/assets/Motorblock-24cde871835bc26c26cb56cc04bfe9b6662fba4d6cdd5f48bd6b46458e5b63d7.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
    font-family: "Super-glue";
    src: url(/assets/superglue-d61fa5daae542010a1d14dbb5425bdcad5495adb0cc85793d5a20e277a636247.ttf) format('truetype');
font-weight: 5px;
font-style: normal;
}

@font-face {
    font-family: "FrederickatheGreat";
    src: url(/assets/FrederickatheGreat-a76ebf6b7f2683f96bf5923494661d8e377999ae5a8c6187b6f9a71c2e41f90b.ttf) format('truetype');
}
@font-face {
    font-family: "CompactaBT";
    src: url(/assets/CompactaBT-fefa6d6d436a9c00b38f6d1cd1ec08741819e45c5a7033f52f39c15ed51638ff.ttf) format('truetype');
font-weight: 5px;
font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap');

::-webkit-scrollbar {
    width: 8px;
    border: 5px solid rgba(255, 255, 255, 0);

  }

  ::-webkit-scrollbar-thumb {
    background-color: rgb(255, 255, 255);
    background-clip: padding-box;
    border: 0.15em solid #000000;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  #diapo-mini ::-webkit-scrollbar-thumb {
    background-color: rgba(3, 3, 3, 0.253);
    background-clip: padding-box;
    border: 0.35em solid transparent;
    border-radius: 10px;
  }

body {
    font-family: 'FrederickatheGreat'
}

#main-navbar {
  background-image: url(/assets/smoke_backgroung0.jpg);
  box-shadow: 2px 2px 9px 0px #b91c1c;
}

.text-motorblock{
    font-family: 'MotorBlock' !important;
}

.text-superglue{
    font-family: 'Super-glue' !important;
}

.text-kanit {
    font-family: 'Kanit', sans-serif;
}

.text-Intervar{
    font-family: 'Inter var';
}

.text-darken{
    color: black !important;
}

h1, h2, h3, h4, h5, h6, strong, option, select {
    color: black;
}

.resizeme {
    resize: both;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: ellipsis;
}

@layer base {
    h1 {
        @apply text-6xl;
    }
    h2 {
        @apply text-5xl;
    }
    h3 {
        @apply text-4xl;
    }
    h4 {
        @apply text-3xl;
    }
    h5 {
        @apply text-2xl;
    }
    h6 {
        @apply text-xl;
    }
}

input[type='text'], textarea {
    color: black
}

input[type='text']:focus {
    border-color: #730E15 !important;
    box-shadow: 0 0 5px #d61f2c !important
}

label {
    color: white
}

[type=button], [type=reset], [type=submit], button {
    background-color: #000000;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    background-color: #730E15;
}

#default-carousel > div {
    height: 28rem;
}

.datepicker-controls > button {
    background-color: white;
}

.custom-number-input input:focus {
    outline: none !important;
}

.custom-number-input button:focus {
    outline: none !important;
}

.bg-kgreen{
 background-color: #2D8B2D;
}

.bg-kyellow{
    background-color: #FF9119;
   }

details > summary {
    cursor: pointer;
}

details > summary > i.fa-chevron-down {
    transition: all 0.5s;
}

details[open] > summary > i.fa-chevron-down {
    transform: rotate(180deg);
}

.text-4xl {
    font-size: 3rem;
    line-height: 4rem;
}

.bg-antiquewhite {
    background-color: antiquewhite;
}

nav.pagy > a {
    color: white !important;
}


nav.pagy > .current {
    color: rgb(185 28 28) !important;
}

.pagy-info {
    color: white !important;
}


nav.pagy-nav > span.gap {
    color: white !important;
}

#prev-arrow{
    color: white !important;
    height: 50px;
    width: 50px;
}

#next-arrow{
    color: white !important;
    height: 50px;
    width: 50px;
}

@media (max-width: 670px) {
    #main-navbar {
        background-position: right;
    }

    #main-navbar .text-motorblock {
        font-size: 1.5em;
    }

    #logo {
        width: 70px !important;
    }
}

h4{
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.textShadow {
    text-shadow: 0px 0px 0px black;
}

h4, #new_cart_variant, select, input, header > div, dl, #summary-heading, #delivery-form label, #myTabContent {
    text-shadow: 0px 0px 0px #000000f2;
} 

turbo-frame #new_cart_variant {
    top: 4em;
    position: absolute;
}

[id^="product-card-"]{
    background-image: url(/assets/fond.png);
    padding: 50px 42px;
    background-size: cover;
    height: 31em;
  }

  #addInCart > div {
    position: sticky; 
    top: 260px; 
    width:16rem;
  }

  table, #navAdmin{
    box-shadow: 1px -1px 7px 3px #c9c9c9;
    border-radius: 5px;
  }

.columns-4{
  column-count: 4;
  column-fill: auto;
}

.pagination .current{
    color: #b91c1c;
    font-size: x-large;
    font-weight: bold;
    margin-inline: 5px;
}
 .pagination span{
    margin-inline-end: 3px;
 }

 .pagination span:hover{
    color: dimgray;
 }

/**** MEDIA QUERIES ****/

  @media only screen and (max-width : 500px) {

    #default-carousel > div {
        height: 7rem;
    }
    
    [id^="product-card-"]{
        background-image: url(/assets/fond.png);
        padding: 27px 20px;
        background-size: contain;
        height: 20em;
        background-repeat: no-repeat;
      }

    [id^="product-card-"] h4{
        font-size: small;
        margin-top: 0.5em;
        line-height: 1.5rem;
      }

    [id^="product-card-"] label {
        display: none;
      }

    #new_cart_variant .grid {
        margin-top: 0;
      }

    #addInCart > div {
        width: 100% !important;
      }
    h4 {
        -webkit-line-clamp: 2;
    }  

    #mobile-menu-2 {
        position: absolute;
        background-color: black;    
    }
}

.accordion-section {
  transition: all 0.3s ease-in-out;
}

.step-indicator {
  border-bottom: 2px solid;
  cursor: pointer;
}

.text-blue-600 { color: #2563eb; }
.text-gray-400 { color: #9ca3af; }
.border-blue-600 { border-color: #2563eb; }
.border-gray-300 { border-color: #d1d5db; }

.step-indicator {
  @apply transition-colors duration-200 ease-in-out;
}