@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
* {
    outline: 1px solid red; /* Helps visualize layout issues
} */

html, body{
    height: 100%;
}

body{
    font-family: "Oswald", sans-serif;
    display: flex;
    flex-direction: column;
}

.site-logo{
    max-width: 200px;
}

.content {
    flex: 1;
}

.navbar {
    border-bottom:1px solid #e9e9e9;
}

.btn-primary{
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover{
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.btn-secondary{
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-color: var(--bs-secondary) !important;
}

.btn-secondary:hover{
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-header{
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn-header:hover {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.text-green{
    color: var(--bs-primary) !important;
}

.bg-green{
    background-color: var(--bs-primary);
}

/* Custom styles for the carousel indicators */
.carousel-indicators {
    bottom: -40px !important;
}
.carousel-indicators [data-bs-target] {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: 1px solid gray !important;
    background-color: transparent !important;
    margin: 0 5px !important;
    opacity: 1 !important;
}
.carousel-indicators .active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/*  */

.profile-img{
    border-radius: 50%;
    width: 90px;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.profile-title{
    font-size: 2.2rem;
    font-weight: 700;
}

/* Custom styles for the progress bar */
.progress {
    border-radius: 0 !important;
}

.progress-bar {
    border-radius: 0 !important;
    background-color: var(--bs-primary);
}

.profile-price{
    font-size: 1.4rem;
    color: var(--bs-primary);
    font-weight: 700;
    line-height: 1;
}

.profile-price-text{
    color: #000;
    font-size: 0.85rem;
}

.price-separator{
    width: 1px;
    height: 23px;
    background: #000;
    margin: 3px 1.5rem;
}

.btn-donation{
    width: 100%;
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem;
}

.btn-donation:hover{
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

/* social-icons */

.social-icons{
    font-size: 1.5rem;
}

.social-icons a{
    margin-right: 10px;
}

.text-facebook {
    color: #3b5998;
}
.text-twitter {
    color: #1DA1F2;
}
.text-instagram {
    color: #C13584;
}
.text-messenger {
    color: #0078FF;
}

.dashboard-notification-bar {
	background-color: rgba(25, 181, 67, 0.65);
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #dee2e6;
}

.divider::before {
    margin-right: .5em;
}

.divider::after {
    margin-left: .5em;
}

/* custom here */

.custom-hero {
    width: 100%;
    border-radius: 15px;
    padding: 20px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
  }

.custom-hero img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-right: 20px;
}

.hero-content {
    flex-grow: 1;
}

.hero-button {
    margin-left: auto;
}

/* tabs */

.nav-tabs .nav-link, .nav-tabs{
    border: none !important;
    box-shadow: none !important;
}

.nav-tabs .nav-link{
    color: gray;
}

.nav-tabs .nav-link.active{
    color: black;
}


.tab-separator{
    width: 1px;
    height: 22px;
    background: black;
    margin: 10px 10px 0 10px;
}

.heading-green-line{
    position: relative;
    margin-bottom: 20px;
}

.heading-green-line::before{
    content: '';
    position: absolute;
    height: 2px;
    width: 100px;
    background-color: var(--bs-primary);
    left: 0;
    bottom: -5px;
}

/* donor box */

.donor-box{
    display: flex;
    border: 1px solid #eee;
    padding: 0.5rem;
    gap: 10px;
    background-color: #ffffff;
}

.donor-box .donor-image i{
    font-size: 35px;
    color: var(--bs-primary);
}

.donor-box p{
    font-size: 0.69rem;
    margin-bottom: 0;
    font-weight: 500;
}

.donor-box h5{
    font-size: 1.15rem;
}

.donor-box h5 span{
    /* font-size: 1rem; */
    font-weight: 400;
    padding-left: 10px;
}


/* Footer styling */
.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    /* background-color: #f8f9fa; */
    /* border-top: 1px solid #e9ecef; */
    font-size: 14px;
}
.footer a {
    margin: 0 10px;
    color: #000;
    text-decoration: none;
}
.footer .social-icons a {
    color: var(--bs-primary);
    margin: 0 5px;
}


@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1140px;
    }
}

@media (max-width: 992px) {
    .social-icons{
        text-align: center;
        font-size: 1.5rem;
    }
    .price-flex{
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .footer{
        flex-direction: column;
        gap: 5px;
    }

    ul.nav-tabs{
        justify-content: space-between;
    }

    .tab-separator{
        margin-left: 0;
        margin-right: 0;
    }
}


@media (max-width: 576px) {
    .navbar-toggler{
        box-shadow: none !important;
    }

    ul.navbar-nav{
        padding-top: 1rem;
    }

    .navbar-nav li{
        text-align: end;
    }
}

@media (max-width: 390px) {
    ul.nav-tabs{
        flex-direction: column;
    }

    .tab-separator{
        display: none;
    }
}

.form-signin {
  max-width: 330px;
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(25, 181, 67, 0.25)
}

.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(25, 181, 67, 0.25)
}

.form-check-input:checked {
    background-color: white;
    border-color: var(--bs-primary);
  }

.form-check-input:checked + .form-check-label::before {
    border-color: var(--bs-primary);
    background-color: white;
}

.form-check-input:checked + .form-check-label::after {
    content: '\2713';
    font-weight: bold;
    color: var(--bs-primary);
    font-size: 1.5em;
    position: absolute;
    top: -0.5em;
    left: 0.1em;
}

.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(25, 181, 67, 0.25)
}

.form-signin .form-floating:focus-within {
    box-shadow: none;
    z-index: 2;
}

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;
}

.receipt-container {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    border: 0px solid #ddd;
    border-radius: 5px;
}

.secondary-navbar-store {
    background-color: #f8f9fa;
    padding: 10px;
}
.hero-section-store {
    background-color: #f8f9fa;
    padding: 30px;
    text-align: center;
}
.thumbnail-store {
    width: 80px;
    height: 60px;
    object-fit: cover;
    background-color: inherit;
}
.card-store {
    transition: transform 0.2s;
}
.card-store:hover {
    transform: scale(1.05);
}
.custom-divider {
    display: flex;
    align-items: center;
    text-align: center;
}
.custom-divider::before,
.custom-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ececec;
}
.custom-divider:not(:empty)::before {
    margin-right: 0.75em;
}
.custom-divider:not(:empty)::after {
    margin-left: 0.75em;
}
.badge-product {
    background-color: var(--bs-primary);
}

.btn-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-primary);
    color: #ffffff;
}

