html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    min-height: 100vh;
    background: white;
    /*    background-image: linear-gradient(to right, rgba(71,85,105,0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(71,85,105,0.15) 1px, transparent 1px), radial-gradient(circle at 50% 60%, rgba(236,72,153,0.15) 0%, rgba(168,85,247,0.05) 40%, transparent 70%);
  */
    /*background-size: cover;*/

    background-image:
    /* horizontal grid lines */
    linear-gradient(to right, rgba(242,92,72,0.15) 1px, transparent 1px),
    /* vertical grid lines */
    linear-gradient(to bottom, rgba(242,92,72,0.15) 1px, transparent 1px),
    /* radial gradient overlay */
    radial-gradient(circle at 50% 60%, rgba(242,92,72,0.15) 0%, rgba(247,143,85,0.05) 60%, rgba(255,243,224,0) 100%);
    background-repeat: no-repeat;
    background-size: 40px 40px, 40px 40px, 100% 100%;
    background-attachment: fixed;
}
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.commitment-completed {
    background: linear-gradient(135deg,rgba(255,243,224,0) 0%, rgba(255,243,224,0) 100%);
    border: 2px solid rgba(242,92,72,0.15);
}

.commitment-pending {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(242,92,72,0.15);
}

.my-request-card {
    background: radial-gradient(circle at center, #f25c48 0%, #f78f55 60%, #fff3e0 100%);
    border: 2px solid #f78f55;
}
.disabledBtn {
    @apply opacity-40 pointer-events-none cursor-not-allowed;
}

    .disabledBtn svg {
        @apply opacity-60;
    }
@media (max-width: 640px) {
    .mobile-padding {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

.install-bounce {
    animation: installBounce 2s infinite;
}

@keyframes installBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.slide-in-bottom {
    animation: slideInBottom 0.5s ease-out;
}

@keyframes slideInBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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