@import url("../tender-favorites.css");

/* Default.aspx page styles - extracted from inline */
.country-flag-circle {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          object-fit: cover;
          vertical-align: middle;
          margin-inline-end: 6px;
          border: 1px solid #e6e6e6;
          display: inline-block;
        }


/* Extracted Styles */

/* Modernized Notification Header */
                                .notif-header-modern {
                                    display: block; position: relative;
                                    padding: 14px 20px; cursor: pointer; -webkit-user-select: none; user-select: none;
                                    background: linear-gradient(135deg, #fff8f0 0%, #fff 100%);
                                    border: 1px solid #f0e6d8; border-radius: 8px;
                                    transition: background .25s, box-shadow .25s;
                                    text-decoration: none !important; color: #333 !important;
                                }
                                .notif-header-modern:hover {
                                    background: linear-gradient(135deg, #fff3e0 0%, #fff 100%);
                                    box-shadow: 0 4px 12px rgba(230,126,34,.12);
                                }
                                .notif-bell { font-size: 1.4rem; color: #e67e22; vertical-align: middle; margin: 0 5px; }
                                .notif-bell.is-ringing { animation: notifShake 0.8s ease-in-out 3; }
                                @keyframes notifShake {
                                    0% { transform: rotate(0); }
                                    15% { transform: rotate(14deg); }
                                    30% { transform: rotate(-14deg); }
                                    45% { transform: rotate(10deg); }
                                    60% { transform: rotate(-10deg); }
                                    75% { transform: rotate(4deg); }
                                    100% { transform: rotate(0); }
                                }
                                .notif-header-modern:before, .notif-header-modern:after { display: none !important; }
                                .notif-title-modern { font-weight: 700; font-size: 1.25rem; margin: 0; vertical-align: middle; }
                                .notif-date-modern { color: #aaa; font-size: 0.75rem; font-weight: 400; margin: 0 10px; vertical-align: middle; }
                                .notif-count-inline {
                                    display: inline-flex; align-items: center; justify-content: center;
                                    min-width: 22px; height: 22px; padding: 0 7px;
                                    border-radius: 999px; background: #e74c3c;
                                    color: #fff; font-size: .8rem; font-weight: 700; line-height: 1;
                                    position: absolute; top: 50%; transform: translateY(-50%);
                                    right: 40px; /* LTR target */
                                }
                                [dir="rtl"] .notif-count-inline { right: auto; left: 40px; }
                                .notif-count-inline:empty, .notif-count-inline[data-count="0"] { display: none; }
                                
                                .notif-chevron-modern {
                                    position: absolute; top: 50%; transform: translateY(-50%);
                                    right: 15px; color: #999; font-size: 1rem; transition: transform .3s ease;
                                }
                                [dir="rtl"] .notif-chevron-modern { right: auto; left: 15px; }
                                .collapsed .notif-chevron-modern { transform: translateY(-50%) rotate(-90deg); }
                                [dir="rtl"] .collapsed .notif-chevron-modern { transform: translateY(-50%) rotate(90deg); }

.mobile-chart-section-title {
                                  display: flex;
                                  align-items: center;
                                  gap: 4px;
                                  font-size: 0.7rem;
                                  font-weight: 700;
                                  color: #1f6d7a;
                                  margin-bottom: 4px;
                              }
                      
                              .mobile-chart-card {
                                  background: #f8fafd;
                                  border: 1px solid #eef3fc;
                                  border-radius: 8px;
                                  padding: 8px;
                                  margin-top: 6px;
                              }
                      
                              .mobile-chart-container {
                                  position: relative;
                                  height: 120px;
                                  width: 100%;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  padding-top: 2px;
                                  border: 1px solid #edf1f7;
                              }

.sw { border-radius: 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden;  margin-bottom: 15px; }
                          .sw-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 5px solid #2e8795; background: #fafbfc; }
                          .sw-head i { color: #2e8795; font-size: 18px; }
                          .sw-head span { font-size: 14px; font-weight: 700; color: #2e8795; }
                          .sw-badge { margin-right: auto; margin-left: 0; background: linear-gradient(135deg,#f5833d,#e06a20); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 10px; letter-spacing: .3px; }
                          .sw-chart-area { position: relative; padding: 12px; background: #eaeaea; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L20 20M0 20L20 20' fill='none' stroke='%23bebebe' stroke-width='.5'/%3E%3C/svg%3E"); }
                          .sw-chart-wrap { position: relative; height: 160px; margin: 0 auto; max-width: 180px; }
                          .sw-rows { padding: 0 12px 8px;background:#fff; }
                          .sw-row { display: flex; align-items: center; padding: 7px 0; border-bottom: 1px solid #f0f3f6; }
                          .sw-row:last-child { border-bottom: none; }
                          .sw-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
                          .sw-lbl { flex: 1; font-size: 12.5px; font-weight: 600;  padding: 0 8px; white-space: nowrap; }
                          .sw-bar-track { flex: 0 0 60px; height: 5px; background: #edf1f5; border-radius: 3px; overflow: hidden; }
                          .sw-bar-fill { height: 100%; border-radius: 3px; transition: width .6s ease; }
.sw-val {
    min-width: 40px;
    text-align: left;
    font-size: 13px;
    font-weight: 800;
    font-family: Georgia;
    padding-right: 2px;
    color:#747474;
}
                          .sw-foot { text-align: center; font-size: 10px; color: #aab4be; padding: 4px 0 8px; }

.dc{max-width:100%;background:#fff;border-radius:20px;box-shadow:0 8px 24px -8px rgba(0,0,0,.08);overflow:hidden;border-top:5px solid #e44049;margin-bottom:15px;transition:transform .2s}
                          .dc:hover{transform:translateY(-2px)}
                          .dc-inner{padding:18px 16px 16px}
                          .dc-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
                          .dc-icon{background:#e44049;width:42px;height:42px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#fff;animation:dcPulse 1.8s ease-in-out infinite}
                          .dc-icon i{animation:dcWiggle 1.8s ease-in-out infinite;transform-origin:center}
                          @keyframes dcPulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(228,64,73,.35)}50%{transform:scale(1.06);box-shadow:0 0 0 5px rgba(228,64,73,.15)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(228,64,73,0)}}
                          @keyframes dcWiggle{0%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
                          .dc-titles h3{font-size:1.05rem;font-weight:800;color:#2d3e48;margin:0 0 2px}
                          .dc-titles p{font-size:.65rem;color:#7c8c99;margin:0}
                          .dc-date{background:linear-gradient(145deg,#fff8f8,#fef0f0);border-radius:20px;padding:12px;text-align:center;border:1px solid #ffe0e2;margin-bottom:14px}
                          .dc-day{font-size:2.8rem;font-weight:800;color:#e44049;line-height:1;margin-bottom:4px;letter-spacing:-1px}
                          .dc-my{font-size:.85rem;font-weight:600;color:#4a6572;display:flex;align-items:center;justify-content:center;gap:6px}
                          .dc-my span{background:#ffffffcc;padding:3px 8px;border-radius:20px;font-size:.75rem}
                          .dc-info{background:#f9fbfd;border-radius:14px;padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
                          .dc-count{font-size:1.6rem;font-weight:800;color:#e44049}
                          .dc-lbl{font-size:.75rem;font-weight:600;color:#5f7482}
                          .dc-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#e44049;color:#fff;text-decoration:none;padding:10px 0;border-radius:40px;font-weight:700;font-size:.85rem;transition:all .2s}
                          .dc-btn:hover{background:#c12d36;transform:translateY(-1px);color:#fff}
                          .dc-btn i{font-size:.85rem;transition:transform .2s}
                          .dc-btn:hover i{transform:translateX(-4px)}

@keyframes float {
                    0% {
                      transform: translateY(0px) rotate(0deg);
                    }

                    50% {
                      transform: translateY(-20px) rotate(3deg);
                    }

                    100% {
                      transform: translateY(0px) rotate(0deg);
                    }
                  }

                  /* Hover effects */
                  .featured.image-box {
                    transition: all 0.4s ease;
                  }

                  .featured.image-box:hover {
                    animation: none;
                    /* Stops the float animation on hover */
                    transform: scale(1.15) rotate(-5deg) translateY(-10px);
                    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.7));
                  }

                  .featured.image-box:hover img {
                    animation: pulse 0.8s ease infinite alternate;
                  }

                  @keyframes pulse {
                    from {
                      transform: scale(1);
                    }

                    to {
                      transform: scale(1.05);
                    }
                  }