/* =============================================================
   CF Item Favorites — cf-styles.css
   ============================================================= */

:root {
  --cf-heart:       #e74c3c;
  --cf-gray:        #6b7280;
  --cf-white:       #ffffff;
  --cf-border:      #e5e7eb;
  --cf-radius:      50px;
  --cf-shadow:      0 4px 20px rgba(0,0,0,0.18);
  --cf-transition:  0.2s ease;
  --cf-primary:     #6b7d4f;
  --cf-danger:      #dc2626;
}

/* =============================================================
   BASE BUTTON — used everywhere
   ============================================================= */
.cf-fav-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      rgba(255,255,255,0.95);
  border:          2px solid #e5e7eb;
  border-radius:   var(--cf-radius);
  padding:         8px 16px;
  cursor:          pointer;
  font-size:       14px;
  font-weight:     600;
  font-family:     inherit;
  color:           var(--cf-gray);
  line-height:     1;
  white-space:     nowrap;
  user-select:     none;
  -webkit-user-select: none;
  transition:      background var(--cf-transition),
                   border-color var(--cf-transition),
                   color var(--cf-transition),
                   transform var(--cf-transition),
                   box-shadow var(--cf-transition);
  box-shadow:      0 2px 8px rgba(0,0,0,0.12);
  text-decoration: none;
  outline:         none;
}

.cf-fav-btn:hover {
  background:   #fff;
  border-color: #fca5a5;
  color:        var(--cf-heart);
  box-shadow:   0 4px 16px rgba(231,76,60,0.2);
  transform:    translateY(-1px) scale(1.02);
}

.cf-fav-btn:focus-visible {
  outline:        2px solid var(--cf-primary);
  outline-offset: 2px;
}

.cf-fav-btn.cf-is-active {
  background:   #fff5f5;
  border-color: #fca5a5;
  color:        var(--cf-heart);
}

.cf-fav-btn.cf-is-active:hover {
  background:   #fee2e2;
}

/* Heart SVG */
.cf-heart-icon {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
}

.cf-heart-icon svg {
  display: block;
  transition: fill var(--cf-transition),
              transform 0.3s cubic-bezier(.34,1.56,.64,1);
}

.cf-fav-btn:hover .cf-heart-icon svg {
  fill: var(--cf-heart) !important;
}

