/* ==========================================================================
   DEAL CARD - BASE
   ========================================================================== */

.uah-deal-card {
   background: var(--uah-color-bg);
   border: 1px solid var(--uah-color-border);
   border-radius: var(--uah-radius-l);
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: row;
   gap: 0;
   transition: all var(--uah-transition-normal);
}

.uah-deal-card:hover {
   border-color: var(--uah-color-primary);
}

/* ==========================================================================
   EXPIRED CARDS
   ========================================================================== */

.uah-deal-expired:hover {
   border-color: var(--uah-color-border);
}

.uah-deal-expired .uah-card-image img {
   filter: grayscale(1);
}

.uah-deal-expired .uah-card-cta {
   border: 1px dashed var(--uah-color-gray);
}

.uah-deal-expired .uah-card-button-primary {
   background: var(--uah-color-bg-alt);
   color: var(--uah-color-gray);
}

.uah-deal-expired .uah-discount-badge {
   opacity: 0.5;
   filter: grayscale(1);
}

/* ==========================================================================
   EXCLUSIVE CARDS
   ========================================================================== */

.uah-deal-exclusive {
   border-color: var(--uah-color-featured);
}

/* ==========================================================================
   DISCOUNT BADGE
   ========================================================================== */

.uah-discount-badge {
   position: absolute;
   top: var(--uah-spacing-m);
   left: var(--uah-spacing-m);
   z-index: var(--uah-z-badge);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   background: var(--uah-color-discount);
   color: var(--uah-alt-color-heading);
   font-size: var(--uah-font-size-xs);
   font-weight: var(--uah-font-weight-semibold);
   border-radius: 50%;
   transform: rotate(-10deg);
}

/* ==========================================================================
   EXCLUSIVE BADGE
   ========================================================================== */

.uah-exclusive-badge {
   position: absolute;
   bottom: var(--uah-spacing-m);
   left: var(--uah-spacing-m);
   z-index: var(--uah-z-badge);
   display: inline-flex;
   align-items: center;
   gap: var(--uah-spacing-s);
   padding: var(--uah-spacing-s) var(--uah-spacing-m);
   background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
   color: white;
   font-size: var(--uah-font-size-xxs);
   font-weight: var(--uah-font-weight-semibold);
   border-radius: var(--uah-radius-m);
   box-shadow: var(--uah-shadow-sm);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.uah-exclusive-badge .fa-crown {
   font-size: var(--uah-font-size-xs);
}

/* ==========================================================================
   NEW BADGE
   ========================================================================== */

.uah-new-badge {
   display: inline-flex;
   align-items: center;
   padding: var(--uah-spacing-xs) var(--uah-spacing-m);
   background: linear-gradient(135deg, #10B981 0%, #059669 100%);
   color: white;
   font-size: var(--uah-font-size-xxs);
   font-weight: var(--uah-font-weight-semibold);
   border-radius: var(--uah-radius-m);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   animation: uah-pulse-new 2s ease-in-out infinite;
   margin-left: auto;
}

@keyframes uah-pulse-new {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.7; }
}

/* ==========================================================================
   CARD IMAGE
   ========================================================================== */

.uah-card-image {
   background: var(--uah-color-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   width: 220px;
   min-width: 220px;
   flex-shrink: 0;
   overflow: hidden;
   padding: var(--uah-spacing-l);
   border-right: 1px dashed var(--uah-color-border);
   border-radius: var(--uah-radius-l);
}

.uah-card-image-link {
   display: flex;
   position: relative;
}

.uah-card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   aspect-ratio: 1 / 1;
   background: var(--uah-color-bg-alt);
   border: 1px solid var(--uah-color-border);
   transition: all var(--uah-transition-normal);
   border-radius: var(--uah-radius-l);
}

.uah-deal-card:hover .uah-card-image img {
   border-color: var(--uah-color-primary);
}

.uah-deal-expired:hover .uah-card-image img {
   border-color: var(--uah-color-border);
}

.uah-card-image-placeholder {
   width: 100%;
   height: 100%;
   min-height: 150px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--uah-color-gray);
   font-size: var(--uah-font-size-xxxl);
   background: var(--uah-color-bg-alt);
   border-radius: var(--uah-radius-l);
}

/* ==========================================================================
   CARD CONTENT
   ========================================================================== */

.uah-card-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: var(--uah-spacing-l);
   position: relative;
}

/* ==========================================================================
   CARD HEADER (Countdown)
   ========================================================================== */

.uah-card-header {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   margin-bottom: var(--uah-spacing-m);
}

