feat: Enhance styling for feedback, buttons, and cards; add new utility classes

public/css/user/main.css

@@ -355,6 +355,13 @@ @media (max-width: 991px) {
     }
 }
 
+.invalid-feedback {
+    display: none;
+    width: 100%;
+    margin-top: .25rem;
+    font-size: .875em;
+    color: #DC464F
+}
 
 /* =========================================
    5. LANDING SECTIONS
@@ -542,10 +549,14 @@ .katalogbuket-category-list li {
 }
 
 .katalogbuket-category-list a.active {
-    color: var(--bs-black);
+
+    color: var(--bs-black) !important;
+    background-color: transparent !important;
     font-weight: 700;
+    border: none !important;
 }
 
+
 /* 3. Judul Accordion (Harga, Ukuran) */
 .katalogbuket .accordion-button {
     font-family: "Poppins", sans-serif;
@@ -595,10 +606,15 @@ .btn-size:hover {
     background-color: var(--bs-black) !important;
 }
 
-.btn-size.active {
-    background-color: var(--bs-black);
-    color: var(--bs-white);
-    border-color: var(--bs-black);
+.btn-size.active,
+.btn-size:active,
+.btn-size:focus {
+    background-color: var(--bs-black) !important;
+    /* Paksa jadi hitam sesuai keinginanmu */
+    color: var(--bs-white) !important;
+    border-color: var(--bs-black) !important;
+    box-shadow: none !important;
+    /* Hilangkan glow biru saat diklik */
 }
 
 .btn-katalogbuket-dark {
@@ -625,13 +641,23 @@ .katalogbuket-card {
     padding: 10px 12px;
     border: 1px solid var(--bs-gray-200);
     border-radius: 20px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .katalogbuket-card:hover {
     transform: translateY(-5px);
 }
 
+.katalogbuket-card .img-wrapper {
+    overflow: hidden;
+    /* Agar gambar tidak keluar saat zoom/hover */
+    border-radius: 10px;
+}
+
 .katalogbuket-card .img-wrapper img {
+    pointer-events: none;
     width: 100%;
     height: 200px;
     object-fit: cover;
@@ -643,9 +669,14 @@ .katalogbuket-card .img-wrapper img {
 
 .katalogbuket-card:hover .img-wrapper img {
     transform: scale(1.03);
+    pointer-events: none;
 }
 
 .katalogbuket-product-title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
     font-weight: 600;
     font-size: var(--subheading-font);
     margin-bottom: 4px;
@@ -659,6 +690,10 @@ .katalogbuket-product-price {
     margin-bottom: 0;
 }
 
+.spacer {
+    flex-grow: 1;
+}
+
 .btn-pagination {
     color: var(--bs-black);
     background-color: transparent;
@@ -685,6 +720,7 @@ .pagination-numbers .page-number {
     font-weight: 500;
     transition: all 0.2s ease;
     border-radius: 5px;
+    color: black;
 }
 
 /* Hover pada angka */
@@ -697,10 +733,8 @@ .pagination-numbers .page-number:hover {
 .pagination-numbers .page-number.active {
     color: var(--bs-black);
     font-weight: 700;
-    border-bottom: 2px solid var(--bs-black);
-    /* Garis bawah indikator aktif */
-    border-radius: 0;
-    /* Biar garis bawahnya kotak */
+    background-color: var(--bs-gray-300);
+    border-radius: 5;
 }
 
 /* Grid Cards (Foto - Clean) */
@@ -726,10 +760,14 @@ .bookingfoto-card:hover {
 }
 
 .bookingfoto-card .img-wrapper {
+    display: inline-block;
     width: 100%;
+    aspect-ratio: 1 / 1;
     position: relative;
     overflow: hidden;
     border-radius: 20px;
+    height: auto;
+    display: block;
 }
 
 .bookingfoto-card .img-wrapper img {
@@ -1578,6 +1616,15 @@ .formulirfoto-btn-cancel:hover {
     color: var(--bs-white);
 }
 
+.disabled-section {
+    pointer-events: none;
+    /* Mencegah klik tombol +/- */
+    opacity: 0.5;
+    /* Membuat tampilan redup */
+    filter: grayscale(80%);
+    /* Opsional: Membuat agak abu-abu */
+    transition: all 0.3s ease;
+}
 
 /* =========================================
    9. FAQ SECTION (Fixes)