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

@layer components {
  /* Container Styles */
  .print-order-fullscreen-container {
    @apply w-full bg-gray-50;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    overflow: visible;
  }

  @media (min-width: 768px) {
    .print-order-fullscreen-container {
      flex-direction: row;
    }
  }

  /* Shortcode Wrapper */
  .print-order-shortcode-wrapper {
    @apply md:w-1/2 w-full p-4 md:p-6 order-1 md:order-1;
    padding-top: 5rem; /* Add space for fixed progress-bar */
  }

  /* Form Wrapper */
  .print-order-form-wrapper {
    @apply md:w-1/2 w-full bg-white p-4 md:p-6 order-2 md:order-2 relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: visible;
    padding-bottom: 0;
    width: 100%;
  }

  /* Guide Drawer */
  .guide-drawer {
    @apply p-4 fixed inset-y-0 right-0 w-full max-w-[90%] bg-white shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out z-[500];
    display: flex;
    flex-direction: column;
    visibility: hidden;
    margin: 0 !important;
    padding: 0 !important;
  }

  .guide-drawer.open {
    @apply translate-x-0;
    visibility: visible;
    animation: slideIn 0.3s ease-in-out forwards;
    z-index: 500;
  }

  /* Guide Button (Mobile Only) */
  .guide-button {
    @apply fixed top-1/2 right-0 w-[10%] text-white px-2 py-1 rounded-full z-[1000] flex items-center justify-center;
    background-color: #2563EB !important; /* bg-blue-600 */
    color: #ffffff !important; /* text-white */
    font-size: 0.875rem; /* text-sm */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    transform: translateY(-50%) rotate(-90deg);
    transition: transform 0.3s ease-in-out;
    will-change: transform;
  }

  .guide-button:hover {
    @apply opacity-80;
  }

  .guide-button:active {
    @apply scale-95;
  }

  .guide-button.open {
    transform: translateY(-50%) rotate(-90deg) translateX(calc(-100vw + 10%));
  }

  /* Close Button */
  .close-drawer {
    @apply absolute top-4 right-4 text-2xl font-bold p-2 rounded-full transition-all duration-200;
    background-color: #2563EB !important; /* bg-blue-600 */
    color: #ffffff !important; /* text-white */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    border: none !important;
    outline: none !important;
  }

  .close-drawer:hover {
    @apply opacity-80;
  }

  /* Mobile Shortcode Content */
  #print-order-shortcode-mobile {
    @apply flex-1 overflow-y-auto p-3;
    max-width: 100%;
    box-sizing: border-box;
    z-index: 499;
    margin: 0 !important;
    padding: 0.75rem !important;
  }

  /* Ensure Elementor content renders correctly in mobile drawer */
  #print-order-shortcode-mobile .elementor-container,
  #print-order-shortcode-mobile .elementor-section,
  #print-order-shortcode-mobile .elementor-widget-wrap,
  #print-order-shortcode-mobile .elementor-element-populated {
    @apply w-full max-w-full;
    box-sizing: border-box;
    z-index: 498;
    margin: 0 !important;
  }

  /* Desktop Shortcode Content */
  #print-order-shortcode {
    @apply w-full h-full;
  }

  /* Order Form Styles */
  .order-form {
    @apply font-sans;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    width: 100%;
  }

  /* Progress Bar */
  .progress-bar {
    @apply fixed top-0 z-50 bg-gray-100;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0;
  }

  @media (min-width: 768px) {
    .progress-bar {
      width: 50%;
      right: 50%;
      transform: translateX(0);
    }
  }

  /* Step */
  .step {
    @apply w-1/4 relative z-10;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .circle {
    @apply w-10 h-10 rounded-full text-white font-semibold transition-transform duration-300;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step.active .circle {
    @apply bg-blue-600 scale-110;
    transform-origin: center;
  }

  .step.completed .circle {
    @apply bg-green-500;
  }

  .step:not(.active):not(.completed) .circle {
    @apply bg-gray-300;
  }

  .step .label {
    @apply mt-2 text-sm text-gray-600 text-center;
  }

  @media (max-width: 640px) {
    .step .label {
      @apply hidden;
    }
    .step.active .label {
      @apply block animate-slide-in;
    }
  }

  /* Progress Line */
  .progress-line {
    @apply absolute top-5 h-1 bg-gray-300 z-0 transition-all duration-500 ease-in-out;
    left: 12.5%;
    right: 12.5%;
  }

  .progress-line.active {
    @apply bg-blue-600 animate-progress-fill;
  }

  @keyframes progress-fill {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }

  .animate-progress-fill {
    animation: progress-fill 0.5s ease-in-out forwards;
  }

  /* Card */
  .card {
    @apply w-full overflow-y-auto p-4 bg-white rounded-xl shadow-md;
    flex: 1;
    scroll-behavior: smooth;
    margin-top: 2rem;
  }

  /* Form Group */
  .form-group {
    @apply mb-6;
  }

  .form-group label {
    @apply block text-gray-700 font-medium mb-2;
  }

  .form-group select,
  .form-group input,
  .form-group textarea {
    @apply w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 bg-gray-50;
  }

  @media (min-width: 768px) {
    .form-group {
      @apply gap-4;
      display: flex;
      align-items: center;
    }
    .form-group label {
      @apply mb-0 w-1/4 text-right;
    }
    .form-group select,
    .form-group input,
    .form-group textarea {
      @apply flex-1;
    }
  }

  .form-group input[type="checkbox"] {
    @apply mr-2 h-4 w-4;
  }

  .form-group label.items-center {
    @apply gap-2;
    display: flex;
    align-items: center;
  }

  .form-group label span {
    @apply text-sm font-medium text-gray-700;
  }

  /* Form Actions */
  .form-actions {
    @apply gap-1 sticky bottom-0 bg-white p-4 shadow-lg border-t border-gray-200 z-30;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .form-actions .instant-price,
  .form-actions .delivery-days,
  .form-actions .w-full-text-left-items-center {
    @apply mx-auto mb-0;
    width: 100%;
  }

  .form-actions .buttons {
    display: flex;
    flex-direction: row-reverse;
    gap: 1rem;
    width: 100%;
    margin: 0 auto;
  }

  /* Next Stage Button */
  .order-form .next-stage {
    @apply text-white py-3 px-6 rounded-xl text-lg font-semibold shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300 border-none;
    width: 60% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2563eb !important;
    color: #ffffff !important;
    outline: none;
    focus:ring-0;
    border-radius: 0.75rem !important;
  }

  .order-form .next-stage:hover {
    @apply opacity-80;
  }

  .order-form .next-stage:focus,
  .order-form .next-stage:active {
    background-color: #2563eb !important;
    opacity: 0.9;
  }

  /* Prev Stage Button */
  .order-form .prev-stage {
    @apply py-3 px-4 rounded-xl text-base font-medium border-none hover:scale-105 transition-all duration-300;
    width: 40% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #9ca3af !important;
    color: #ffffff !important;
    border-radius: 0.75rem !important;
  }

  .order-form .prev-stage:hover {
    @apply bg-gray-600 text-white;
  }

  /* Submit Order Button */
  .submit-order {
    @apply text-white py-3 px-6 rounded-xl text-lg font-semibold shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300;
    width: 60% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    focus:ring-0;
    border-radius: 0.75rem !important;
  }

  .submit-order:hover {
    @apply opacity-80;
  }

  .submit-order:focus,
  .submit-order:active {
    background-color: #2563eb !important;
    opacity: 0.9;
  }

  .order-form .next-stage:disabled,
  .order-form .prev-stage:disabled,
  .submit-order:disabled {
    @apply bg-gray-300 text-gray-500 cursor-not-allowed shadow-none;
  }

  /* Instant Price */
  .instant-price {
    @apply w-full p-2 bg-gray-50 rounded-lg gap-1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .price-item {
    @apply inline-block px-3 py-1 bg-green-500 text-white rounded-full text-sm font-medium shadow-md;
  }

  .price-plus {
    @apply gap-2;
    display: flex;
    align-items: center;
  }

  /* Delivery Days */
  .delivery-days {
    @apply w-full p-2 bg-gradient-to-l from-green-50 to-white rounded-lg text-right animate-price;
  }

  /* Delivery Warning */
  .delivery-warning {
    @apply w-full p-2 bg-yellow-100 rounded-lg text-right;
  }

  .delivery-warning p {
    @apply text-yellow-700 font-semibold;
  }

  /* Animations */
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .animate-plus {
    animation: fade-in 0.3s ease-in-out forwards, rotate 0.5s ease-in-out forwards;
  }

  @keyframes price-item {
    0% {
      opacity: 0;
      transform: translateX(10px) scale(0.9);
    }
    100% {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }

  .animate-price-item {
    animation: price-item 0.5s ease-in-out forwards;
    animation-delay: 0.3s;
  }

  @keyframes price {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-price {
    animation: price 0.5s ease-in-out forwards;
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
  }

  .animate-shake {
    animation: shake 0.3s ease-in-out;
  }

  /* Error Styles */
  .order-form .error {
    @apply border-red-500;
  }

  .order-form .error-message {
    @apply text-red-500 text-sm mt-1 block;
  }

  /* Responsive Styles */
  @media (max-width: 767px) {
    .print-order-shortcode-wrapper {
      @apply hidden;
    }
  }

  @media (max-width: 640px) {
    .card {
      @apply w-full overflow-y-auto p-0 m-0 bg-white rounded-xl shadow-md;
      margin-top: 5rem;
    }

    .progress-bar {
      @apply gap-2 fixed top-0 z-50 bg-gray-100;
      width: 100%;
      padding: 0.5rem 0;
    }

    .step {
      @apply w-auto items-center;
      display: flex;
      flex-direction: column;
    }

    .circle {
      @apply w-8 h-8;
    }

    .progress-line {
      top: 1rem;
      left: 10%;
      right: 10%;
    }

    .order-form .next-stage {
      @apply text-white py-3 px-6 rounded-xl text-lg font-semibold shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300 border-none;
      width: 60% !important;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #2563eb !important;
      color: #ffffff !important;
      outline: none;
      focus:ring-0;
      border-radius: 0.75rem !important;
    }

    .order-form .next-stage:hover {
      @apply opacity-80;
    }

    .order-form .next-stage:focus,
    .order-form .next-stage:active {
      background-color: #2563eb !important;
      opacity: 0.9;
    }

    .order-form .prev-stage {
      @apply py-3 px-4 rounded-xl text-base font-medium border-none hover:scale-105 transition-all duration-300;
      width: 40% !important;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #9ca3af !important;
      color: #ffffff !important;
      border-radius: 0.75rem !important;
    }

    .order-form .prev-stage:hover {
      @apply bg-gray-600 text-white;
    }

    .order-form .card .flex {
      @apply flex-row;
      display: flex;
      align-items: flex-start;
    }

    .order-form .card .flex img {
      @apply w-24 h-24 mr-4;
    }

    .order-form .card .flex > div {
      @apply flex-1 text-right;
      display: flex;
      flex-direction: column;
    }
  }

  /* Slide In Animation */
  @keyframes slide-in {
    0% {
      opacity: 0;
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-slide-in {
    animation: slide-in 1s ease-in-out forwards;
    animation-delay: 1s;
  }

  /* Select2 Styles */
  .select2-container {
    width: 100% !important;
  }

  .select2-container .select2-selection--single {
    height: 44px;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.5rem;
  }

  .select2-container .select2-selection__rendered {
    line-height: 28px;
    padding-right: 2rem;
  }

  .select2-container .select2-selection__arrow {
    height: 44px;
    width: 24px;
  }

  /* Profile Info */
  .profile-info {
    @apply bg-gray-50 border border-gray-200 rounded-lg p-4 mb-4;
  }

  /* Edit Button */
  .order-form .edit-button {
    @apply bg-gray-200 text-gray-600 p-1.5 rounded-md text-sm items-center justify-center gap-1 transition-all duration-200 hover:bg-gray-300 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 border-none !important;
    display: flex;
  }

  /* Cancel Button */
  .cancel-button {
    @apply bg-gray-200 text-gray-700 p-2 rounded-lg flex items-center justify-center transition-all duration-200 hover:bg-gray-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-400 border-none;
  }

  /* User Field */
  .order-form .user-field {
    @apply bg-gray-50 border border-gray-300 rounded-lg p-2 text-gray-600 text-sm text-center !important;
  }

  .order-form .user-field-label {
    @apply block text-gray-700 font-medium mb-1 text-sm text-center !important;
  }

  /* Table Styles */
  .order-form table {
    @apply w-full text-right border-separate rounded-lg overflow-hidden shadow-md bg-white;
    border-spacing: 0;
  }

  .order-form table thead {
    @apply bg-gradient-to-r from-gray-50 to-gray-100;
  }

  .order-form table thead tr {
    @apply bg-transparent;
  }

  .order-form table th {
    @apply py-3 px-4 text-gray-700 font-semibold text-sm;
  }

  .order-form table tbody tr {
    @apply border-b border-gray-50 hover:bg-gray-50 transition-colors duration-200;
  }

  .order-form table tbody td {
    @apply py-3 px-4 text-gray-600 text-sm;
  }

  .order-form table tbody tr:last-child {
    @apply bg-green-600;
  }

  .order-form table tbody tr:last-child td {
    @apply font-semibold text-white text-base;
  }

  .order-form table thead tr th:first-child {
    @apply rounded-tl-lg;
  }

  .order-form table thead tr th:last-child {
    @apply rounded-tr-lg;
  }

  .order-form table tbody tr:last-child td:first-child {
    @apply rounded-bl-lg;
  }

  .order-form table tbody tr:last-child td:last-child {
    @apply rounded-br-lg;
  }

  /* File Upload Styles */
  .uploaded-files {
    @apply mt-4 flex flex-col gap-2;
  }

  .file-item {
    @apply inline-flex items-center p-2 bg-gray-50 border border-gray-200 rounded-md;
  }

  .icon-wrapper {
    @apply rounded-full p-1;
  }

  .file-item img.format-icon {
    @apply w-5 h-5;
  }

  .file-item span {
    @apply text-xs font-medium text-gray-600 truncate;
  }

  .file-item .delete-button {
    @apply ml-2 p-1 bg-red-500 rounded-full hover:bg-red-600 transition-colors border-none outline-none;
    stroke: none !important;
  }

  .file-item .delete-button svg {
    @apply w-3 h-3 text-white;
  }

  .file-item .progress-bg {
    @apply w-24 h-2 bg-gray-200 rounded-full overflow-hidden mx-2;
  }

  .file-item .file-progress-bar {
    @apply h-full bg-blue-500 transition-all duration-300;
  }

  .file-item .progress-percentage {
    @apply text-xs text-gray-700 ml-2;
  }

  /* Custom Format Colors */
  .bg-psd { background-color: #0d0a22; }
  .bg-jpg, .bg-jpeg { background-color: #104fde; }
  .bg-pdf { background-color: #da0911; }
  .bg-png { background-color: #f1ddee; }
  .bg-ai { background-color: #330000; }
  .bg-eps { background-color: #5dc122; }
  .bg-cdr { background-color: #256f3a; }

  /* Icon Colors */
  .file-item img.psd { filter: invert(85%) sepia(67%) saturate(2000%) hue-rotate(170deg) brightness(100%) contrast(90%); }
  .file-item img.jpg, .file-item img.jpeg { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); }
  .file-item img.pdf { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); }
  .file-item img.png { filter: invert(20%) sepia(80%) saturate(2000%) hue-rotate(280deg) brightness(90%) contrast(90%); }
  .file-item img.ai { filter: invert(60%) sepia(90%) saturate(2000%) hue-rotate(20deg) brightness(100%) contrast(90%); }
  .file-item img.eps { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); }
  .file-item img.cdr { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); }

  /* Clear Backgrounds and Animations */
  .order-form::before,
  .order-form::after,
  .card::before,
  .card::after,
  .print-order-form-wrapper::before,
  .print-order-form-wrapper::after {
    content: none !important;
    display: none !important;
  }

  .order-form,
  .card,
  .print-order-form-wrapper {
    background: none !important;
    background-image: none !important;
    animation: none !important;
  }

  @media (max-width: 640px) {
    .form-group .uploaded-files {
      @apply flex flex-col gap-2 w-full;
    }
    .file-item {
      @apply inline-flex;
    }
  }

  /* Fade Animations */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-in;
  }

  @keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(10px); }
  }

  .animate-fade-out {
    animation: fadeOut 0.3s ease-out;
  }

  /* Shortcode Container */
  .shortcode-container {
    @apply mb-6 border border-gray-200 p-4 rounded-lg bg-gray-50;
  }

  .shortcode-container button:not(.next-stage):not(.prev-stage) {
    @apply w-full bg-blue-600 text-white py-2 rounded-lg mb-2 hover:bg-blue-700 transition-all duration-200;
  }

  /* Shortcode Content */
  .shortcode-content p {
    @apply text-gray-600 text-center;
  }

  /* Ensure Elementor content renders correctly */
  #print-order-shortcode .elementor-container,
  #print-order-shortcode .elementor-section,
  #print-order-shortcode .elementor-widget-wrap,
  #print-order-shortcode-mobile .elementor-container,
  #print-order-shortcode-mobile .elementor-section,
  #print-order-shortcode-mobile .elementor-widget-wrap {
    @apply w-full max-w-full;
    box-sizing: border-box;
  }

  /* Responsive */
  @media (max-width: 640px) {
    .shortcode-container {
      @apply order-last mt-4;
    }
  }

  @media (max-width: 767px) {
    .shortcode-container {
      @apply hidden;
    }
    .print-order-shortcode-wrapper {
      @apply hidden;
    }
  }

  @media (min-width: 768px) {
    .shortcode-container {
      @apply block;
    }
  }

  #print-order-shortcode {
    @apply w-full overflow-y-auto;
    max-height: 100vh;
    scroll-behavior: smooth;
  }

  /* Mobile Drawer Shortcode Content */
  #guide-drawer {
    @apply fixed inset-y-0 right-0 w-full max-w-[90%];
  }

  #guide-drawer.open {
    @apply block;
  }

  #guide-drawer:not(.open) {
    @apply hidden;
  }

  #print-order-shortcode-mobile {
    @apply w-full overflow-y-auto p-6;
    max-height: calc(100vh - 4rem); /* Adjust for padding and close button */
    scroll-behavior: smooth;
  }
}

/* Animation for Drawer */
@keyframes slideIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Prevent conflicts with other styles */
.guide-button,
.guide-drawer,
#print-order-shortcode-mobile {
    visibility: visible !important;
}

:root {
  --button-bg-color: #2563EB;
  --button-text-color: #ffffff;
}