@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
.card {
  font-family: monospace;
  font-weight: 400;

  width: 320px;
  height: 200px;
  border-radius: 10px;
  perspective: 1000px;
}

.card.zoom {
  transition: transform .2s;
  transform: scale(0.9);
}
.card.zoom:hover {
  transform: scale(1.0);
}

.card .logo {
  position: absolute;
  right: 25px;
  top: 30px;
  height: 72px;
  width: 72px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: transform 600ms ease;
  transform-style: preserve-3d;
  box-shadow: 0 0 25px 2px rgba(black, 0.2);
}

.card-front {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  backface-visibility: hidden;
  background: linear-gradient(321.03deg, #01adef 0%, #0860bf 91.45%);

  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 300ms ease-in-out;
}

.card-bg {
  position: absolute;
  top: -20px;
  right: -120px;
  width: 380px;
  height: 250px;
  background: linear-gradient(321.03deg, #01adef 0%, #0860bf 91.45%);
  border-top-left-radius: 100%;
}

.card-bg::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -80px;
  width: 380px;
  height: 250px;
  background: linear-gradient(321.03deg, #01adef 0%, #0860bf 91.45%);
  border-top-left-radius: 100%;
}

.card-bg::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -120px;
  width: 380px;
  height: 250px;
  background: linear-gradient(321.03deg, #01adef 0%, #0860bf 91.45%);
  border-top-left-radius: 100%;
}

.card-contactless {
  position: absolute;
  right: 15px;
  top: 55px;
  transform: scale(0.5);
}

.card-chip {
  position: absolute;
  top: 65px;
  left: 25px;
  width: 45px;
  height: 34px;
  border-radius: 5px;
  background-color: #ffda7b;
  overflow: hidden;
}

.card-chip::before {
  content: "";
  position: absolute;
  left: 49%;
  top: -7%;
  transform: translateX(-50%);
  background: #ffda7b;
  border: 1px solid #a27c1f;
  width: 25%;
  height: 110%;
  border-radius: 100%;
  z-index: 2;
}

.card-chip::after {
  content: "";
  position: absolute;
  top: 30%;
  left: -10%;
  background: transparent;
  border: 1px solid #a27c1f;
  width: 120%;
  height: 33%;
}

.card-holder {
  position: absolute;
  left: 25px;
  bottom: 30px;
  color: white;
  font-size: 14px;
  letter-spacing: 0.2em;
  filter: drop-shadow(1px 1px 1px rgba(black, 0.3));
}

.card-number {
  position: absolute;
  left: 25px;
  bottom: 65px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  filter: drop-shadow(1px 1px 1px rgba(black, 0.3));
}
.selected-file {
  background: #ddeeff;
  border-radius: 0.2em;
  margin-top: 1px;
  padding: 0.25em 0.5em;
}

.selected-file input[type='file'] {
  display: none;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */