@charset "utf-8";

* { margin: 0px; padding: 0px; box-sizing: border-box; }

body { font-family: "Open Sans", sans-serif; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); }

.container { max-width: 1200px; width: 100%; margin: 0px auto; }

.header { background-color: rgb(204, 0, 0); color: white; }

.header-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); border-bottom: 1px solid rgb(221, 221, 221); position: relative; }

.h-t { display: flex; justify-content: space-between; align-items: center; }

.menu-icon { font-size: 14px; font-weight: 600; color: rgb(0, 0, 0); text-decoration: none; }

.logo { display: flex; align-items: center; gap: 5px; font-weight: bold; font-size: 20px; color: rgb(0, 0, 0); text-decoration: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.cbc-icon { color: rgb(204, 0, 0); font-size: 20px; }

.header-right { display: flex; gap: 20px; font-size: 14px; }

.search-icon, .signin { cursor: pointer; display: flex; align-items: center; color: rgb(0, 0, 0); gap: 4px; font-weight: 600; text-decoration: none; }

.navigation { background-color: rgb(204, 0, 0); padding: 0px 20px; }

.nav-menu { display: flex; align-items: center; list-style: none; gap: 15px; padding: 12px; justify-content: space-between; }

.nav-menu li { }

.nav-menu li:first-child { font-weight: bold; }

.nav-menu a { display: block; font-weight: 700; color: white; text-decoration: none; font-size: 14px; transition: background-color 0.3s; }

.nav-menu a:hover { background-color: rgb(170, 0, 0); }

.sect { align-items: center; gap: 6px; padding: 6px; border: 1px solid rgb(255, 255, 255); display: none !important; }

.sect svg { color: rgb(255, 255, 255); }

.main-content { max-width: 840px; margin: 0px auto; padding: 20px; background-color: white; overflow: hidden; }

.breadcrumb { font-size: 12px; margin-bottom: 15px; color: rgb(102, 102, 102); }

.breadcrumb a { color: rgb(102, 102, 102); text-decoration: none; }

.main-title { font-size: 28px; font-weight: bold; margin-bottom: 20px; line-height: 1.3; color: rgb(51, 51, 51); }

.author-info { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid rgb(221, 221, 221); }

.author-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: rgb(221, 221, 221); }

.author-details { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }

.author-name { font-weight: 600; color: rgb(5, 80, 200); }

.author-title, .last-updated { font-size: 12px; color: rgb(102, 102, 102); }

.results-section { margin-bottom: 40px; background-color: white; border-radius: 0px; padding: 0px; box-shadow: none; }

.results-title { font-size: 32px; font-weight: bold; margin-bottom: 15px; color: rgb(231, 76, 60); line-height: 1.4; }

.results-title::after { content: ""; display: block; width: 60px; height: 4px; background-color: rgb(44, 62, 80); margin-top: 8px; }

.results-list {
  display: flex; flex-direction: column; gap: 20px; margin-top: 30px;
  @media (max-width: 768px) {
  gap: 0px !important;
}
}

.result-item {
  display: flex; align-items: center; gap: 3px; padding: 0px; border: none; transition: 0.3s;
  @media (max-width: 768px) {
  height: 88px; gap: 3px !important;
}
  @media (max-width: 576px) {
  height: 56px;
}
}

.result-item:hover { }

.rank { font-weight: bold; max-width: 15px; width: 15px; color: rgb(51, 51, 51); font-size: 18px; display: flex; align-items: center; }

.user-avatar { width: 50px; height: 50px; border-radius: 50%; background-color: rgb(221, 221, 221); border: none; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; flex-shrink: 0; }

.user-name {
  max-width: 70px; font-size: 16px; font-weight: 500; color: rgb(51, 51, 51); flex-shrink: 0; min-width: 70px !important;
  @media (max-width: 768px) {
  max-width: 70px; min-width: 70px !important;
}
}

.earnings-bar {
  height: 35px; background: rgb(231, 76, 60); margin: 0px 20px; border-radius: 0px; position: relative; transition: 0.5s; flex-shrink: 0; width: 100%;
  @media (max-width: 500px) {
  height: 14px !important;
}
}

.result-item:nth-child(1) .earnings-bar {
  max-width: 400px;
  @media (max-width: 500px) {
  max-width: 140px !important;
}
}

.result-item:nth-child(2) .earnings-bar {
  max-width: 380px;
  @media (max-width: 500px) {
  max-width: 135px !important;
}
}

.result-item:nth-child(3) .earnings-bar {
  max-width: 360px;
  @media (max-width: 500px) {
  max-width: 130px !important;
}
}

.result-item:nth-child(4) .earnings-bar {
  max-width: 340px;
  @media (max-width: 500px) {
  max-width: 125px !important;
}
}

.result-item:nth-child(5) .earnings-bar {
  max-width: 320px;
  @media (max-width: 500px) {
  max-width: 120px !important;
}
}

.result-item:nth-child(6) .earnings-bar {
  max-width: 300px;
  @media (max-width: 500px) {
  max-width: 115px !important;
}
}

.result-item:nth-child(7) .earnings-bar {
  max-width: 280px;
  @media (max-width: 500px) {
  max-width: 110px !important;
}
}

.result-item:nth-child(8) .earnings-bar {
  max-width: 260px;
  @media (max-width: 500px) {
  max-width: 105px !important;
}
}

.result-item:nth-child(9) .earnings-bar {
  max-width: 240px;
  @media (max-width: 500px) {
  max-width: 100px !important;
}
}

.result-item:nth-child(10) .earnings-bar {
  max-width: 220px;
  @media (max-width: 500px) {
  max-width: 95px !important;
}
}

.earnings-bar::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); animation: 5s ease 0s infinite normal none running shimmer; }

@keyframes shimmer { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.earnings { font-weight: bold; color: rgb(51, 51, 51); min-width: 100px; text-align: left; font-size: 16px; font-family: "Open Sans", sans-serif; position: relative; flex-shrink: 0; }

.earnings.updating { color: rgb(231, 76, 60); animation: 0.3s ease 0s 1 normal none running earningsUpdate; }

@keyframes earningsUpdate { 
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.earnings::before { content: ""; position: absolute; inset: -3px; background: linear-gradient(45deg, transparent, rgba(231, 76, 60, 0.1), transparent); border-radius: 4px; opacity: 0; transition: opacity 0.3s; }

.earnings.updating::before { opacity: 1; }

.article-content { margin-bottom: 30px; line-height: 1.8; }

.article-content p { margin-bottom: 15px; }

.article-content a { color: rgb(204, 0, 0); text-decoration: underline; }

.article-content strong { font-weight: 600; }

.phone-section { margin: 30px 0px; text-align: center; width: 100%; }

.phone-container { position: relative; display: inline-block; max-width: 300px; }

.phone-image { width: 100%; height: auto; border-radius: 15px; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 20px; }

.phone-overlay { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.3); border-radius: 15px; cursor: pointer; }

.play-button { width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 10px; }

.additional-content { margin-bottom: 30px; line-height: 1.8; }

.additional-content p { margin-bottom: 15px; }

.additional-content a { color: rgb(204, 0, 0); text-decoration: underline; }

.additional-content strong { font-weight: 600; }

.registration-steps { margin-bottom: 40px; padding: 20px; background-color: rgb(249, 249, 249); border-radius: 5px; }

.registration-steps h3 { margin-bottom: 15px; color: rgb(51, 51, 51); font-size: 18px; }

.registration-steps ol { padding-left: 20px; }

.registration-steps li { margin-bottom: 10px; line-height: 1.6; }

.registration-steps strong { font-weight: 600; }

.registration-form { padding: 40px 20px; text-align: center; }

.form-container { max-width: 400px; margin: 0px auto; }

.registration-form h2 { color: white; font-size: 24px; font-weight: bold; margin-bottom: 30px; letter-spacing: 2px; }

.registration-form form { display: flex; flex-direction: column; gap: 15px; }

.registration-form input[type="text"], .registration-form input[type="email"], .registration-form input[type="tel"] { padding: 15px; border: 1px solid #ccc; border-radius: 3px; font-size: 16px; background-color: white; color: rgb(51, 51, 51); }

.registration-form input::placeholder { color: rgb(153, 153, 153); }

.phone-input { display: flex; gap: 0px; }

.phone-input select { padding: 15px; border: none; border-radius: 3px 0px 0px 3px; background-color: white; color: rgb(51, 51, 51); font-size: 16px; min-width: 80px; }

.phone-input input[type="tel"] { border-radius: 0px 3px 3px 0px; flex: 1 1 0%; }

.registration-form button { padding: 15px; background-color: rgb(204, 0, 0); color: white; border: none; border-radius: 3px; font-size: 16px; font-weight: bold; letter-spacing: 1px; cursor: pointer; transition: background-color 0.3s; }

.registration-form button:hover { background-color: rgb(170, 0, 0); }

@media (max-width: 810px) {
  .header-top { padding: 8px 15px; }
  .logo { font-size: 16px; }
  .header-right { gap: 15px; font-size: 12px; }
  .nav-menu { flex-wrap: wrap; justify-content: flex-start; gap: 0px; }
  .nav-menu a { padding: 10px 12px; font-size: 12px; }
  .main-content { padding: 15px; margin: 0px 10px; }
  .main-title { font-size: 24px; }
  .results-title { font-size: 18px; }
  .results-list { gap: 15px; }
  .result-item { gap: 12px; }
  .rank { width: 25px; font-size: 16px; }
  .user-avatar { width: 45px; height: 45px; }
  .user-name { min-width: 130px; font-size: 15px; }
  .earnings-bar { height: 30px; margin: 0px 15px; }
  .result-item:nth-child(1) .earnings-bar { width: 300px; }
  .result-item:nth-child(2) .earnings-bar { width: 285px; }
  .result-item:nth-child(3) .earnings-bar { width: 270px; }
  .result-item:nth-child(4) .earnings-bar { width: 255px; }
  .result-item:nth-child(5) .earnings-bar { width: 240px; }
  .result-item:nth-child(6) .earnings-bar { width: 225px; }
  .result-item:nth-child(7) .earnings-bar { width: 210px; }
  .result-item:nth-child(8) .earnings-bar { width: 195px; }
  .result-item:nth-child(9) .earnings-bar { width: 180px; }
  .result-item:nth-child(10) .earnings-bar { width: 165px; }
  .earnings { min-width: 90px; font-size: 15px; }
  .phone-container { max-width: 250px; }
  .registration-form { padding: 30px 15px; }
  .form-container { max-width: 100%; }
  .registration-form h2 { font-size: 20px; }
  .phone-input { flex-direction: column; }
  .phone-input select { border-radius: 3px; }
  .phone-input input[type="tel"] { border-radius: 3px; }
}

@media (max-width: 500px) {
  .header-top { flex-direction: column; gap: 10px; text-align: center; }
  .nav-menu { justify-content: space-between; }
  .nav-menu li { display: none; }
  .search-icon p { display: none; }
  .signin p { display: none; }
  .sect { display: flex !important; }
  .main-title { font-size: 20px; }
  .results-title { font-size: 16px; }
  .results-list { gap: 12px; }
  .result-item { gap: 8px; }
  .rank { width: 20px; font-size: 14px; }
  .user-avatar { width: 40px; height: 40px; }
  .user-name { min-width: 110px; font-size: 14px; }
  .earnings { order: 3; min-width: 80px; font-size: 14px; }
}

.comments-section { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgb(221, 221, 221); }

.comments-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgb(238, 238, 238); }

.comments-count { font-size: 14px; font-weight: 600; color: rgb(51, 51, 51); }

.sort-options label { font-size: 12px; color: rgb(102, 102, 102); }

.add-comment { display: flex; gap: 10px; margin-bottom: 30px; padding: 15px 0px; border-bottom: 1px solid rgb(238, 238, 238); }

.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: rgb(224, 224, 224); flex-shrink: 0; overflow: hidden; }

.comment-avatar img { width: 100%; }

.comment-input-container { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; }

.comment-input-container textarea { width: 100%; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 4px; font-family: "Open Sans", sans-serif; font-size: 14px; resize: vertical; min-height: 60px; }

.log-in-button { align-self: flex-end; padding: 8px 16px; background-color: rgb(0, 122, 204); color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; }

.comments-list { display: flex; flex-direction: column; gap: 15px; }

.comment { display: flex; gap: 10px; padding: 10px 0px; }

.cbc-comment { margin-left: 30px; padding-left: 10px; border-left: 1px solid rgba(0, 0, 0, 0.11); }

.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, rgb(221, 221, 221), rgb(187, 187, 187)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: rgb(102, 102, 102); }

.cbc-avatar { background: linear-gradient(45deg, rgb(204, 0, 0), rgb(170, 0, 0)); color: white; }

.comment-content { flex: 1 1 0%; }

.comment-author { font-weight: 600; font-size: 14px; margin-bottom: 5px; color: rgb(5, 80, 200); }

.cbc-comment .comment-author { }

