@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';


:root {
   --primary: #ff0045;
   --primary-darkened: #b30030;
   --primary-lightened: #f54473;
   --secondary: #c91e40;
   --bg: #f5f6f7
}
.body{
   background-color: var(--bg);
   width: 100%;
   flex-direction: row;
}
.main{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 100vh;
}
.chip{
   background-color: var(--primary-darkened);
   margin: 12px 0px;
   margin-right: auto;
   padding-right: 40px;
   border-radius: 0px 60px 60px 0px;
   transition: filter 200ms;
}
.header .chip:not(.chip-nohover):hover{
   filter: brightness(110%);
   cursor: pointer;
}
.pill-hover{
   background-color: var(--primary-darkened);
   border-radius: 60px;
   padding: 10px;
}
.pill-hover:hover{
   filter: brightness(110%);
   cursor: pointer;
}
.chip-reversed{
   border-radius: 60px 0px 0px 60px;
   padding:12px;
}
.chip-inverse{
   background-color: var(--primary);
   border-radius: 0px 900px 900px 0px;
}
/*css spaghetti*/
/*chip provides padding and margin*/
/*but we cant have those for out pill-hover*/
/*man i love css*/
/*https://preview.redd.it/css-dev-award-v0-orxteidb420b1.jpg?auto=webp&s=03f2e80c94d8d70a7f48017749902732d4fa0d7a*/

.nopadding{
   padding: 0px;
   margin: auto 0px;
}
.cssclassthatwillonlygetusedoncebecauseforsomereasontailwindcannotoverridecsssoimforcedtodothisterriblenessiamsorry{
   padding: 8px 16px;
   padding-right: 24px;
}
.vcenter{
   margin: auto 0px;
}
.icon-clickable:hover{
   cursor: pointer;
   animation: wiggle 0.6s ease-in-out forwards;
}
.circle{
   background-color: var(--primary);
   border-radius: 50px;
   padding: 10px;
   width: 50px;
   height: 50px;
   transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes wiggle {
   0%   { transform: rotate(0deg); }
   25%  { transform: rotate(-15deg); } /* Left */
   55%  { transform: rotate(15deg); }  /* Right */
   80%  { transform: rotate(-5deg); }  /* Overshoot (Past center) */
   100% { transform: rotate(0deg); }   /* Settle Straight */
}
.search{
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   background-color: var(--primary-darkened);
   color: #e9e9e9;
   margin: 20px 10px;
   margin-left: auto;
   padding-left: 30px;
   padding-right: 15px;
   border-radius: 60px;
   transition-duration: 200ms;
}
.search:focus-within{
   outline: white solid 2px;
   filter: brightness(115%);
}
.search input:focus{
   outline: none;
}
.search:hover{
   filter: brightness(115%);
}
.title{
   font-size: 30px;
   text-align: center;
   font-family: sans-serif;
   font-weight: bold;
}
.header{
   display: flex;
   position: fixed;
   background-color: var(--primary);
   text-align: center;
   color: white;
   padding: 0px;
   top:0px;
   width: 100%;
   z-index: 1000;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
   transition: top 1s;
}
.hidden{
   top: -100px;
   transition: top 0.7s;
}
.footer{
   display: flex;
   background-color: var(--primary-darkened);
   color: white;
   width: 100%;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
   z-index: 10;
}

.content {
   margin: 0px 50px;
   margin-top: 120px;
   margin-left: 270px;
   width: 100%;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.card {
   width: 300px;
   margin: 10px 5px;
   padding: 20px;
   border-radius: 15px;
   background: #ffffff;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   text-align: center;
   font-family: sans-serif;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   transition: filter 0.6s;
   filter: opacity(0);
}


.card:hover {
   box-shadow: 0 5px 35px rgba(0, 0, 0, 0.15);
}

.card h1 {
   font-size: 1.5rem;
   color: #333;
   margin-bottom: 15px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.frame img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
   margin-bottom: 15px;
   object-fit: cover;
   transition: all 0.2s ease-out;
   transform-style: preserve-3d;
   will-change: transform;
}
.frame{
   perspective: 400px;
}

.frame img:hover {
   transform: translateZ(12px);
}

.card h2 span{
   font-size: 1.25rem;
   color: #27ae60;
   margin: 15px 0;
}

.body button {
   width: 100%;
   padding: 12px;
   margin: 0px auto;
   background-color: lightgray;
   border: none;
   border-radius: 8px;
   font-size: 1rem;
   cursor: pointer;
   transition: all 200ms ease 50ms;
}
.body button:hover{
   background-color: var(--primary);
   color: white;
   border-radius: 30px;
   width: 80%;
}
.body button:active {
   transform: scale(0.96);
   background-color: var(--primary-darkened);
   transition: all 200ms ease 0ms;
}

.sidebar{
   position: fixed;
   margin-left: 10px;
   width: 250px;
   background: #ffffff;
   padding: 24px;
   border-radius: 16px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
   transition: all 200ms ease;
}

.sidebar h1 {
   font-size: 1.2rem;
   font-weight: 700;
   margin-bottom: 20px;
   color: #1a1a1a;
   border-left: 4px solid var(--primary);
   padding-left: 12px;
}

.sidebar div {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
   cursor: pointer;
   transition: transform 0.2s ease;
}

.checks:hover {
   transform: translateX(5px);
}
.sidebar input[type="checkbox"] {
   appearance: none;
   width: 20px;
   height: 20px;
   border: 2px solid #ddd;
   border-radius: 6px;
   margin-right: 12px;
   display: grid;
   place-content: center;
   cursor: pointer;
}

.sidebar input[type="checkbox"]:checked {
   background-color: var(--primary);
   border-color: var(--primary);
}

.sidebar input[type="checkbox"]::before {
   content: "";
   width: 10px;
   height: 10px;
   transform: scale(0);
   transition: 120ms transform ease-in-out;
   box-shadow: inset 1em 1em white;
   clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.sidebar input[type="checkbox"]:checked::before {
   transform: scale(1);
}

.sidebar label {
   font-size: 0.95rem;
   color: #444;
   cursor: pointer;
   user-select: none;
}

.modal{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
   pointer-events: none;
   transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#loginModal{
   z-index:999;
}
.modal.modal-z-workaround{
   z-index: 999;
}
.focus:not(.modal-content){
   box-shadow: inset 0 0 500px rgba(0, 0, 0, 0.7);
   background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(8px);
   pointer-events: auto;
}
.focus.noblur{
   backdrop-filter: none;
}
.modal-content.focus{
   filter:none;
   transform: scale(1);
   pointer-events: auto;
}
.modal-content{
   filter: blur(50px) opacity(0);
   transform: scale(1.5);
   background-color: var(--bg);
   padding: 15px;
   border-radius: 16px;
   pointer-events: none;
   transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.login-modal-content{
   position: fixed;
   top:0px;
   right:10px;
}
.fade-leave {
   filter: blur(100px) opacity(0);
   transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.minichip{
   background-color: var(--primary-lightened);
   color: white;
   padding: 2px 7px;
   border-radius: 7px;
}

.cart-card{
   background-color: white;
   border-radius: 16px;
   padding: 24px 32px;
   margin: 8px;
   margin-left: 16px;
   margin-top: 110px;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
}
.cart-card-header{
   display:flex;
   font-size: 25px;
   font-weight: bold;
   background-color: var(--primary);
   color: white;
   padding: 1px;
   padding-left: 0px;
   margin: -24px -32px;
   margin-bottom: 5px;
   border-radius: 16px 16px 0 0;
   box-shadow: 0 6px 6px rgba(0, 0, 0, 0.05);
}
.cart-card tbody, td{
   text-align: center;
   border: 1px solid transparent;
   border-collapse: collapse;
}

.cart-card th, td{
   padding: 6px;
}
.cart-card thead{
   font-size: 2vh;
   border-collapse: separate;
}
.theader-chip, .theader-chip-begin, .theader-chip-end{
   display: block;
   background-color: var(--primary);
   color: white;
   text-overflow: clip;
   border-radius: 5px;
   padding: 8px 18px;
}
.theader-chip-end{
   border-radius: 5px 40px 40px 5px;
}
.theader-chip-begin{
   border-radius: 40px 5px 5px 40px;
}
.tbody-chip, .tbody-chip-begin, .tbody-chip-end {
   display: flex;
   align-items: center; 
   background-color: rgb(241, 241, 241);
   border-radius: 5px;
   padding: 12px 18px; 
   height: 140px;
}
.tbody-chip-begin img{
   border-radius: 25px;
}
.tbody-chip-end {
   border-radius: 5px 25px 25px 5px;
}
th:nth-child(3), 
td:nth-child(3) {
   width: 80px; 
}
.tbody-chip-begin {
   border-radius: 25px 5px 5px 25px;
}
hr{
   border-color: lightgray;
}
.body input{
   background-color: lightgray;
   border-radius: 30px;
   padding: 10px 15px;
   outline: var(--primary) solid 0px;
   transition: background-color 200ms;
}
.body input:hover{
   background-color: rgb(222, 222, 222);
}
.body input:focus{
   outline: var(--primary) solid 2px;
}
.price{
   color: #79a471;
   font-size: 1.2em;
   font-weight: 600;
   margin-left: auto;
}
.toast {
   position: fixed;
   overflow: hidden;
   bottom: -70px; 
   left: 50%;
   transform: translateX(-50%) scale(1);
   display: flex;
   align-items: center;
   gap: 12px;

   width: auto;
   min-width: 66px;
   max-width: 500px;
   
   padding: 8px 16px 8px 8px;
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 50px;
   box-shadow: 4px 12px 8px rgba(0,0,0,0.1);
   z-index: 9999;
   
   
   animation: toast 6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.svg-circle {
   width: 48px;
   height: 48px;
   background: #28a745; 
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.svg-circle svg {
   width: 28px;
   fill: white;
}

.toast h1 {
   color: #333;
   font-family: sans-serif;
   font-size: 18px;
   white-space: nowrap;
}

@keyframes toast{
   0% { 
      bottom: -80px; 
      max-width: 66px;
      scale: 0.66;
   }
   15% { 
      bottom: 40px; 
      max-width: 500px;
      scale: 1;
   }
   78% {
      max-width: 500px;
   }
   88% { 
      bottom: 40px; 
      max-width: 66px;
      scale: 1;
   }
   100% { 
      bottom: -80px; 
      max-width: 66px;
      scale: 0.3;
   }
}

.register{
   width: 100vw;
   height: 100vw;
   position: fixed;
   background-color: var(--primary);
}
/*ok maybe yes it can be merged into cart-card-header but im too lazy at this point */
/*if it works dont touch it*/
.yetanothercssclassthatwillonlygetusedoncebecauseidontwanttousebootsrap{
   padding: 15px 25px;
   margin-bottom: 15px;
   flex-basis: 100%;
}
.flex-row-but-this-one-actually-does-something{
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
}
.register-inputs input, .register-inputs select{
   background-color: transparent;
   outline: 1px solid lightgray;
   border-radius: 50px;
   padding: 10px 20px;
   margin: 8px;
   font-size: 1.1rem;
}
.errorOutline input{
   outline: 1px solid rgb(199, 0, 0)
}
.aboba{
   margin-top: 16px;
}
.squishy{
   width: 2000px;
   cursor: pointer;
   display: inline-block;
   transform-origin:bottom;
}
h1 a{
   color: var(--primary);
   font-weight: 600;
   font-size: 1.1rem;
}
h1 a:hover{
   text-decoration: underline;
   cursor: pointer;
}