.w-0 {
width: 0%;
}

.w-1 {
width: 1%;
}

.w-2 {
width: 2%;
}

.w-3 {
width: 3%;
}

.w-4 {
width: 4%;
}

.w-5 {
width: 5%;
}

.w-6 {
width: 6%;
}

.w-7 {
width: 7%;
}

.w-8 {
width: 8%;
}

.w-9 {
width: 9%;
}

.w-10 {
width: 10%;
}

.w-11 {
width: 11%;
}

.w-12 {
width: 12%;
}

.w-13 {
width: 13%;
}

.w-14 {
width: 14%;
}

.w-15 {
width: 15%;
}

.w-16 {
width: 16%;
}

.w-17 {
width: 17%;
}

.w-18 {
width: 18%;
}

.w-19 {
width: 19%;
}

.w-20 {
width: 20%;
}

.w-21 {
width: 21%;
}

.w-22 {
width: 22%;
}

.w-23 {
width: 23%;
}

.w-24 {
width: 24%;
}

.w-25 {
width: 25%;
}

.w-26 {
width: 26%;
}

.w-27 {
width: 27%;
}

.w-28 {
width: 28%;
}

.w-29 {
width: 29%;
}

.w-30 {
width: 30%;
}

.w-31 {
width: 31%;
}

.w-32 {
width: 32%;
}

.w-33 {
width: 33%;
}

.w-34 {
width: 34%;
}

.w-35 {
width: 35%;
}

.w-36 {
width: 36%;
}

.w-37 {
width: 37%;
}

.w-38 {
width: 38%;
}

.w-39 {
width: 39%;
}

.w-40 {
width: 40%;
}

.w-41 {
width: 41%;
}

.w-42 {
width: 42%;
}