.uah-countdown {
   display: inline-flex;
   align-items: center;
   gap: var(--uah-spacing-s);
   background: var(--uah-color-bg-alt);
   border-radius: var(--uah-radius-l);
   font-size: var(--uah-font-size-xs);
   font-weight: var(--uah-font-weight-normal);
   color: var(--uah-color-faded);
   line-height: var(--uah-line-height-s);
   padding: var(--uah-spacing-s) var(--uah-spacing-l);
}

.uah-countdown-label {
   font-weight: var(--uah-font-weight-light);
}

.uah-countdown-time {
   font-weight: var(--uah-font-weight-semibold);
}

.uah-countdown-urgent {
   background: #ffeaea;
}

.uah-countdown-urgent,
.uah-countdown-urgent .uah-countdown-label,
.uah-countdown-urgent .uah-countdown-time {
   color: var(--uah-color-error);
}

.uah-countdown-expired {
   background: var(--uah-color-faded);
   color: var(--uah-alt-color-heading);
}

.uah-countdown-expired .uah-countdown-label,
.uah-countdown-expired .uah-countdown-time {
   color: var(--uah-alt-color-heading);
}

/* ==========================================================================
   CARD TITLE
   ========================================================================== */

.uah-card-title {
   font-size: var(--uah-font-size-l);
   font-weight: var(--uah-font-weight-semibold);
   line-height: var(--uah-line-height-s);
   color: var(--uah-color-heading);
   margin-bottom: var(--uah-spacing-m);
}

.uah-card-title a {
   color: var(--uah-color-heading);
   text-decoration: none;
   transition: all var(--uah-transition-normal);
}

.uah-deal-card:hover .uah-card-title a {
   color: var(--uah-color-primary);
}

.uah-deal-expired:hover .uah-card-title a {
   color: var(--uah-color-heading);
}

/* ==========================================================================
   INFO ROW (Price, Shipping, Shop)
   ========================================================================== */

.uah-card-info-row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--uah-spacing-m);
   align-items: center;
   margin-bottom: var(--uah-spacing-m);
   line-height: var(--uah-line-height-s);
   font-size: var(--uah-font-size-s);
}

/* Separator dots */
.uah-card-info-row .uah-card-price-row:after,
.uah-card-info-row .uah-card-shipping:after {
   content: "•";
   padding-left: var(--uah-spacing-m);
   color: var(--uah-color-faded);
}

/* Price */
.uah-card-price-row {
   display: flex;
   align-items: center;
   gap: var(--uah-spacing-m);
}

.uah-price-current {
   font-weight: var(--uah-font-weight-semibold);
   color: var(--uah-color-primary);
   font-size: var(--uah-font-size-l);
}

.uah-deal-expired .uah-price-current {
   color: var(--uah-color-faded);
}

.uah-price-original {
   color: var(--uah-color-faded);
   text-decoration: line-through;
}

/* Shipping */
.uah-card-shipping {
   display: flex;
   align-items: center;
   gap: var(--uah-spacing-s);
   color: var(--uah-color-faded);
}

.uah-card-shipping i {
   font-size: var(--uah-font-size-xxs);
}

/* Shop */
.uah-card-shop {
   display: flex;
   align-items: center;
   gap: var(--uah-spacing-s);
   color: var(--uah-color-faded);
}

.uah-shop-logo {
   width: 20px;
   height: 20px;
   border-radius: var(--uah-radius-full);
   object-fit: cover;
}

.uah-deal-expired .uah-shop-logo {
   filter: grayscale(1);
}

.uah-shop-prefix {
   font-weight: var(--uah-font-weight-light);
}

.uah-shop-name {
   font-weight: var(--uah-font-weight-semibold);
}

/* ==========================================================================
   CARD DESCRIPTION
   ========================================================================== */

.uah-card-description {
   margin: 0;
   margin-bottom: var(--uah-spacing-l);
   font-size: var(--uah-font-size-s);
   line-height: var(--uah-line-height-normal);
   color: var(--uah-color-faded);
   flex: 1;
}

/* ==========================================================================
   CARD FOOTER
   ========================================================================== */

.uah-card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--uah-spacing-m);
   margin-top: auto;
}

/* Footer Icon (Bookmark) */
.uah-footer-icon {
   display: flex;
   align-items: center;
}

.uah-bookmark-btn {
   padding: var(--uah-spacing-m);
   font-size: var(--uah-font-size-m);
   line-height: var(--uah-line-height-s);
   color: var(--uah-color-faded);
   background: var(--uah-color-bg-alt);
   border: none;
   border-radius: var(--uah-radius-m);
   cursor: pointer;
   transition: all var(--uah-transition-fast);
}