.verified-badge { margin-left: 5px; font-size: 12px; }

.comment-text { font-size: 14px; line-height: 1.4; margin-bottom: 8px; color: rgb(51, 51, 51); }

.comment-meta { display: flex; gap: 15px; font-size: 12px; color: rgb(102, 102, 102); }

.comment-time { cursor: pointer; }

.comment-likes { color: rgb(0, 122, 204); cursor: pointer; }

.about-author { margin-top: 40px; padding: 30px 0px; border-top: 2px solid rgb(51, 51, 51); }

.about-author h3 { font-size: 14px; font-weight: bold; letter-spacing: 1px; margin-bottom: 20px; color: rgb(51, 51, 51); }

.author-profile { display: flex; gap: 15px; margin-bottom: 20px; }

.author-large-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(45deg, rgb(221, 221, 221), rgb(187, 187, 187)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; color: rgb(102, 102, 102); }

.author-info-detailed h4 { font-size: 18px; font-weight: 600; margin-bottom: 5px; color: rgb(51, 51, 51); }

.author-title-detailed { font-size: 14px; color: rgb(102, 102, 102); margin-bottom: 10px; }

.author-bio { font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); }

.author-links { display: flex; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; }

.author-links a { color: rgb(0, 122, 204); text-decoration: underline; font-size: 13px; }

.author-contact { display: flex; gap: 20px; flex-wrap: wrap; }

.author-contact a { color: rgb(0, 122, 204); text-decoration: underline; font-size: 13px; }

.related-stories { margin-top: 30px; padding: 20px 0px; border-top: 1px solid rgb(221, 221, 221); }

.related-stories h3 { font-size: 14px; font-weight: bold; letter-spacing: 1px; margin-bottom: 15px; color: rgb(51, 51, 51); }

.related-stories ul { list-style: none; padding: 0px; }

.related-stories li { margin-bottom: 10px; }

.related-stories a { color: rgb(204, 0, 0); text-decoration: underline; font-size: 14px; line-height: 1.4; }

.related-stories a:hover { text-decoration: none; }

.footer { border-top: 1px solid rgba(0, 0, 0, 0.137); padding: 40px 0px 0px; font-size: 12px; }

.footer-content { max-width: 1200px; margin: 0px auto; padding: 0px 20px; }

.footer-sections { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 30px; }

.footer-section { max-width: 213px; width: 100%; }

.footer-section h4 { font-size: 14px; font-weight: bold; margin-bottom: 15px; color: rgb(0, 0, 0); }

.footer-section ul { list-style: none; padding: 0px; }

.footer-section li { margin-bottom: 8px; }

.footer-section a { color: rgb(5, 80, 200); text-decoration: none; line-height: 1.4; transition: color 0.3s; }

.footer-section a:hover { color: rgb(4, 68, 171); text-decoration: underline; }

.footer-bottom { background-color: rgb(0, 0, 0); padding-top: 20px; padding-bottom: 20px; border-top: 1px solid rgb(51, 51, 51); flex-wrap: wrap; gap: 15px; }

.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; }

.footer-logo { display: block; max-width: 220px; width: 100%; }

.footer-logo img { width: 100%; }

.cbc-logo { font-size: 16px; font-weight: bold; color: white; }

.radio-canada { font-size: 14px; color: rgb(255, 255, 255); }

.footer-copyright { text-align: right; }

.footer-copyright p { margin: 0px; line-height: 1.4; color: rgb(204, 204, 204); }

@media (max-width: 810px) {
  .comments-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .comment { gap: 8px; }
  .comment-avatar, .comment-avatar-placeholder { width: 35px; height: 35px; }
  .author-profile { flex-direction: column; text-align: center; }
  .author-large-avatar { align-self: center; }
  .author-links, .author-contact { flex-direction: column; gap: 10px; }
  .footer-sections { flex-wrap: wrap; }
  .footer-section:last-of-type { max-width: 100%; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-copyright { text-align: center; }
}

@media (max-width: 500px) {
  .add-comment { flex-direction: column; }
  .comment-input-container { width: 100%; }
  .log-in-button { align-self: flex-start; }
  .footer-sections { grid-template-columns: 1fr; }
  .footer-section { max-width: 42%; flex: 0 1 42%; }
  .footer-bottom .container { flex-direction: column; gap: 10px; }
}

.phone-image { background: linear-gradient(45deg, rgb(51, 51, 51), rgb(102, 102, 102)); min-height: 400px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }