/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


/* Import Shepherd.js CSS from CDN */
@import url('https://cdn.jsdelivr.net/npm/shepherd.js@13.0.3/dist/css/shepherd.css');

/* Custom Shepherd styling with Tailwind classes */
.shepherd-modal-overlay-container {
    @apply fixed inset-0 z-50;
}

.shepherd-element {
    @apply max-w-sm;
}

.shepherd-content {
    @apply bg-white rounded-lg shadow-xl border border-gray-200;
}

.shepherd-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.shepherd-title {
    @apply text-lg font-semibold text-gray-900;
}

.shepherd-text {
    @apply px-6 py-4 text-gray-700;
}

.shepherd-footer {
    @apply px-6 py-4 bg-gray-50 rounded-b-lg flex justify-between;
}

.shepherd-button {
    @apply px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 ease-in-out;
}

.shepherd-button-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.shepherd-button-secondary {
    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
}

.shepherd-cancel-icon {
    @apply text-gray-400 hover:text-gray-600 transition-colors;
}

/* Arrow styling */
.shepherd-element[data-popper-placement^="top"] > .shepherd-arrow {
    @apply border-t-white;
}

.shepherd-element[data-popper-placement^="bottom"] > .shepherd-arrow {
    @apply border-b-white;
}

.shepherd-element[data-popper-placement^="left"] > .shepherd-arrow {
    @apply border-l-white;
}

.shepherd-element[data-popper-placement^="right"] > .shepherd-arrow {
    @apply border-r-white;
}