/* resources/css/welcome.css */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    background-image: url('https://payit.ph/images/clouds.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.network-button {
    transition: all 0.2s ease-in-out; border: 2px solid #e5e7eb; height: 80px; display: flex; align-items: center; justify-content: center; padding: 0.75rem;
}
.network-button.selected {
    border-color: #c3711a; background-color: #eef2ff; box-shadow: 0 0 0 3px rgba(195, 113, 26, 0.2); transform: scale(1.05);
}
.product-card {
    transition: all 0.2s ease-in-out; border: 2px solid #e5e7eb;
}
.product-card.selected {
    border-color: #c3711a; background-color: #eef2ff;
}
.product-card:hover {
    transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.subcategory-filter {
    transition: all 0.2s ease-in-out;
}
.subcategory-filter.selected {
    border-color: #c3711a; color: #c3711a;
}

/* Tab styles */
.service-tab {
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}
.service-tab:hover {
    border-color: #cbd5e1; /* gray-300 */
    color: #1e293b; /* slate-800 */
}
.service-tab.selected {
    border-color: #c3711a; /* Your brand color */
    color: #c3711a;
    font-weight: 600;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}
input[type=number] { -moz-appearance: textfield; }
.text-brand-blue { color: rgb(31, 102, 213); }
.bg-brand-blue { background-color: rgb(31, 102, 213); }
.hover\:bg-brand-blue-darker:hover { background-color: rgb(28, 90, 186); }
.focus\:ring-brand-blue:focus { 
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(31 102 213 / 0.5);
}
.focus\:border-brand-blue:focus { border-color: rgb(31, 102, 213); }
.rounded-md { border-radius: 0.375rem; }

.modal.hidden { display: none; }
.payment-method-label {
    display: flex; align-items: center; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s ease-in-out;
}
.payment-method-label:hover { background-color: #f9fafb; }
.payment-method-label input[type="radio"] { display: none; } 
.payment-method-label input[type="radio"]:checked + .payment-method-content {
     border-color: #4f46e5; /* indigo-600 */ background-color: #eef2ff; /* indigo-100 */ box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
.payment-method-content { border: 1px solid transparent; border-radius: 0.375rem; padding: 0.5rem; width: 100%; display: flex; align-items: center;}
.payment-method-content img { height: 24px; margin-right: 0.75rem; }