/* Import font custom */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500&display=swap');

/* Ubah font dasar */
body {
  font-family: "Sora", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Ubah warna primer */
:root {
  --bs-primary: #ff6b6b;
  --bs-primary-rgb: 255, 107, 107;
  --bs-secondary: #4ecdc4;
  --bs-secondary-rgb: 78, 205, 196;
  --bs-success: #7be495;
  --bs-danger: #ff7171;
  --bs-warning: #ffe66d;
  --bs-info: #6ddccf;
}

/* Ubah warna latar dan teks */
body {
  background-color: #f7f7f7;
  color: #333;
}

/* Styling navbar */
.navbar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, var(--bs-primary) 0%, #817dff 100%) !important;
}

.navbar-dark .navbar-brand, 
.navbar-dark .nav-link {
  color: white !important;
}

/* Styling card */
.card {
  border-radius: 15px;
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.card-header {
  border-radius: 15px 15px 0 0 !important;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
}

/* Styling tombol */
.btn {
  border-radius: 30px;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary, .btn-primary:hover {
  background: linear-gradient(135deg, var(--bs-primary) 0%, #817dff 100%);
  border-color: var(--bs-primary);
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

/* Additional button styles */
.btn-outline-primary, .btn-outline-danger, .btn-outline-success, .btn-outline-info {
  border-radius: 30px;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease;
}

.btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-outline-primary:hover { background-color: var(--bs-primary); color: white; }

.btn-outline-danger { color: var(--bs-danger); border-color: var(--bs-danger); }
.btn-outline-danger:hover { background-color: var(--bs-danger); color: white; }

.btn-outline-success { color: var(--bs-success); border-color: var(--bs-success); }
.btn-outline-success:hover { background-color: var(--bs-success); color: white; }

.btn-outline-info { color: var(--bs-info); border-color: var(--bs-info); }
.btn-outline-info:hover { background-color: var(--bs-info); color: white; }

/* Special button styles */
.btn-sm.btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-sm.btn-outline-primary:hover { background-color: var(--bs-primary); color: white; }

.btn-sm.btn-outline-secondary { color: #6c757d; border-color: #6c757d; }
.btn-sm.btn-outline-secondary:hover { background-color: #6c757d; color: white; }

.btn-sm.btn-outline-danger { color: var(--bs-danger); border-color: var(--bs-danger); }
.btn-sm.btn-outline-danger:hover { background-color: var(--bs-danger); color: white; }

.text-centermb-3 { color: var(--bs-primary); border-color: var(--bs-primary); }
.text-centermb-3 :hover { background-color: var(--bs-danger); color: white; }


/* Styling post card */
.post-card {
  margin-bottom: 25px;
}

.post-card .card-body {
  padding: 1.5rem;
}

/* Styling forms */
.form-control {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 0.75rem;
}

.form-control:focus {
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
  border-color: var(--bs-primary);
}

/* Animasi dan efek */
.comment-section, .load-more-btn {
  transition: all 0.3s ease;
}

/* Styling footer */
footer {
  background-color: #2d3436;
  color: #fff;
  padding: 2rem 0;
}

footer a {
  color: #dfe6e9;
  transition: color 0.3s;
}

footer a:hover {
  color: white;
}

.text-center.mb-3 { font-weight: bold; color: #555; }

.col-md-6.text-md-end { text-align: right; color: #dfe6e9; }

/* Responsif pada layar kecil */
@media (max-width: 768px) {
  .card {
    margin-bottom: 20px;
  }
  
  .btn {
    padding: 0.4rem 1.2rem;
  }
}

/* Add these CSS fixes at the end of your custom-design.css file */

/* Fix for dropdown positioning and display */
.dropdown-menu {
  display: none !important;
  z-index: 1500 !important;
  position: absolute !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  margin-top: 0.5rem !important;
  overflow: hidden !important;
}

/* Force display when .show class is present */
.dropdown-menu.show {
  display: block !important;
}

/* Fix the dropdown arrow */
.navbar .dropdown-toggle::after {
  display: inline-block !important;
  margin-left: 0.255em !important;
  vertical-align: 0.255em !important;
  content: "" !important;
  border-top: 0.3em solid !important;
  border-right: 0.3em solid transparent !important;
  border-bottom: 0 !important;
  border-left: 0.3em solid transparent !important;
}

/* Fix parent positioning */
.dropdown, .dropend, .dropstart, .dropup {
  position: relative !important;
}

/* Fix for dropdown items */
.dropdown-item {
  padding: 0.5rem 1.5rem !important;
  font-weight: 500 !important;
  color: #333 !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  color: var(--bs-primary) !important;
}

/* Additional fix for navbar dropdown specifically */
.navbar .dropdown-menu {
  right: 0 !important;
  left: auto !important;
}