.uah-bookmark-btn:hover {
   color: var(--uah-alt-color-heading);
   background: var(--uah-color-faded);
}

.uah-bookmark-btn.is-bookmarked {
   color: var(--uah-color-discount);
   background: var(--uah-color-bg-alt);
}

.uah-bookmark-btn.is-bookmarked:hover {
   background: var(--uah-color-discount);
   color: var(--uah-alt-color-heading);
}

/* CTA Button */
.uah-card-cta {
   flex-shrink: 0;
   border: 1px dashed var(--uah-color-primary);
   border-radius: var(--uah-radius-l);
   overflow: hidden;
   padding: var(--uah-spacing-xs);
}

.uah-card-button {
   display: inline-flex;
   align-items: center;
   gap: var(--uah-spacing-s);
   background: var(--uah-color-primary);
   color: var(--uah-alt-color-heading);
   padding: var(--uah-spacing-s) var(--uah-spacing-l);
   border-radius: var(--uah-radius-l);
   font-weight: var(--uah-font-weight-normal);
   font-size: var(--uah-font-size-s);
   text-decoration: none;
   border: none;
   cursor: pointer;
   transition: all var(--uah-transition-fast);
   white-space: nowrap;
}

.uah-card-button i {
   font-size: var(--uah-font-size-xxs);
}

.uah-card-button:hover {
   background: var(--uah-color-secondary);
   color: var(--uah-alt-color-heading);
}

/* ==========================================================================
   DEAL CARDS GRID
   ========================================================================== */

.uah-deal-cards-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--uah-spacing-xl);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.uah-empty-state {
   text-align: center;
   padding: var(--uah-spacing-huge) var(--uah-spacing-l);
   background: var(--uah-color-bg-alt);
   border-radius: var(--uah-radius-l);
   border: 2px dashed var(--uah-color-border);
}

.uah-empty-state .fa-gift {
   color: var(--uah-color-faded);
   margin-bottom: var(--uah-spacing-l);
   opacity: 0.5;
}

.uah-empty-state h3 {
   font-size: var(--uah-font-size-l);
   font-weight: var(--uah-font-weight-semibold);
   color: var(--uah-color-heading);
   margin-bottom: var(--uah-spacing-s);
}

.uah-empty-state p {
   color: var(--uah-color-faded);
   margin-bottom: var(--uah-spacing-l);
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
}

.uah-switch-tab {
   display: inline-flex;
   align-items: center;
   gap: var(--uah-spacing-s);
   padding: var(--uah-spacing-s) var(--uah-spacing-l);
   background: var(--uah-color-secondary);
   color: white;
   text-decoration: none;
   border-radius: var(--uah-radius-l);
   font-weight: var(--uah-font-weight-semibold);
   transition: all var(--uah-transition-normal);
}

.uah-switch-tab:hover {
   background: var(--uah-color-primary);
   transform: translateY(-2px);
   box-shadow: var(--uah-shadow-md);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
   .uah-deal-card {
      flex-direction: column;
   }

   .uah-card-image {
      width: 120px;
      min-width: auto;
      border-right: none;
      padding: 0;
      margin: var(--uah-spacing-l) auto 0 auto;
   }

   .uah-exclusive-badge {
      bottom: auto;
      top: 0;
      left: 0;
      width: 100%;
      justify-content: center;
      border-radius: 0;
      opacity: 0.9;
   }

   .uah-card-header {
      justify-content: center;
   }

   .uah-card-title {
      text-align: center;
      margin-bottom: var(--uah-spacing-l);
   }

   .uah-card-info-row {
      justify-content: center;
      flex-direction: column;
      margin-bottom: var(--uah-spacing-l);
   }

   .uah-card-info-row .uah-card-price-row:after,
   .uah-card-info-row .uah-card-shipping:after {
      display: none;
   }

   .uah-card-price-row {
      margin-bottom: var(--uah-spacing-m);
   }

   .uah-card-footer {
      flex-direction: column;
      align-items: center;
      gap: var(--uah-spacing-l);
   }

   .uah-card-cta {
      order: 1;
      width: 100%;
   }

   .uah-card-button {
      width: 100%;
      justify-content: center;
   }

   .uah-footer-icon {
      order: 2;
   }

   .uah-card-description {
      display: none;
   }

   .uah-discount-badge {
      width: 38px;
      height: 38px;
      font-size: var(--uah-font-size-xs);
   }

   /* Tab Header */
   .uah-exklusive-deals-tab {
      padding: var(--uah-spacing-m);
   }

   .uah-tab-title {
      font-size: var(--uah-font-size-xl);
   }

   .uah-tab-subtitle {
      font-size: var(--uah-font-size-s);
   }
}