/* signup-buyer.css - Tactile Minimalism Studio Workshop Theme */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400&display=swap');

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Botanical radial dots pattern for background */
.botanical-bg {
    background-color: #fff8f1;
    background-image: radial-gradient(#e9e1d8 0.75px, transparent 0.75px);
    background-size: 24px 24px;
    animation: fadeInBg 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Paper noise texture overlay */
.paper-texture::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.025;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    z-index: 1;
}

/* Beautiful custom input focus and state styling */
input:focus {
    outline: none;
    border-color: #576242 !important; /* Sage Green */
    box-shadow: 0 0 0 2px rgba(212, 165, 165, 0.25) !important; /* Dusty Rose glow */
}

/* Custom error input state */
input.input-error {
    border-color: #ba1a1a !important;
    box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.15) !important;
}

/* Smooth spring-like animation entry for sign-up card */
.signup-card {
    opacity: 0;
    transform: translateY(20px);
    animation: springEntry 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1) 0.1s forwards;
}

@keyframes springEntry {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInBg {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* Custom password validation checkmarks styling */
.requirement-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

.requirement-item.valid {
    color: #576242; /* Sage Green for valid */
}

.requirement-item.invalid {
    color: #76786e; /* Muted olive gray for idle */
}

/* Washi tape-like decorative label */
.washi-tape {
    background-color: #e8e0ba;
    color: #635f40;
    transform: rotate(-1.5deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-left: 2px dashed rgba(99, 95, 64, 0.2);
    border-right: 2px dashed rgba(99, 95, 64, 0.2);
}