/* Heartbeat animation */
@keyframes cf-heartbeat {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  50%  { transform: scale(0.9); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.cf-fav-btn.cf-animating .cf-heart-icon svg {
  animation: cf-heartbeat 0.45s ease forwards;
}

.cf-btn-label { font-size: 14px; }

.cf-fav-count {
  background:    var(--cf-heart);
  color:         #fff;
  border-radius: 50px;
  padding:       2px 7px;
  font-size:     11px;
  font-weight:   700;
  line-height:   1.6;
}

/* =============================================================
   SINGLE ITEM PAGE — FLOATING ACTION BUTTON (FAB)
   Always visible. JS moves it inline after loading.
   ============================================================= */
.cf-single-fab-wrap {
  position:  fixed;
  bottom:    28px;
  right:     28px;
  z-index:   99999;
}

.cf-single-fab-wrap .cf-fav-btn.cf-fab {
  padding:    12px 22px;
  font-size:  15px;
  box-shadow: var(--cf-shadow);
  border:     none;
  background: #fff;
}

.cf-single-fab-wrap .cf-fav-btn.cf-fab:hover {
  box-shadow: 0 6px 24px rgba(231,76,60,0.28);
  transform:  translateY(-2px) scale(1.03);
}

/* When JS has successfully moved button inline, hide the FAB wrapper */
.cf-single-fab-wrap.cf-fab-hidden {
  display: none !important;
}

/* Inline button (after JS injection) */
.cf-inline-btn-wrap {
  display:     flex;
  align-items: center;
  margin:      10px 0 18px;
}

.cf-inline-btn-wrap .cf-fav-btn {
  font-size: 15px;
  padding:   10px 20px;
}

@media (max-width: 640px) {
  .cf-single-fab-wrap {
    bottom: 80px;
    right:  16px;
  }
}

/* =============================================================
   ARCHIVE / GRID — THUMBNAIL OVERLAY
   ============================================================= */
.cf-thumb-wrap {
  position: relative;
  display:  block;
  overflow: visible;
}

.cf-thumb-wrap img,
.cf-thumb-wrap a > img {
  display: block;
  width:   100%;
}

/* Positioned variants on thumbnail overlay */
.cf-thumb-wrap .cf-fav-btn.cf-pos-top-right {
  position: absolute; top: 10px; right: 10px;
}
.cf-thumb-wrap .cf-fav-btn.cf-pos-top-left {
  position: absolute; top: 10px; left: 10px;
}
.cf-thumb-wrap .cf-fav-btn.cf-pos-bottom-right {
  position: absolute; bottom: 10px; right: 10px;
}
.cf-thumb-wrap .cf-fav-btn.cf-pos-bottom-left {
  position: absolute; bottom: 10px; left: 10px;
}

/* JS-injected card overlay */
.cf-card-overlay-btn {
  position: absolute;
  top:      10px;
  right:    10px;
  z-index:  10;
}

/* Inline variant */
.cf-fav-btn.cf-pos-inline {
  position: static;
  margin:   8px 0;
}

/* =============================================================
   TOAST NOTIFICATIONS
   ============================================================= */
#cf-toast-container {
  position:        fixed;
  bottom:          24px;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         999999;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             10px;
  pointer-events:  none;
  width:           320px;
}

.cf-toast {
  background:      #1f2937;
  color:           #f9fafb;
  border-radius:   10px;
  padding:         12px 18px;
  font-size:       14px;
  font-weight:     500;
  box-shadow:      0 4px 20px rgba(0,0,0,0.2);
  pointer-events:  all;
  opacity:         0;
  transform:       translateY(10px) scale(0.96);
  transition:      opacity 0.25s ease, transform 0.25s ease;
  display:         flex;
  align-items:     center;
  gap:             10px;
  width:           100%;
}

.cf-toast.cf-toast-visible {
  opacity:   1;
  transform: translateY(0) scale(1);
}

.cf-toast.cf-toast-success { border-left: 4px solid #22c55e; }
.cf-toast.cf-toast-error   { border-left: 4px solid #ef4444; }
.cf-toast.cf-toast-info    { border-left: 4px solid #3b82f6; }

.cf-toast-icon  { font-size: 16px; flex-shrink: 0; }
.cf-toast-close {
  margin-left: auto;
  background:  none;
  border:      none;
  color:       #9ca3af;
  cursor:      pointer;
  font-size:   18px;
  padding:     0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.cf-toast-close:hover { color: #fff; }

@media (max-width: 640px) {
  #cf-toast-container {
    width:  calc(100% - 32px);
    bottom: 16px;
    left:   16px;
    transform: none;
  }
}

/* =============================================================
   FAVOURITES PAGE
   ============================================================= */
.cf-favorites-page {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 20px 60px;
}

.cf-page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
  margin-bottom:   30px;
  padding-bottom:  16px;
  border-bottom:   2px solid var(--cf-border);
}

.cf-page-title {
  font-size:   1.8em;
  font-weight: 700;
  margin:      0;
  display:     flex;
  align-items: center;
  gap:         12px;
}

.cf-page-count {
  font-size:     0.5em;
  font-weight:   500;
  color:         var(--cf-gray);
  background:    #f3f4f6;
  border-radius: 50px;
  padding:       4px 12px;
}

/* Grid */
.cf-items-grid { display: grid; gap: 24px; }
.cf-cols-1 { grid-template-columns: 1fr; }
.cf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cf-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .cf-cols-3, .cf-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cf-cols-2, .cf-cols-3, .cf-cols-4 { grid-template-columns: 1fr; }
}

/* Card */
.cf-fav-card {
  background:  #fff;
  border:      1px solid var(--cf-border);
  border-radius: 10px;
  overflow:    hidden;
  box-shadow:  0 1px 4px rgba(0,0,0,0.06);
  transition:  box-shadow var(--cf-transition), transform var(--cf-transition);
  display:     flex;
  flex-direction: column;
}

.cf-fav-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  transform:  translateY(-2px);
}

@keyframes cf-card-out {
  to { opacity: 0; transform: scale(0.93); max-height: 0; padding: 0; margin: 0; border: none; }
}
.cf-fav-card.cf-removing {
  animation:      cf-card-out 0.35s ease forwards;
  pointer-events: none;
  overflow:       hidden;
}

.cf-card-thumb {
  position:      relative;
  overflow:      hidden;
  background:    #f3f4f6;
  aspect-ratio:  16 / 9;
}

.cf-card-thumb a { display: block; height: 100%; }

.cf-card-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.35s ease;
}

.cf-fav-card:hover .cf-card-img { transform: scale(1.04); }

.cf-no-thumb {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      #e5e7eb;
  width:           100%;
  height:          100%;
}

.cf-card-cats {
  position:    absolute;
  top:         10px;
  left:        10px;
  display:     flex;
  flex-wrap:   wrap;
  gap:         4px;
}

.cf-card-cats a {
  background:     rgba(0,0,0,0.65);
  color:          #fff;
  font-size:      11px;
  font-weight:    600;
  padding:        3px 8px;
  border-radius:  50px;
  text-decoration: none;
}

.cf-card-body {
  padding:        16px;
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.cf-card-title {
  font-size:   1.05em;
  font-weight: 700;
  margin:      0 0 10px;
  line-height: 1.3;
}

.cf-card-title a { color: inherit; text-decoration: none; }
.cf-card-title a:hover { color: var(--cf-primary); }

.cf-card-meta {
  font-size:   12.5px;
  color:       var(--cf-gray);
  margin:      0 0 6px;
  display:     flex;
  align-items: center;
  gap:         5px;
}

.cf-card-excerpt {
  font-size:   13px;
  color:       #4b5563;
  line-height: 1.55;
  margin:      6px 0 0;
  flex:        1;
}

.cf-card-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      14px;
  padding-top:     12px;
  border-top:      1px solid var(--cf-border);
  gap:             8px;
}

/* Shared base for both card footer buttons */
.cf-btn-view,
.cf-btn-remove {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  background:      none;
  border-radius:   30px;
  padding:         6px 14px;
  font-size:       13px;
  font-weight:     600;
  white-space:     nowrap;
  line-height:     1;
  cursor:          pointer;
  font-family:     inherit;
  text-decoration: none;
  transition:      background var(--cf-transition),
                   color var(--cf-transition),
                   border-color var(--cf-transition);
}

/* View Item — same red outline as Remove */
.cf-btn-view {
  border: 1px solid #fca5a5;
  color:  var(--cf-danger);
}
.cf-btn-view:hover {
  background:   var(--cf-danger);
  color:        #fff;
  border-color: var(--cf-danger);
}

/* Remove — red outline */
.cf-btn-remove {
  border: 1px solid #fca5a5;
  color:  var(--cf-danger);
}
.cf-btn-remove:hover {
  background:   var(--cf-danger);
  color:        #fff;
  border-color: var(--cf-danger);
}

/* Empty state */
.cf-empty-state {
  text-align: center;
  padding:    60px 20px;
  color:      var(--cf-gray);
}
.cf-empty-icon    { margin-bottom: 16px; }
.cf-empty-state p { max-width: 420px; margin: 0 auto 24px; line-height: 1.6; }

/* Buttons */
.cf-btn-primary {
  display:         inline-block;
  background:      var(--cf-primary);
  color:           #fff;
  border-radius:   30px;
  padding:         10px 22px;
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      background var(--cf-transition);
}
.cf-btn-primary:hover { background: #56663f; color: #fff; }

.cf-btn-danger {
  display:      inline-flex;
  align-items:  center;
  background:   #fff;
  color:        var(--cf-danger);
  border:       1px solid #fca5a5;
  border-radius:30px;
  padding:      8px 16px;
  font-size:    13px;
  font-weight:  600;
  cursor:       pointer;
  transition:   background var(--cf-transition), color var(--cf-transition);
  font-family:  inherit;
}
.cf-btn-danger:hover { background: var(--cf-danger); color: #fff; border-color: var(--cf-danger); }

/* Loading */
.cf-loading { text-align: center; padding: 40px; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
.cf-spinner {
  width:        36px;
  height:       36px;
  border:       3px solid #e5e7eb;
  border-top-color: var(--cf-primary);
  border-radius:50%;
  animation:    cf-spin 0.7s linear infinite;
  margin:       0 auto 12px;
}

/* Responsive page header */
@media (max-width: 640px) {
  .cf-page-header { flex-direction: column; align-items: flex-start; }
}