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

/*

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

*/
/*
 * 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.
 *


 */

.main-div{
    height: 100%; width: 100%; display: flex; flex-direction: column; position:relative;
}
.inner-div{
    height: 70vh;
    background-color: #ffffff;
}
.main-div .m-bottom-12{
    margin-bottom: 12px;
}
.btn-success{
    background-color: #196F67;
    width: 300px;
    height: 50px;
    color: #ffffff;
    border-radius: 30px;
}
.m-top-20{
    margin-top: 40px;
}

.terms_policy a {
    color: #60abed;
    text-decoration: underline;
}
.terms_policy a:hover{
    text-decoration: none;
    color: #0088ff;
}

/* Guest Checkout Styles */
.guest-checkout-step {
    transition: all 0.3s ease-in-out;
}

.service-card {
    transition: all 0.2s ease-in-out;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.payment-option-card {
    transition: all 0.2s ease-in-out;
}

.payment-option-card:hover {
    background-color: #f8fafc;
}

.btn-success:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.btn-success:disabled:hover {
    background-color: #9ca3af;
}

/* Step indicator styles */
.step-indicator-circle {
    transition: all 0.3s ease-in-out;
}

/* Loading animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Form validation styles */
.form-field.error input,
.form-field.error select {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-field.success input,
.form-field.success select {
    border-color: #eab308;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
}

/* Required field indicator - removed duplicate star */

/* Field spacing */
.form-field {
    margin-bottom: 1rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

/* Checkbox styling */
.form-field input[type="checkbox"] {
    accent-color: #eab308;
}

/* Select dropdown styling */
.form-field select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Address typeahead styles */
.address-suggestions {
    z-index: 50;
}

.address-suggestion-item {
    transition: background-color 0.1s ease-in-out;
}

.address-suggestion-item:hover {
    background-color: #f3f4f6;
}

.address-suggestion-item:last-child {
    border-bottom: none;
}

/* Selected address display */
.selected-address-display {
    background-color: #eff6ff;
    border-color: #3b82f6;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .guest-checkout-container {
        padding: 1rem;
    }
    
    .service-grid {
        grid-template-columns: 1fr;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .address-suggestions {
        max-height: 200px;
    }
}

/* Yellow theme overrides */
.bg-yellow-50 {
    background-color: #fefce8;
}

.bg-yellow-500 {
    background-color: #eab308;
}

.bg-yellow-600 {
    background-color: #ca8a04;
}

.hover\:bg-yellow-600:hover {
    background-color: #ca8a04;
}

.border-yellow-200 {
    border-color: #fde047;
}

.border-yellow-500 {
    border-color: #eab308;
}

.text-yellow-500 {
    color: #eab308;
}

.text-yellow-600 {
    color: #ca8a04;
}

.text-yellow-800 {
    color: #a16207;
}

.text-yellow-900 {
    color: #713f12;
}

.hover\:text-yellow-800:hover {
    color: #a16207;
}

/* Focus states with yellow theme */
input:focus,
select:focus,
textarea:focus {
    --tw-ring-color: rgba(234, 179, 8, 0.1);
}

input:focus,
select:focus,
textarea:focus {
    border-color: #eab308;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
}