.w-43 {
width: 43%;
}

.w-44 {
width: 44%;
}

.w-45 {
width: 45%;
}

.w-46 {
width: 46%;
}

.w-47 {
width: 47%;
}

.w-48 {
width: 48%;
}

.w-49 {
width: 49%;
}

.w-50 {
width: 50%;
}

.w-51 {
width: 51%;
}

.w-52 {
width: 52%;
}

.w-53 {
width: 53%;
}

.w-54 {
width: 54%;
}

.w-55 {
width: 55%;
}

.w-56 {
width: 56%;
}

.w-57 {
width: 57%;
}

.w-58 {
width: 58%;
}

.w-59 {
width: 59%;
}

.w-60 {
width: 60%;
}

.w-61 {
width: 61%;
}

.w-62 {
width: 62%;
}

.w-63 {
width: 63%;
}

.w-64 {
width: 64%;
}

.w-65 {
width: 65%;
}

.w-66 {
width: 66%;
}

.w-67 {
width: 67%;
}

.w-68 {
width: 68%;
}

.w-69 {
width: 69%;
}

.w-70 {
width: 70%;
}

.w-71 {
width: 71%;
}

.w-72 {
width: 72%;
}

.w-73 {
width: 73%;
}

.w-74 {
width: 74%;
}

.w-75 {
width: 75%;
}

.w-76 {
width: 76%;
}

.w-77 {
width: 77%;
}

.w-78 {
width: 78%;
}

.w-79 {
width: 79%;
}

.w-80 {
width: 80%;
}

.w-81 {
width: 81%;
}

.w-82 {
width: 82%;
}

.w-83 {
width: 83%;
}

.w-84 {
width: 84%;
}

.w-85 {
width: 85%;
}

.w-86 {
width: 86%;
}

.w-87 {
width: 87%;
}

.w-88 {
width: 88%;
}

.w-89 {
width: 89%;
}

.w-90 {
width: 90%;
}

.w-91 {
width: 91%;
}

.w-92 {
width: 92%;
}

.w-93 {
width: 93%;
}

.w-94 {
width: 94%;
}

.w-95 {
width: 95%;
}

.w-96 {
width: 96%;
}

.w-97 {
width: 97%;
}

.w-98 {
width: 98%;
}

.w-99 {
width: 99%;
}

.w-100 {
width: 100%;
}

.custom-radio-btn {
    border: 1px solid #ffffff;
    background-color: var(--bs-primary);
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border-radius: 0 !important;
}

.custom-radio-btn:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-secondary) !important;
    color: #ffffff !important;
}

.btn-check:checked + .custom-radio-btn {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: white !important;
}

.btn-group.custom-radio-group {
    gap: 0.25rem;
}

.line-through {
    text-decoration: line-through;
}

.custom-alert {
    border-radius: 0;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
}
.custom-alert-icon {
    font-size: 1.5rem;
    margin-right: 10px;
}

.btn-checkout{
    width: 100%;
    background-color: #19b543 !important;
    color: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem;
}

.btn-checkout:hover{
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.row-bg {
    background: #ffffff;
}

.alert-info {
    background-color: #000000; /* Custom info background */
    color: white;
    border-color: #000000;
}

.alert-success {
    background-color: #19b543;
    color: white;
    border-color: #19b543;
}

.alert-warning {
    background-color: #ffc107;
    color: black;
    border-color: #ffc107;
}

.alert-danger {
    background-color: #dc3545;
    color: white;
    border-color: #bd2130;
}

.product-row {
    min-height: 150px;
    background-color: white;
    display: block;
    transition: transform 0.2s ease-in-out;
}

.product-col {
    flex-shrink: 0;
}

.image-col {
    flex-basis: 30%;
}

.info-col {
    flex-basis: 45%;
}

.action-col {
    flex-basis: 25%;
}

.product-row:hover {
    transform: scale(1.05);
}

@media print {
  body * {
    visibility: hidden;
  }
  #printreceipt, #printreceipt * {
    visibility: visible;
  }
  #printreceipt {
    position: absolute;
    left: 0;
    top: 0;
  }
}