/* Custom reaction button overrides - ensures visibility across light/dark themes */

/* Make outline (unselected) reaction buttons show a black border and icon on hover/focus
   so the thumb icon is visible even when the default border is light/white. */
.movie-reaction-btn.btn-outline-light:hover,
.movie-reaction-btn.btn-outline-light:focus {
	border-color: #000 !important;
	color: #000 !important;
	background-color: #f8f9fa !important;
}
.movie-reaction-btn.btn-outline-light:hover i,
.movie-reaction-btn.btn-outline-light:focus i {
	color: #000 !important;
}

/* ===== Global Play Button - unified style (matches detail page) ===== */
.btn-play {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.btn-play .play-btn-icon {
  width: 48px !important;
  height: 48px !important;
  font-size: 16px !important;
  background: var(--text_blue_color, #00d4ff) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(0, 212, 255, 0.3) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  line-height: 1 !important;
  margin-right: 0 !important;
}

.btn-play:hover .play-btn-icon {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 22px rgba(0, 212, 255, 0.5) !important;
  background: var(--text_blue_color, #00d4ff) !important;
}

.btn-play .play-btn-icon i {
  line-height: 1 !important;
  margin-left: 2px;
  font-size: 16px !important;
}

.btn-play .play-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

/* Smaller play buttons in protip popups only */
.protip-content .des-btn-block .btn-play .play-btn-icon {
  width: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

.protip-content .des-btn-block .btn-play .play-btn-icon i {
  font-size: 12px !important;
}

.protip-content .des-btn-block .btn-play .play-text {
  font-size: 13px !important;
}

/* Episode play button - same as hero section (48px) */
.btn-play.btn-sm-play .play-btn-icon,
.movie-series-block .btn-play .play-btn-icon {
  width: 48px !important;
  height: 48px !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.btn-play.btn-sm-play .play-btn-icon i,
.movie-series-block .btn-play .play-btn-icon i {
  font-size: 16px !important;
}

/* Override old line-height based centering in slider/card contexts */
.des-btn-block .play-btn-icon i,
.movie-series-block .play-btn-icon i {
  line-height: 1 !important;
}

.des-in-list.des-btn-block a.btn-play {
  margin-right: 0 !important;
}

/* Promotion slider play button */
.promotion-slider .des-btn-block.des-in-list .btn-play .play-btn-icon {
  width: 44px !important;
  height: 44px !important;
}

.promotion-slider .des-btn-block.des-in-list .btn-play .play-text {
  font-size: 15px !important;
}

/* Support active outline-danger for dislike so icon/border use danger color (not white). */
.movie-dislike-btn.active.btn-outline-danger {
	background-color: transparent !important;
	border-color: #dc3545 !important;
	color: #dc3545 !important;
}
.movie-dislike-btn.active.btn-outline-danger i {
	color: #dc3545 !important;
}

/* Support active outline-primary for like if needed (keeps icon colored primary when using outline variant) */
.movie-like-btn.active.btn-outline-primary {
	background-color: transparent !important;
	border-color: #007bff !important;
	color: #007bff !important;
}
.movie-like-btn.active.btn-outline-primary i {
	color: #007bff !important;
}

/* ============================================================
   Cookie Consent
   ============================================================ */
.cookie-consent-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.cookie-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99998;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.cookie-banner {
  position: relative;
  z-index: 99999;
  background: var(--navigation_bg_color, #1a1a2e);
  border-top: 3px solid var(--btn-prime_bg_color, #e94560);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
  animation: cookieSlideUp 0.4s ease-out;
}
@keyframes cookieSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-icon {
  flex-shrink: 0;
  color: var(--btn-prime_bg_color, #e94560);
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cookie-content {
  flex: 1;
  min-width: 280px;
}
.cookie-title {
  color: var(--text_white_color, #fff);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px 0;
}
.cookie-message {
  color: var(--text_grey_color, #b8c5d6);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cookie-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cookie-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.cookie-btn-accept {
  background: var(--btn-prime_bg_color, #e94560);
  color: var(--text_white_color, #fff);
}
.cookie-btn-accept:hover {
  opacity: 0.9;
}
.cookie-btn-essentials {
  background: rgba(255,255,255,0.1);
  color: var(--text_white_color, #fff);
  border: 1px solid rgba(255,255,255,0.2);
}
.cookie-btn-essentials:hover {
  background: rgba(255,255,255,0.2);
}
.cookie-btn-preferences {
  background: transparent;
  color: var(--text_grey_color, #b8c5d6);
  border: 1px solid rgba(255,255,255,0.15);
}
.cookie-btn-preferences:hover {
  color: var(--text_white_color, #fff);
  border-color: rgba(255,255,255,0.3);
}
.cookie-btn-accept-all {
  background: rgba(255,255,255,0.1);
  color: var(--text_white_color, #fff);
  border: 1px solid rgba(255,255,255,0.2);
}
.cookie-btn-accept-all:hover {
  background: rgba(255,255,255,0.2);
}

/* Preferences Panel */
.cookie-preferences-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100000;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  background: var(--navigation_bg_color, #1a1a2e);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  animation: cookieFadeIn 0.3s ease-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@keyframes cookieFadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.cookie-pref-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cookie-pref-header h4 {
  color: var(--text_white_color, #fff);
  font-size: 18px;
  margin: 0;
}
.cookie-pref-close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--text_white_color, #fff);
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cookie-pref-close:hover {
  background: rgba(255,255,255,0.2);
}
.cookie-pref-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.cookie-pref-intro {
  color: var(--text_grey_color, #8d99ae);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px 0;
}
.cookie-pref-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
.cookie-pref-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cookie-pref-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie-pref-name {
  color: var(--text_white_color, #fff);
  font-size: 15px;
  font-weight: 600;
}
.cookie-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.cookie-badge-required {
  background: rgba(255,255,255,0.08);
  color: var(--btn-prime_bg_color, #e94560);
  border: 1px solid rgba(255,255,255,0.12);
}
.cookie-pref-desc {
  color: var(--text_grey_color, #8d99ae);
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0 0 0;
}

/* Toggle Switch */
.cookie-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  flex-shrink: 0;
}
.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cookie-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 24px;
  transition: 0.3s;
}
.cookie-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--text_white_color, #fff);
  border-radius: 50%;
  transition: 0.3s;
}
.cookie-switch input:checked + .cookie-slider {
  background: var(--btn-prime_bg_color, #e94560);
}
.cookie-switch input:checked + .cookie-slider:before {
  transform: translateX(22px);
}
.cookie-switch input:disabled + .cookie-slider {
  opacity: 0.7;
  cursor: not-allowed;
}
.cookie-pref-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.cookie-pref-links {
  padding: 0 24px 16px;
  display: flex;
  gap: 16px;
  justify-content: center;
}
.cookie-pref-links a {
  color: var(--text_grey_color, #8d99ae);
  font-size: 12px;
  text-decoration: underline;
}
.cookie-pref-links a:hover {
  color: var(--text_white_color, #fff);
}

/* Cookie consent responsive */
@media (max-width: 768px) {
  .cookie-banner-inner {
    padding: 18px 16px;
    flex-direction: column;
    text-align: center;
  }
  .cookie-actions {
    width: 100%;
    justify-content: center;
  }
  .cookie-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
  .cookie-preferences-panel {
    width: 95%;
  }
  .cookie-pref-footer {
    flex-direction: column;
  }
  .cookie-pref-footer .cookie-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   GDPR Data Privacy Section (User Dashboard)
   ============================================================ */
.gdpr-section {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 25px;
}
.gdpr-section-heading {
  color: var(--text_white_color, #fff);
  font-size: 20px;
  margin-bottom: 5px;
}
.gdpr-section-heading i {
  color: var(--btn-prime_bg_color, #17a2b8);
}
.gdpr-section-desc {
  color: var(--text_grey_color, #999);
  margin-bottom: 20px;
  font-size: 14px;
}
.gdpr-card {
  border-radius: 8px;
  padding: 20px;
  height: 100%;
}
.gdpr-card--export {
  background: rgba(23,162,184,0.08);
  border: 1px solid rgba(23,162,184,0.2);
}
.gdpr-card--consent {
  background: rgba(40,167,69,0.08);
  border: 1px solid rgba(40,167,69,0.2);
}
.gdpr-card--delete {
  background: rgba(220,53,69,0.08);
  border: 1px solid rgba(220,53,69,0.2);
}
.gdpr-card__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.gdpr-card__title--export { color: #17a2b8; }
.gdpr-card__title--consent { color: #28a745; }
.gdpr-card__title--delete { color: #dc3545; }
.gdpr-card__desc {
  color: var(--text_grey_color, #999);
  font-size: 13px;
  margin-bottom: 15px;
}
.gdpr-card__consent-date {
  display: block;
  color: var(--text_grey_color, #999);
  font-size: 12px;
  margin-bottom: 8px;
}
.gdpr-pending-box {
  background: rgba(255,193,7,0.15);
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 10px;
}
.gdpr-pending-box__title {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #856404;
}
.gdpr-pending-box__desc {
  color: var(--text_grey_color, #999);
  font-size: 13px;
  margin-bottom: 10px;
}
.gdpr-links {
  text-align: center;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 15px;
}
.gdpr-links a {
  color: var(--text_grey_color, #999);
  font-size: 13px;
  margin: 0 10px;
}
.gdpr-links a:hover {
  color: var(--text_white_color, #fff);
}

/* Delete confirmation modal (dark theme) */
.gdpr-delete-modal .modal-content {
  background: var(--background_black_bg_color, #111);
  border: 1px solid rgba(220,53,69,0.3);
}
.gdpr-delete-modal .modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.gdpr-delete-modal .modal-header .modal-title {
  color: #dc3545;
}
.gdpr-delete-modal .modal-header .close {
  color: var(--text_white_color, #fff);
}
.gdpr-delete-modal .modal-body {
  color: #ccc;
}
.gdpr-delete-modal .modal-body ul {
  color: var(--text_grey_color, #999);
  font-size: 13px;
  padding-left: 20px;
}
.gdpr-delete-modal .modal-footer {
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ============================================================
   Contact Us Page
   ============================================================ */
.contact-main-block {
  background-color: var(--body_bg_color, #111);
  padding: 40px 0;
}
.contact-main-block .contact-form-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 40px;
  margin: 0 15px;
}
.contact-us-img {
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
}
.contact-us-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.contact-us-heading {
  color: var(--text_white_color, #fff);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}
.contact-us-heading .us_text {
  color: var(--btn-prime_bg_color, #e94560);
}
.contact-block label {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}
.contact-block .custom-field-contact {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--text_white_color, #fff);
  padding: 12px 14px;
  transition: border-color 0.2s;
}
.contact-block .custom-field-contact:focus {
  border-color: var(--btn-prime_bg_color, #e94560);
  outline: none;
  box-shadow: 0 0 0 2px rgba(233,69,96,0.15);
}
.contact-block select.custom-field-contact {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  width: 100%;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}
.contact-block .custom-field-contact option {
  background: var(--body_bg_color, #1a1a2e);
  color: var(--text_white_color, #fff);
  padding: 10px 14px;
}
.contact-block textarea.custom-field-contact {
  resize: vertical;
  min-height: 120px;
}
.contact-block .btn-subscribe {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 32px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  margin-top: 10px;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
}
.contact-block .btn-subscribe:hover {
  background: var(--text_blue_color, #039be5) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.35);
}
.contact-block .help-block strong {
  color: #e94560;
  font-size: 12px;
}

/* ============================================================
   FAQ Page
   ============================================================ */
.faq-main-block {
  padding-bottom: 40px;
}
.faq-main-block .myaccordion .card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px !important;
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-main-block .myaccordion .card-header {
  background: rgba(255,255,255,0.04);
  border-bottom: none;
  padding: 0;
}
.faq-main-block .myaccordion .accordion-button {
  color: var(--text_white_color, #fff);
  font-size: 15px;
  font-weight: 500;
  padding: 16px 20px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s;
}
.faq-main-block .myaccordion .accordion-button:hover {
  background: rgba(255,255,255,0.04);
  text-decoration: none;
}
/* +/- icon toggle: show plus when collapsed, minus when expanded */
.faq-main-block .myaccordion .accordion-button i.fa-plus,
.faq-main-block .myaccordion .accordion-button i.fa-minus {
  font-size: 12px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(79, 195, 247, 0.15);
  color: var(--text_blue_color, #4fc3f7);
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}

/* Collapsed state: show plus, hide minus */
.faq-main-block .myaccordion .accordion-button.collapsed i.fa-minus {
  display: none !important;
}
.faq-main-block .myaccordion .accordion-button.collapsed i.fa-plus {
  display: inline-flex !important;
}

/* Expanded state: show minus, hide plus */
.faq-main-block .myaccordion .accordion-button:not(.collapsed) i.fa-plus {
  display: none !important;
}
.faq-main-block .myaccordion .accordion-button:not(.collapsed) i.fa-minus {
  display: inline-flex !important;
}

/* Active/expanded card highlight */
.faq-main-block .myaccordion .accordion-button:not(.collapsed) {
  background: rgba(79, 195, 247, 0.08);
}

.faq-main-block .myaccordion .accordion-button:not(.collapsed) i.fa-minus {
  background: var(--text_blue_color, #4fc3f7);
  color: #fff;
}
.faq-main-block .myaccordion .card-body {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 14px;
  line-height: 1.7;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ============================================================
   Blog Page
   ============================================================ */
.blog-page {
  padding: 30px 0 50px;
}
.blog-page .section-heading {
  color: var(--text_white_color, #fff);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255,255,255,0.06);
}
.blog-page .cus_img {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.blog-page .cus_img:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.blog-page .blog-detail-plan {
  padding: 10px 16px 0;
}
.blog-page .blog-detail-plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-page .blog-detail-plan ul li {
  color: var(--text_grey_color, #999);
  font-size: 12px;
}
.blog-page .blog-detail-plan ul li i {
  color: var(--btn-prime_bg_color, #e94560);
  margin-right: 4px;
}
.blog-page .blog-text {
  padding: 8px 16px 20px;
}
.blog-page .blog-text h4 {
  color: var(--text_white_color, #fff);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
}
.blog-page .blog-text h4 a {
  color: var(--text_white_color, #fff);
  text-decoration: none;
  transition: color 0.2s;
}
.blog-page .blog-text h4 a:hover {
  color: var(--btn-prime_bg_color, #e94560);
}
.blog-page .blog-text p {
  color: var(--text_grey_color, #999);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.blog-page .genre-slide-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
.blog-empty-state {
  padding: 50px 0;
  color: var(--text_grey_color, #999);
}
.blog-empty-state i {
  font-size: 48px;
  color: var(--text_grey_color, #999);
}

/* Blog Toolbar - view toggle */
.blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255,255,255,0.06);
}
.blog-view-toggle {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 3px;
}
.blog-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.blog-view-btn.active {
  background: var(--btn-prime_bg_color, #e94560);
  color: #fff;
}
.blog-view-btn:hover:not(.active) {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.06);
}

/* Blog Card (new) */
.blog-grid .blog-item {
  display: flex;
}
.blog-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.blog-card__image {
  flex-shrink: 0;
}
.blog-card__image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.blog-card__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card__date {
  color: var(--text_grey_color, #999);
  font-size: 12px;
  margin-bottom: 10px;
}
.blog-card__date i {
  color: var(--btn-prime_bg_color, #e94560);
  margin-right: 4px;
}
.blog-card__title {
  color: var(--text_white_color, #fff);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.3;
}
.blog-card__title a {
  color: var(--text_white_color, #fff);
  text-decoration: none;
  transition: color 0.2s;
}
.blog-card__title a:hover {
  color: var(--btn-prime_bg_color, #e94560);
}
.blog-card__excerpt {
  color: var(--text_grey_color, #999);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__readmore {
  color: var(--btn-prime_bg_color, #e94560);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.blog-card__readmore:hover {
  color: #fff;
  text-decoration: none;
}
.blog-card__readmore i {
  font-size: 11px;
  transition: transform 0.2s;
}
.blog-card__readmore:hover i {
  transform: translateX(3px);
}
/* Override old blog-card fixed height from style.css */
.blog-page .blog-card {
  height: auto;
  max-width: none;
  text-align: left;
  background-size: cover;
}

/* List View - 2 per row */
.blog-list .blog-item {
  width: 50%;
  max-width: 50%;
  flex: 0 0 50%;
}
.blog-list .blog-card {
  display: flex;
  flex-direction: row;
  margin-bottom: 16px;
}
.blog-list .blog-card__image {
  flex-shrink: 0;
  width: 260px;
}
.blog-list .blog-card__image img {
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  border-radius: 10px 0 0 10px;
}
.blog-list .blog-card__body {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-list .blog-card__title {
  font-size: 18px;
}
.blog-list .blog-card__excerpt {
  font-size: 14px;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-list .blog-card:hover {
  transform: translateY(-2px);
}

/* List view responsive */
@media (max-width: 991px) {
  .blog-list .blog-item {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
}
@media (max-width: 767px) {
  .blog-list .blog-card {
    flex-direction: column;
  }
  .blog-list .blog-card__image {
    width: 100%;
  }
  .blog-list .blog-card__image img {
    height: 200px;
    min-height: auto;
    border-radius: 10px 10px 0 0;
  }
}

/* ============================================================
   Blog Detail Page
   ============================================================ */
.blog-detail-main-block {
  background: var(--body_bg_color, #111);
  padding: 30px 0 50px;
}
.blog-detail-main-block .blog-detail-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  padding: 0 0 24px;
}
.blog-detail-main-block .blog-detail-img img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
}
.blog-detail-main-block .blog-detail-plan {
  padding: 16px 24px 0;
}
.blog-detail-main-block .blog-detail-plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}
.blog-detail-main-block .blog-detail-plan ul li {
  color: var(--text_grey_color, #999);
  font-size: 13px;
}
.blog-detail-main-block .blog-detail-plan ul li i {
  color: var(--btn-prime_bg_color, #e94560);
  margin-right: 5px;
}
.blog-detail-main-block .blog-detail-heading {
  color: var(--text_white_color, #fff);
  font-size: 24px;
  font-weight: 700;
  padding: 12px 24px;
  margin: 0;
}
.blog-detail-main-block .blog-detail-block > p {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 15px;
  line-height: 1.7;
  padding: 0 24px;
}
.blog-detail-main-block .like-btn,
.blog-detail-main-block .unlike-btn {
  color: var(--text_grey_color, #999);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 24px;
}
.blog-detail-main-block .like-btn:hover {
  color: var(--btn-prime_bg_color, #e94560);
  background: rgba(255,255,255,0.05);
}
.blog-detail-main-block .unlike-btn:hover {
  color: #dc3545;
  background: rgba(255,255,255,0.05);
}
.blog-detail-main-block .like-btn.active {
  color: var(--btn-prime_bg_color, #e94560);
}
.blog-detail-main-block .unlike-btn.active {
  color: #dc3545;
}

/* Blog Sidebar Widget */
.blog-detail-widget-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 20px;
}
.bolg-detail-recent-post .recent-heading {
  color: var(--text_white_color, #fff);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255,255,255,0.06);
}
.blog-detail-recnet-widget {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.blog-detail-recnet-widget:last-child {
  border-bottom: none;
}
.blog-detail-recnet-widget img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
}
.recent-post-heading a {
  color: var(--text_white_color, #fff);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s;
}
.recent-post-heading a:hover {
  color: var(--btn-prime_bg_color, #e94560);
  text-decoration: none;
}
.recent-post-date {
  color: var(--text_grey_color, #999);
  font-size: 12px;
  margin-top: 4px;
}

/* Blog Comments Section */
.comment-nav-tabs {
  margin-top: 30px;
  padding-top: 10px;
}
.comment-nav-tabs .nav-tabs {
  border-bottom: 2px solid rgba(255,255,255,0.08);
  margin-bottom: 24px;
}
.comment-nav-tabs .nav-tabs li a {
  color: var(--text_grey_color, #999);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.comment-nav-tabs .nav-tabs li a:hover,
.comment-nav-tabs .nav-tabs li.active a {
  color: var(--btn-prime_bg_color, #e94560);
  border-bottom-color: var(--btn-prime_bg_color, #e94560);
  background: transparent;
}
.comment {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
.comment .author-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.comment .author-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.comment .author-name h4,
.comment .author-name h5 {
  color: var(--text_white_color, #fff);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.comment .author-time {
  color: var(--text_grey_color, #999);
  font-size: 12px;
  margin: 2px 0 0;
}
.comment .comment-content {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 14px;
  line-height: 1.6;
}
.comment .btn-floating {
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 6px;
}
#postcomment {
  color: var(--text_grey_color, #b1b1b1);
  padding: 10px 0;
}
#postcomment > div {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 24px;
}
#postcomment h3 {
  color: var(--text_white_color, #fff);
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#postcomment .form-control {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text_white_color, #fff);
  border-radius: 6px;
  padding: 12px 14px;
  min-height: 120px;
  resize: vertical;
}
#postcomment .form-control:focus {
  border-color: var(--btn-prime_bg_color, #e94560);
  box-shadow: 0 0 0 2px rgba(233,69,96,0.15);
  outline: none;
}
#postcomment label {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
#postcomment .btn {
  margin-top: 12px;
  padding: 10px 28px;
  border-radius: 6px;
  font-weight: 600;
}
#showcomment > .title {
  color: var(--text_grey_color, #b1b1b1);
  margin-bottom: 16px;
}
#showcomment {
  padding: 10px 0;
}

/* ============================================================
   User Account/Dashboard Page Polish
   ============================================================ */
.user-account-section .user-img {
  text-align: center;
  padding: 24px 16px 20px;
}
.user-avatar-wrap {
  position: relative;
  display: inline-block;
}
.user-avatar-wrap img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.15);
  display: block;
}
.user-avatar-wrap form {
  margin: 0;
  padding: 0;
}
.user-avatar-wrap input[type="file"] {
  display: none;
}
.user-avatar-edit {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 32px;
  height: 32px;
  background: var(--btn-prime_bg_color, #e94560);
  border: 2px solid var(--body_bg_color, #1a1a2e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text_white_color, #fff);
  font-size: 13px;
  transition: all 0.2s;
  z-index: 2;
  margin: 0;
}
.user-avatar-edit:hover {
  transform: scale(1.15);
  background: var(--text_white_color, #fff);
  color: var(--btn-prime_bg_color, #e94560);
}
.user-account-section .col-lg-3 {
  padding-right: 10px;
}
.user-account-section .col-lg-3 > .user-img {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0;
}
.user-account-section .col-lg-3 > .user-account-tab {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: none;
  border-radius: 0 0 10px 10px;
}
.user-account-section .col-lg-3 > .user-img {
  border-radius: 10px 10px 0 0;
}
.user-account-section .user-img-name {
  color: var(--text_white_color, #fff);
  font-size: 18px;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 4px;
}
.user-account-section .user-mail {
  color: var(--text_grey_color, #999);
  font-size: 13px;
  margin-bottom: 16px;
}
.user-account-section .membership-dtl {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}
.user-account-section .membership-sub {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 13px;
  margin-bottom: 4px;
}
.user-account-section .membership-sub-date {
  color: var(--text_grey_color, #999);
  font-size: 12px;
}
.user-account-tab {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 16px 12px;
}
.user-account-tab .nav-pills {
  border: none;
  flex-direction: column;
}
.user-account-tab .nav-pills .nav-item {
  margin-bottom: 0;
}
.user-account-tab .nav-pills .nav-link {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 13px;
  padding: 11px 16px;
  border-radius: 0;
  transition: all 0.2s;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
}
.user-account-tab .nav-pills .nav-link:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text_white_color, #fff);
  border-left-color: rgba(255,255,255,0.2);
}
.user-account-tab .nav-pills .nav-item.active .nav-link,
.user-account-tab .nav-pills .nav-link.active {
  background: rgba(255,255,255,0.08);
  color: var(--text_white_color, #fff);
  border-left-color: var(--text_white_color, #fff);
  font-weight: 600;
}
.user-account-tab .nav-pills .nav-item.active .nav-link:hover,
.user-account-tab .nav-pills .nav-link.active:hover {
  background: rgba(255,255,255,0.10);
  color: var(--text_white_color, #fff);
  border-left-color: var(--text_white_color, #fff);
}
.user-account-tab .nav-pills .nav-link i {
  margin-right: 10px;
  width: 16px;
  text-align: center;
  font-size: 14px;
}
.edit-profile-block .form-control {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text_white_color, #fff);
  border-radius: 6px;
  padding: 10px 14px;
}
.edit-profile-block .form-control:focus {
  border-color: var(--btn-prime_bg_color, #e94560);
  box-shadow: 0 0 0 2px rgba(233,69,96,0.15);
}
.edit-profile-block .btn-group {
  display: flex;
  margin-top: 10px;
}
.edit-profile-block .btn-success,
.edit-profile-block .btn-prime {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 600;
  padding: 12px 28px;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
}
.edit-profile-block .btn-success:hover,
.edit-profile-block .btn-prime:hover {
  background: var(--text_blue_color, #039be5) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.35);
}
.edit-profile-block .panel-setting-heading {
  color: var(--text_white_color, #fff);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}
.edit-profile-block .info {
  color: var(--text_grey_color, #999);
  font-size: 13px;
  margin-bottom: 16px;
}
.edit-profile-block label {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}
.edit-profile-block select.form-control {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text_white_color, #fff);
  border-radius: 6px;
  padding: 10px 14px;
  appearance: auto;
}
.edit-profile-block select.form-control option {
  background: var(--body_bg_color, #1a1a2e);
  color: var(--text_white_color, #fff);
}
.edit-profile-block textarea.form-control {
  resize: vertical;
  min-height: 60px;
}
.edit-profile-block .text-danger {
  font-size: 12px;
}
.edit-profile-block .fa-info-circle {
  color: var(--text_grey_color, #999);
  font-size: 12px;
  cursor: help;
}
.edit-profile-main-block .edit-profile-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
  transition: border-color 0.2s;
}
.edit-profile-main-block .edit-profile-block:hover {
  border-color: rgba(255,255,255,0.15);
}

/* Affiliate Dashboard */
/* Affiliate Dashboard */
.affiliate-dashboard-block {
  color: var(--text_white_color, #fff);
}
.aff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.aff-title {
  color: var(--text_white_color, #fff);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.aff-title i {
  margin-right: 8px;
  color: var(--btn-prime_bg_color, #e94560);
}
.aff-how-link {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
}
.aff-how-link:hover {
  color: var(--text_white_color, #fff);
  text-decoration: none;
}
.aff-referral-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  margin-bottom: 24px;
}
.aff-referral-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(233,69,96,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
  color: var(--btn-prime_bg_color, #e94560);
}
.aff-referral-heading {
  color: var(--text_white_color, #fff);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.aff-referral-desc {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 14px;
  margin-bottom: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.aff-link-box {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto 24px;
}
.aff-link-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text_white_color, #fff);
  padding: 12px 16px;
  font-size: 13px;
  outline: none;
  min-width: 0;
}
.aff-copy-btn {
  background: var(--btn-prime_bg_color, #e94560);
  border: none;
  color: #fff;
  padding: 12px 18px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
}
.aff-copy-btn:hover {
  background: #d63350;
}
.aff-share-label {
  color: var(--text_grey_color, #999);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.aff-share-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.aff-share-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.aff-share-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  color: #fff;
  text-decoration: none;
}
.aff-share--facebook { background: #1877f2; }
.aff-share--x { background: #000; }
.aff-share--linkedin { background: #0a66c2; }
.aff-share--telegram { background: #2aabee; }
.aff-share--whatsapp { background: #25d366; }
.aff-share--instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.aff-share--copy { background: rgba(255,255,255,0.12); }
.aff-share--copy:hover { background: rgba(255,255,255,0.2); }

/* Affiliate History */
.aff-history-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 24px;
}
.aff-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.aff-history-title {
  color: var(--text_white_color, #fff);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.aff-history-title i {
  margin-right: 6px;
  opacity: 0.6;
}
.aff-total-earning {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 14px;
}
.aff-total-earning span {
  color: #28a745;
  font-weight: 700;
  font-size: 16px;
}
.aff-history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.aff-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.aff-history-item:last-child {
  border-bottom: none;
}
.aff-history-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.aff-history-log {
  color: var(--text_white_color, #fff);
  font-size: 14px;
}
.aff-history-status {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
}
.aff-status--pending {
  background: rgba(255,193,7,0.15);
  color: #ffc107;
}
.aff-status--credited {
  background: rgba(40,167,69,0.15);
  color: #28a745;
}
.aff-history-amount {
  color: #28a745;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

/* Affiliate How-it-works Modal */
.aff-modal .modal-dialog {
  max-width: 560px;
}
.aff-modal__content {
  background: var(--navigation_bg_color, #1a1a2e) !important;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.aff-modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.03);
}
.aff-modal__header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(233,69,96,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--btn-prime_bg_color, #e94560);
  flex-shrink: 0;
}
.aff-modal__title {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}
.aff-modal__close {
  color: rgba(255,255,255,0.5) !important;
  font-size: 24px;
  opacity: 1 !important;
  text-shadow: none;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  line-height: 1;
  transition: color 0.2s;
}
.aff-modal__close:hover {
  color: #fff !important;
}
.aff-modal__body {
  padding: 24px;
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  line-height: 1.8;
  max-height: 60vh;
  overflow-y: auto;
}
.aff-modal__body p {
  margin-bottom: 14px;
  color: rgba(255,255,255,0.75);
}
.aff-modal__body strong,
.aff-modal__body b {
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   Wallet Page
   ============================================================ */
.wallet-block .wlt-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.wallet-block .wlt-back {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
}
.wallet-block .wlt-back:hover {
  color: var(--text_white_color, #fff);
  text-decoration: none;
}
.wallet-block .wlt-page-title {
  color: var(--text_white_color, #fff);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.wallet-block .wlt-page-title i {
  margin-right: 8px;
  opacity: 0.7;
}

/* Balance Card */
.wlt-balance-card {
  background: linear-gradient(135deg, rgba(233,69,96,0.2), rgba(233,69,96,0.05));
  border: 1px solid rgba(233,69,96,0.25);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 16px;
}
.wlt-balance-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(233,69,96,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px;
  color: var(--btn-prime_bg_color, #e94560);
}
.wlt-balance-label {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.wlt-balance-amount {
  color: var(--text_white_color, #fff);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}
.wlt-balance-currency {
  color: var(--text_grey_color, #999);
  font-size: 12px;
}
.wlt-balance-currency strong {
  color: var(--text_white_color, #fff);
}

/* Info Card */
.wlt-info-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px;
}
.wlt-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  color: var(--text_grey_color, #999);
  font-size: 12px;
  line-height: 1.5;
}
.wlt-info-item + .wlt-info-item {
  border-top: 1px solid rgba(255,255,255,0.05);
}
.wlt-info-item i {
  margin-top: 2px;
  font-size: 13px;
  opacity: 0.6;
  min-width: 14px;
}

/* Add Money Card */
.wlt-add-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}
.wlt-add-title {
  color: var(--text_white_color, #fff);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 18px;
}
.wlt-add-title i {
  margin-right: 6px;
  color: var(--btn-prime_bg_color, #e94560);
}
.wlt-add-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.wlt-add-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  overflow: hidden;
}
.wlt-add-currency {
  padding: 0 14px;
  color: var(--text_grey_color, #b1b1b1);
  font-size: 16px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.wlt-add-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text_white_color, #fff);
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  min-width: 0;
}
.wlt-add-input:focus {
  outline: none;
}
.wlt-add-input-wrap:focus-within {
  border-color: var(--btn-prime_bg_color, #e94560);
  box-shadow: 0 0 0 2px rgba(233,69,96,0.15);
}
.wlt-add-btn {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
}
.wlt-add-btn:hover {
  background: var(--text_blue_color, #039be5) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.35);
}
.wlt-add-btn i {
  margin-right: 6px;
}

/* Transaction Card */
.wlt-txn-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 24px;
}
.wlt-txn-title {
  color: var(--text_white_color, #fff);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 18px;
}
.wlt-txn-title i {
  margin-right: 6px;
  opacity: 0.6;
}
.wlt-txn-list {
  display: flex;
  flex-direction: column;
}
.wlt-txn-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wlt-txn-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.wlt-txn-item:first-child {
  padding-top: 0;
}
.wlt-txn-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.wlt-txn-icon--credit {
  background: rgba(40,167,69,0.15);
  color: #28a745;
}
.wlt-txn-icon--debit {
  background: rgba(220,53,69,0.15);
  color: #dc3545;
}
.wlt-txn-details {
  flex: 1;
  min-width: 0;
}
.wlt-txn-log {
  color: var(--text_white_color, #fff);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.wlt-txn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text_grey_color, #999);
  font-size: 11px;
}
.wlt-txn-meta i {
  margin-right: 3px;
  opacity: 0.6;
}
.wlt-txn-amount {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}
.wlt-txn-amount--credit {
  color: #28a745;
}
.wlt-txn-amount--debit {
  color: #dc3545;
}
.wlt-txn-empty {
  text-align: center;
  padding: 40px 0;
  color: var(--text_grey_color, #999);
}
.wlt-txn-empty i {
  font-size: 36px;
  opacity: 0.3;
  display: block;
  margin-bottom: 10px;
}
.wlt-txn-empty p {
  margin: 0;
  font-size: 14px;
}

/* Wallet responsive */
@media (max-width: 767px) {
  .wlt-add-row {
    flex-direction: column;
  }
  .wlt-add-btn {
    text-align: center;
  }
  .wlt-txn-item {
    flex-wrap: wrap;
  }
  .wlt-txn-amount {
    width: 100%;
    text-align: right;
    padding-left: 52px;
  }
  .wlt-balance-amount {
    font-size: 26px;
  }
}

/* Billing History */
.billing-history-main-block .plan-dtl-heading {
  color: var(--text_white_color, #fff);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}
.billing-history-block .table {
  color: var(--text_grey_color, #b1b1b1);
}
.billing-history-block .table thead th {
  background: rgba(255,255,255,0.04);
  color: var(--text_white_color, #fff);
  border-bottom: 2px solid rgba(255,255,255,0.08);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  padding: 12px 16px;
}
.billing-history-block .table td {
  border-color: rgba(255,255,255,0.06);
  padding: 12px 16px;
  vertical-align: middle;
}
.billing-history-block .table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}
.billing-history-block .btn-default {
  background: rgba(79, 195, 247, 0.1) !important;
  border: 1px solid rgba(79, 195, 247, 0.3) !important;
  color: var(--text_blue_color, #4fc3f7) !important;
  border-radius: 10px !important;
  font-size: 12px;
  padding: 6px 16px;
  transition: all 0.2s;
}
.billing-history-block .btn-default:hover {
  background: rgba(79, 195, 247, 0.2) !important;
  color: #fff !important;
  border-color: rgba(79, 195, 247, 0.5) !important;
}

/* Mobile Tabs */
.mobile-tabs .nav-pills .nav-link {
  color: var(--text_grey_color, #b1b1b1);
  font-size: 18px;
  padding: 10px 14px;
  border-radius: 6px;
  transition: all 0.2s;
}
.mobile-tabs .nav-pills .nav-item.active .nav-link,
.mobile-tabs .nav-pills .nav-link.active {
  background: var(--btn-prime_bg_color, #e94560);
  color: var(--text_white_color, #fff);
}

/* ============================================================
   Breadcrumb Enhancement
   ============================================================ */
.breadcrumb-main-block {
  position: relative;
  padding: 50px 0 40px;
  background-size: cover;
  background-position: center;
}
.breadcrumb-main-block .overlay-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.6));
}
.breadcrumb-main-block .heading {
  color: var(--text_white_color, #fff);
  font-size: 28px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.breadcrumb-main-block .breadcrumb {
  background: transparent;
  padding: 0;
  position: relative;
  z-index: 1;
}
.breadcrumb-main-block .breadcrumb-item a {
  color: var(--text_grey_color, #b1b1b1);
  transition: color 0.2s;
}
.breadcrumb-main-block .breadcrumb-item a:hover {
  color: var(--btn-prime_bg_color, #e94560);
}
.breadcrumb-main-block .breadcrumb-item.active {
  color: var(--text_grey_color, #999);
}

/* ============================================================
   Protip Tooltip - Improved UI
   ============================================================ */

/* Container */
.protip-skin-default--scheme-pro.protip-container {
  background-color: var(--background_dark-black_bg_color, #0d0d0d) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
  padding: 0 !important;
  max-width: 340px;
  overflow: hidden;
}

/* Content wrapper */
.protip-content {
  border: none !important;
  border-radius: 12px !important;
  padding: 20px 22px !important;
  background: transparent !important;
}

/* Arrow colors to match container */
.protip-skin-default--scheme-pro .protip-arrow {
  display: none !important;
}

/* Title heading */
.protip-content .description-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--text_blue_color, #00d4ff);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

/* Metadata list */
.protip-content .description-list {
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-left: 0;
}
.protip-content .description-list li {
  display: inline-block !important;
  color: #aaa;
  font-size: 12px;
  margin: 0;
  padding: 0 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  line-height: 1;
}
.protip-content .description-list li:first-child {
  padding-left: 0;
}
.protip-content .description-list li:last-child {
  border-right: none;
}

/* Description text */
.protip-content .main-des {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.protip-content .main-des p {
  font-size: 13px;
  line-height: 1.6;
  color: #bbb;
  margin: 0 0 8px;
  letter-spacing: 0.1px;
}
.protip-content .main-des a {
  color: var(--text_blue_color, #00d4ff);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
  margin-top: 4px;
  display: inline-block;
}
.protip-content .main-des a:hover {
  color: #fff;
}

/* Buy / Pay button */
.protip-content .des-btn-block .btn-pay {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text_blue_color, #00d4ff);
  border: none;
  padding: 0;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.protip-content .des-btn-block .btn-pay:hover {
  color: #fff;
  background: transparent;
}

/* Play button */
.protip-content .des-btn-block a.btn-play {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  text-align: left;
  margin-bottom: 10px;
  padding: 0;
}
.protip-content .des-btn-block a.btn-play:hover {
  background: transparent;
}
.protip-content .des-btn-block .btn-play .play-btn-icon {
  width: 32px;
  height: 32px;
  font-size: 12px;
  background: var(--text_blue_color, #00d4ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.protip-content .des-btn-block .btn-play .play-btn-icon i {
  line-height: 1;
}
.protip-content .des-btn-block .btn-play .play-text {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

/* Action buttons (Watch Trailer, Add to Watchlist) */
.protip-content .des-btn-block .btn-default {
  display: block;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px;
  text-align: left;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.protip-content .des-btn-block .btn-default:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.protip-content .des-btn-block a:hover {
  background-color: transparent;
}
.protip-content .des-btn-block .btn-default:last-child {
  margin-bottom: 0;
}

/* Hide icon inside tooltip */
.protip-content .hide-icon {
  display: none;
}

/* Movie rating inside tooltip */
.protip-content .movie-rating {
  color: #aaa;
  font-size: 12px;
  margin: 2px 0 6px;
}

/* ============================================================
   Promotion Slider (YouTube + Movie Detail Hero Section)
   ============================================================ */

/* Container */
.promotion-slider {
  margin-bottom: 40px;
}
.promotion-slider .container-fluid {
  padding: 0;
}

/* Carousel wrapper */
.promotion-slider .home-dtl-slider {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
}
.promotion-slider .home-dtl-slider .overlay-bg {
  background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 100%);
  border-radius: 12px;
}

/* YouTube iframe / Video side */
.promotion-slider .slider-height {
  padding: 30px 30px 30px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promotion-slider .slider-height iframe {
  border: none;
  border-radius: 10px;
  height: 320px;
  width: 100%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.promotion-slider .slider-height img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Detail side */
.promotion-slider .slider-height-dtl {
  height: auto;
  padding: 40px 40px 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.promotion-slider .slider-height-dtl img.img-responsive {
  max-width: 140px;
  margin-bottom: 8px;
  opacity: 0.85;
}
.promotion-slider .slider-height-dtl h1 {
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.3px;
}

/* Buttons row */
.promotion-slider .des-btn-block.des-in-list {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 0;
  margin-bottom: 20px;
}
.promotion-slider .des-btn-block.des-in-list a.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  margin: 0;
  padding: 0;
}
.promotion-slider .des-btn-block.des-in-list .btn-play .play-btn-icon {
  width: 44px;
  height: 44px;
  font-size: 16px;
  background: var(--text_blue_color, #00d4ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}
.promotion-slider .des-btn-block.des-in-list .btn-play:hover .play-btn-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
}
.promotion-slider .des-btn-block.des-in-list .btn-play .play-btn-icon i {
  line-height: 1;
  margin-left: 2px;
}
.promotion-slider .des-btn-block.des-in-list .btn-play .play-text {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.promotion-slider .des-btn-block.des-in-list a.btn-default {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  width: auto;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}
.promotion-slider .des-btn-block.des-in-list a.btn-default:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Description text */
.promotion-slider .slider-height-dtl p {
  color: #bbb;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 10px;
}
.promotion-slider .slider-height-dtl > a {
  color: var(--text_blue_color, #00d4ff);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.promotion-slider .slider-height-dtl > a:hover {
  color: #fff;
}

/* Carousel navigation arrows */
.promotion-slider .carousel-control {
  opacity: 0;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s, background 0.3s;
  z-index: 10;
}
.promotion-slider:hover .carousel-control {
  opacity: 1;
}
.promotion-slider .carousel-control:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
.promotion-slider .carousel-control.left {
  left: 16px;
  right: auto;
}
.promotion-slider .carousel-control.right {
  right: 16px;
  left: auto;
}
.promotion-slider .carousel-control i {
  font-size: 16px;
  color: #fff;
}

/* Responsive */
@media (max-width: 991px) {
  .promotion-slider .slider-height {
    padding: 20px;
  }
  .promotion-slider .slider-height-dtl {
    padding: 20px;
  }
  .promotion-slider .slider-height-dtl h1 {
    font-size: 26px;
  }
}
@media (max-width: 767px) {
  .promotion-slider .slider-height {
    padding: 16px;
  }
  .promotion-slider .slider-height iframe {
    height: 220px;
  }
  .promotion-slider .slider-height-dtl {
    padding: 16px;
  }
  .promotion-slider .slider-height-dtl h1 {
    font-size: 22px;
    margin-bottom: 14px;
  }
  .promotion-slider .des-btn-block.des-in-list {
    flex-wrap: wrap;
  }
  .promotion-slider .carousel-control {
    width: 36px;
    height: 36px;
  }
  .promotion-slider .carousel-control.left {
    left: 8px;
  }
  .promotion-slider .carousel-control.right {
    right: 8px;
  }
}

/* ============================================================
   Movie / Show Detail Page - Improved UI
   ============================================================ */

/* Title */
.full-movie-dtl-block .section-heading {
  font-size: 36px;
  font-weight: 700;
  color: var(--text_blue_color, #00d4ff);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Season dropdown */
.full-movie-dtl-block .season-select {
  width: auto;
  min-width: 160px;
  max-width: 220px;
  padding: 8px 32px 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  margin-bottom: 16px;
  transition: border-color 0.2s, background-color 0.2s;
}
.full-movie-dtl-block .season-select:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.12);
}
.full-movie-dtl-block .season-select:focus {
  outline: none;
  border-color: var(--text_blue_color, #00d4ff);
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.15);
}
.full-movie-dtl-block .season-select option {
  background: #1a1a2e;
  color: #fff;
}

/* Metadata badges */
.imdb-ratings-block {
  margin-bottom: 18px;
}
.imdb-ratings-block ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.imdb-ratings-block ul li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  margin-right: 0;
  width: auto;
  text-align: left;
}
.imdb-ratings-block ul li i {
  font-size: 13px;
  opacity: 0.7;
}
.imdb-ratings-block ul li .fa-eye {
  color: var(--text_blue_color, #00d4ff);
  opacity: 1;
}
.imdb-ratings-block ul li .fa-share-alt {
  cursor: pointer;
  transition: color 0.2s;
}
.imdb-ratings-block ul li .fa-share-alt:hover {
  color: var(--text_blue_color, #00d4ff);
}

/* Like/Dislike buttons inside ratings */
.imdb-ratings-block ul li.tv-reaction-list,
.imdb-ratings-block ul li.movie-reaction-list {
  background: transparent;
  border: none;
  padding: 0;
}
.imdb-ratings-block .movie-reaction-block {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.imdb-ratings-block .tv-reaction-btn,
.imdb-ratings-block .movie-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.imdb-ratings-block .tv-reaction-btn:hover,
.imdb-ratings-block .movie-reaction-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}
.imdb-ratings-block .tv-like-btn.active,
.imdb-ratings-block .movie-like-btn.active {
  background: rgba(0, 212, 255, 0.15);
  border-color: var(--text_blue_color, #00d4ff);
  color: var(--text_blue_color, #00d4ff);
}
.imdb-ratings-block .tv-dislike-btn.active,
.imdb-ratings-block .movie-dislike-btn.active {
  background: rgba(233, 69, 96, 0.15);
  border-color: #e94560;
  color: #e94560;
}

/* Play Now button */
.full-movie-dtl-main-block .screen-play-btn-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  padding: 0;
}
.full-movie-dtl-main-block .screen-play-btn-block a,
.full-movie-dtl-main-block .screen-play-btn-block button {
  margin-right: 0;
}
.full-movie-dtl-main-block .screen-play-btn-block .btn-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.full-movie-dtl-main-block .screen-play-btn-block .btn-play .play-btn-icon {
  width: 48px;
  height: 48px;
  font-size: 16px;
  background: var(--text_blue_color, #00d4ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(0, 212, 255, 0.3);
}
.full-movie-dtl-main-block .screen-play-btn-block .btn-play:hover .play-btn-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 22px rgba(0, 212, 255, 0.5);
}
.full-movie-dtl-main-block .screen-play-btn-block .btn-play .play-btn-icon i {
  line-height: 1;
  margin-left: 2px;
}
.full-movie-dtl-main-block .screen-play-btn-block .btn-play .play-text {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

/* Watchlist / Trailer buttons */
.full-movie-dtl-main-block .screen-play-btn-block .btn-default,
.full-movie-dtl-main-block .screen-play-btn-block .watch-trailer-btn.btn-default {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  margin-top: 0;
  text-decoration: none;
}
.full-movie-dtl-main-block .screen-play-btn-block .btn-default:hover,
.full-movie-dtl-main-block .screen-play-btn-block .watch-trailer-btn.btn-default:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Description text */
.full-movie-dtl-block p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  padding-right: 30px;
  margin-bottom: 20px;
}

/* Starring / Cast section */
.screen-casting-dtl {
  margin-top: 8px;
}
.screen-casting-dtl .casting-headers {
  padding: 0;
  margin: 0;
  list-style: none;
}
.screen-casting-dtl .casting-headers li {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
  line-height: 1.6;
}
.screen-casting-dtl .casting-headers li .categories-count {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}
.screen-casting-dtl .casting-headers li .categories-count a {
  color: var(--text_blue_color, #00d4ff);
  text-decoration: none;
  transition: color 0.2s;
}
.screen-casting-dtl .casting-headers li .categories-count a:hover {
  color: #fff;
}

/* Rating dropdown */
.imdb-ratings-block .rating-dropdown .btn-primary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  color: #fff;
}
.imdb-ratings-block .rating-dropdown .btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Detail page responsive */
@media (max-width: 991px) {
  .full-movie-dtl-block .section-heading {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .full-movie-dtl-block .section-heading {
    font-size: 24px;
  }
  .full-movie-dtl-block .season-select {
    min-width: 140px;
  }
  .full-movie-dtl-main-block .screen-play-btn-block {
    gap: 10px;
  }
  .full-movie-dtl-main-block .screen-play-btn-block .btn-play .play-btn-icon {
    width: 42px;
    height: 42px;
  }
  .full-movie-dtl-block p {
    padding-right: 0;
  }
  .imdb-ratings-block ul {
    gap: 6px;
  }
  .imdb-ratings-block ul li {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* Detail page thumbnail (right side) */
.detail-thumb-block {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px 0;
  position: relative;
  z-index: 5;
}
.detail-thumb-block img {
  max-height: 420px;
  width: auto;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  object-fit: cover;
  transition: transform 0.3s;
}
.detail-thumb-block img:hover {
  transform: scale(1.03);
}

/* ===== Viewall Sidebar Filter UI ===== */
.movie-series-sidebar {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px 20px;
  position: sticky;
  top: 100px;
}

.movie-series-filter-block {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-bottom: 20px !important;
  margin-bottom: 0;
}

.movie-series-filter-block .filter-header {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.movie-series-filter-block select.form-select {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: #ccc !important;
  font-size: 13px !important;
  transition: border-color 0.2s, background-color 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}

.movie-series-filter-block select.form-select:focus {
  border-color: var(--text_blue_color, #4fc3f7) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.15);
}

/* Toggle switch improvement */
.movie-series-filter-block.toggle-switch {
  display: flex !important;
  align-items: center;
  padding: 16px 0 !important;
  margin-top: 0 !important;
}

.movie-series-filter-block.toggle-switch .form-check-label {
  font-size: 14px !important;
  color: #bbb !important;
  font-weight: 400 !important;
  transition: color 0.2s;
}

/* Toggle switch styles moved to admin-forms.css */

/* Genre checkboxes */
.movie-series-filter-block.genre-filter {
  margin-top: 0 !important;
  padding-top: 16px !important;
}

.genre-filter .form-check {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.genre-filter .form-check::-webkit-scrollbar {
  width: 4px;
}

.genre-filter .form-check::-webkit-scrollbar-track {
  background: transparent;
}

.genre-filter .form-check::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.genre-filter .form-check-input + label {
  font-size: 13px !important;
  color: #bbb !important;
  margin-bottom: 0 !important;
  padding: 8px 0 8px 32px !important;
  display: block;
  transition: color 0.2s, background 0.2s;
  border-radius: 6px;
  position: relative;
}

.genre-filter .form-check-input + label:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04);
}

.genre-filter .form-check-input + label:before {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  margin-right: 12px !important;
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  transition: border-color 0.2s, background 0.2s;
}

.genre-filter .form-check-input:checked + label {
  color: #fff !important;
}

.genre-filter .form-check-input:checked + label:before {
  background: var(--text_blue_color, #4fc3f7) !important;
  border-color: var(--text_blue_color, #4fc3f7) !important;
}

.genre-filter .form-check-input:checked + label:after {
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

/* Age Ratings dropdown spacing */
.movie-series-filter-block.language.m-t-20 {
  margin-top: 0 !important;
  padding-top: 16px !important;
}

/* Apply Filters button */
.reset-filter-block {
  padding: 20px 0 4px !important;
  border-bottom: none !important;
}

.reset-filter-block .btn-primary {
  width: 100% !important;
  background: var(--text_blue_color, #4fc3f7) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
}

.reset-filter-block .btn-primary:hover {
  background: var(--btn-prime_bg_color, #039be5) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.35) !important;
}

.reset-filter-block .btn-primary:active {
  transform: translateY(0);
}

.reset-filter-block .btn-primary i {
  margin-right: 6px;
}

/* Reset Filters button in content area */
.movie-series-header-block .reset-btn {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ccc;
  padding: 8px 18px;
  font-size: 13px;
  transition: background 0.2s, color 0.2s;
}

.movie-series-header-block .reset-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Mobile sidebar */
.small-screen-sidebar .sidebar .movie-series-sidebar {
  background: var(--background_dark-black_bg_color, #0d0d0d);
  border: none;
  border-radius: 0;
  padding: 20px 16px;
}

.small-screen-sidebar .openbtn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 18px;
  transition: background 0.2s;
}

.small-screen-sidebar .openbtn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* View All No Results */
.view-all-search h5 {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.view-all-search p {
  color: #888;
  font-size: 14px;
}

@media (max-width: 767px) {
  .movie-series-sidebar {
    position: static;
  }
}

/* ===== Episode Card Block (show detail page) ===== */
.movie-series-block {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 0 24px 0 0 !important;
  margin-bottom: 16px !important;
  transition: background 0.2s, border-color 0.2s;
  overflow: hidden;
}

.movie-series-block:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.movie-series-img img {
  border-radius: 12px 0 0 12px !important;
}

.movie-series-block .movie-series-section {
  padding: 16px 0;
}

.movie-series-heading.movie-series-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff;
  margin-bottom: 0 !important;
}

.movie-series-des-list {
  text-align: right;
}

.movie-series-des-list li {
  font-size: 14px !important;
  color: #aaa !important;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 12px;
  border-radius: 16px;
}

.movie-series-block p {
  font-size: 13px !important;
  color: #999 !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

/* Episode play button layout */
.movie-series-block .btn-play {
  gap: 12px !important;
  align-items: center !important;
}

.movie-series-block .btn-play .play-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.movie-series-block .btn-play .play-text .movie-series-heading {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* ===== Global Frontend Buttons - Creative Pill Style ===== */
.btn-default {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 24px !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  outline: none !important;
}

.btn-default:hover,
.btn-default:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-default:active {
  transform: translateY(0) !important;
}

.btn-default i {
  font-size: 13px;
}

/* Watch Trailer button - accent variant */
.watch-trailer-btn.btn-default {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.watch-trailer-btn.btn-default:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Download button in episode cards */
.movie-series-block .btn-default {
  padding: 8px 18px !important;
  font-size: 13px !important;
  margin-top: 8px;
}

/* Submit/Review buttons */
.comment-nav-tabs .btn-default {
  padding: 10px 24px !important;
  background: var(--text_blue_color, #00d4ff) !important;
  border-color: var(--text_blue_color, #00d4ff) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.25);
}

.comment-nav-tabs .btn-default:hover {
  background: var(--text_blue_color, #00d4ff) !important;
  border-color: var(--text_blue_color, #00d4ff) !important;
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4) !important;
  transform: translateY(-1px);
}

/* Download link button (green) */
.btn-success {
  background: rgba(76, 175, 80, 0.2) !important;
  border: 1px solid rgba(76, 175, 80, 0.4) !important;
  border-radius: 8px !important;
  color: #4CAF50 !important;
  transition: all 0.2s;
}

.btn-success:hover {
  background: rgba(76, 175, 80, 0.35) !important;
  border-color: rgba(76, 175, 80, 0.6) !important;
  color: #fff !important;
}

/* Danger button (delete/reply in comments) */
.comment .btn-danger,
.comment .btn-danger.btn-floating {
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(244, 67, 54, 0.15) !important;
  border: 1px solid rgba(244, 67, 54, 0.3) !important;
  color: #f44336 !important;
  transition: all 0.2s;
}

.comment .btn-danger:hover {
  background: rgba(244, 67, 54, 0.3) !important;
  border-color: rgba(244, 67, 54, 0.5) !important;
}

/* Reset btn-default for admin contexts to avoid breaking admin panel */
.modal-footer .btn-default,
.panel .btn-default,
.admin-content .btn-default {
  border-radius: 6px !important;
  padding: 8px 16px !important;
}

/* Detail multiple link download table */
.detail-multiple-link {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 12px;
}

.detail-multiple-link th {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ccc !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.detail-multiple-link td {
  color: #aaa !important;
  font-size: 13px;
  padding: 10px 12px !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* Comment section tabs improvements */
.comment-nav-tabs .tab-content {
  padding: 0 20px 20px;
}

.comment-nav-tabs textarea.form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 14px !important;
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.2s;
}

.comment-nav-tabs textarea.form-control:focus {
  border-color: var(--text_blue_color, #00d4ff) !important;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
  outline: none;
}

/* Episodes section heading */
.movie-series-section.search-section > .movie-series-heading {
  font-size: 20px !important;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px !important;
}

@media (max-width: 767px) {
  .movie-series-block {
    padding: 0 12px 12px 0 !important;
  }
  .movie-series-block .movie-series-section {
    padding: 12px 0;
  }
  .movie-series-des-list {
    text-align: left;
  }
  .btn-default {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
}

/* ===== Global Frontend Action Buttons - Blue Pill Style ===== */
/* btn-prime (subscription, account actions) */
.main-wrapper .btn-prime,
.membership-block .btn-prime,
.membership-dtl .btn-prime {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
}

.main-wrapper .btn-prime:hover,
.main-wrapper .btn-prime:focus,
.membership-block .btn-prime:hover,
.membership-dtl .btn-prime:hover {
  background: var(--text_blue_color, #039be5) !important;
  color: #fff !important;
  border: none !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.35) !important;
}

/* btn-primary (Rate dropdown, Stripe confirm, general primary) */
.main-wrapper .btn-primary,
.comment-nav-tabs .btn-primary {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
}

.main-wrapper .btn-primary:hover,
.main-wrapper .btn-primary:focus,
.comment-nav-tabs .btn-primary:hover {
  background: var(--text_blue_color, #039be5) !important;
  color: #fff !important;
  border: none !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.35) !important;
}

/* btn-subscribe (contact page, comment modals) */
input.btn-subscribe,
.btn-subscribe {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 32px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
  cursor: pointer;
}

input.btn-subscribe:hover,
.btn-subscribe:hover {
  background: var(--text_blue_color, #039be5) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.35) !important;
}

/* btn-info (GDPR export, misc info buttons) */
.main-wrapper .btn-info {
  background: rgba(79, 195, 247, 0.12) !important;
  color: var(--text_blue_color, #4fc3f7) !important;
  border: 1px solid rgba(79, 195, 247, 0.3) !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
}

.main-wrapper .btn-info:hover {
  background: rgba(79, 195, 247, 0.2) !important;
  border-color: rgba(79, 195, 247, 0.5) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Wallet payment page buttons */
.walletpay-block .btn-default,
.walletpay-block .btn-primary {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
}

.walletpay-block .btn-default:hover,
.walletpay-block .btn-primary:hover {
  background: var(--text_blue_color, #039be5) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.35) !important;
}

/* Active button state */
.btn-prime:active,
.btn-primary:active,
.btn-subscribe:active,
.wlt-add-btn:active {
  transform: translateY(0) !important;
}

/* ===== Pricing Plan Cards (purchase page + home page) ===== */
.purchase-section .plan-block-dtl,
.main-home-section-plans .plan-block-dtl {
  text-align: center;
  margin-bottom: 40px;
}

.purchase-section .plan-dtl-heading,
.main-home-section-plans .plan-dtl-heading {
  font-size: 28px !important;
  font-weight: 700;
  color: #fff;
  border-bottom: none !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

.purchase-section .plan-dtl-list,
.main-home-section-plans .plan-dtl-list {
  color: #999;
  font-size: 15px;
  max-width: 600px;
  margin: 0 auto;
}

.purchase-section .snip1404,
.main-home-section-plans .snip1404 {
  margin: 30px 0 !important;
}

/* Card container */
.purchase-section .main-plan-section,
.main-home-section-plans .main-plan-section {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.purchase-section .main-plan-section:hover,
.main-home-section-plans .main-plan-section:hover {
  transform: translateY(-6px);
  border-color: rgba(79, 195, 247, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Active/current plan card */
.purchase-section .main-plan-section-two,
.main-home-section-plans .main-plan-section.active-plan {
  border: 2px solid var(--text_blue_color, #4fc3f7) !important;
  box-shadow: 0 0 30px rgba(79, 195, 247, 0.15);
}

/* Plan title header */
.purchase-section .plan-home-title,
.main-home-section-plans .plan-home-title {
  background: linear-gradient(135deg, rgba(79, 195, 247, 0.15), rgba(79, 195, 247, 0.05)) !important;
  padding: 24px 20px 20px !important;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px !important;
  color: #fff;
  position: relative;
}

.purchase-section .plan-home-title:after,
.main-home-section-plans .plan-home-title:after {
  display: none !important;
}

/* Price section */
.purchase-section .snip1404 header,
.main-home-section-plans .snip1404 header {
  background: transparent !important;
}

.purchase-section .snip1404 .plan-cost,
.main-home-section-plans .snip1404 .plan-cost {
  padding: 24px 16px 16px !important;
  height: auto !important;
  text-align: center;
  background: transparent;
}

.purchase-section .snip1404 .plan-price,
.main-home-section-plans .snip1404 .plan-price {
  font-size: 2.2em !important;
  font-weight: 700;
  color: var(--text_blue_color, #4fc3f7) !important;
  display: block;
}

.purchase-section .snip1404 .plan-type,
.main-home-section-plans .snip1404 .plan-type {
  font-size: 13px !important;
  color: #888 !important;
  display: block;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* Features list */
.purchase-section .plan-features,
.main-home-section-plans .plan-features {
  background: transparent !important;
  padding: 0 24px 20px !important;
  height: auto !important;
  flex: 1;
}

.purchase-section .plan-features li,
.main-home-section-plans .plan-features li {
  padding: 10px 0 !important;
  font-size: 14px !important;
  color: #ccc !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  gap: 10px;
}

.purchase-section .plan-features li:last-child,
.main-home-section-plans .plan-features li:last-child {
  border-bottom: none;
}

.purchase-section .plan-features li i.fa-check,
.main-home-section-plans .plan-features li i.fa-check {
  color: var(--text_blue_color, #4fc3f7) !important;
  font-size: 12px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 195, 247, 0.12);
  border-radius: 50%;
  flex-shrink: 0;
  float: none !important;
  margin: 0 !important;
}

/* Subscribe button */
.purchase-section .plan-select,
.main-home-section-plans .plan-select {
  padding: 20px 24px 28px !important;
  text-align: center;
  background: transparent !important;
}

.purchase-section .plan-select a,
.purchase-section .plan-select .btn-prime,
.main-home-section-plans .plan-select a,
.main-home-section-plans .plan-select .btn-prime {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  display: inline-block;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
  text-decoration: none;
  width: 100%;
}

.purchase-section .plan-select a:hover,
.purchase-section .plan-select .btn-prime:hover,
.main-home-section-plans .plan-select a:hover,
.main-home-section-plans .plan-select .btn-prime:hover {
  background: var(--text_blue_color, #039be5) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.35) !important;
}

/* Already subscribed button */
.purchase-section .plan-select .btn-prime-bg,
.main-home-section-plans .plan-select .btn-prime-bg {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #999 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  cursor: default;
  pointer-events: none;
}

/* Subscribe input inside button */
.purchase-section .plan-select .btn-subscribe,
.purchase-section .btn-prime-subs .btn-subscribe,
.main-home-section-plans .plan-select .btn-subscribe,
.main-home-section-plans .btn-prime-subs .btn-subscribe {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100%;
  border-radius: 0 !important;
}

/* Column spacing */
.purchase-section .snip1404 .col-lg-3 {
  margin-bottom: 20px;
}

/* Home page owl carousel plan cards */
.main-home-section-plans .purchase-slider-block.owl-carousel .item {
  padding: 0 8px;
  height: 100%;
}

.main-home-section-plans .purchase-slider-block.owl-carousel .item .main-plan-section {
  height: 100%;
}

@media (max-width: 991px) {
  .purchase-section .snip1404 .col-lg-3 {
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .purchase-section .plan-dtl-heading,
  .main-home-section-plans .plan-dtl-heading {
    font-size: 22px !important;
  }
  .purchase-section .snip1404 .plan-price,
  .main-home-section-plans .snip1404 .plan-price {
    font-size: 1.8em !important;
  }
}

/* ===== Home Page Hero Slider ===== */
.home-out-section-slider.owl-carousel {
  margin-top: -70px;
}

.home-out-section-img {
  position: relative;
  overflow: hidden;
}

.home-out-section-img img {
  width: 100%;
  min-height: 620px;
  object-fit: cover;
  object-position: center 20%;
}

/* Kill the harsh base background-color on slider overlays */
.slider-block .overlay-bg {
  background-color: transparent !important;
}

/* Gradient overlays - smooth cinematic fade */
.home-out-section .overlay-bg.gredient-overlay-right {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.04) 80%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 20%, transparent 65%, rgba(0,0,0,0.55) 100%) !important;
}

.home-out-section .overlay-bg.gredient-overlay-left {
  background:
    linear-gradient(-90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.04) 80%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 20%, transparent 65%, rgba(0,0,0,0.55) 100%) !important;
}

/* Content overlay positioning */
.home-out-section-dtl {
  position: absolute !important;
  top: 0 !important;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0;
}

.home-out-section-dtl .container-fluid {
  padding-left: 5%;
  padding-right: 5%;
  width: 100%;
}

.home-out-section-dtl .container-fluid > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Slide-in animation for content */
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.owl-item.active .home-out-section-dtl .section-heading {
  animation: heroSlideUp 0.7s ease-out both;
}

.owl-item.active .home-out-section-dtl .section-dtl {
  animation: heroSlideUp 0.7s 0.15s ease-out both;
}

.owl-item.active .home-out-section-dtl .btn-prime {
  animation: heroSlideUp 0.7s 0.3s ease-out both;
}

/* Blue accent bar above heading */
.home-out-section .section-heading:before {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  background: var(--text_blue_color, #4fc3f7);
  border-radius: 2px;
  margin-bottom: 20px;
  box-shadow: 0 0 12px rgba(79, 195, 247, 0.4);
}

/* Right-aligned slides: push entire content block to the right */
.home-out-section .text-right {
  float: none !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.home-out-section .text-right .section-heading:before {
  margin-left: auto;
}

.home-out-section .text-right .section-heading {
  margin-left: auto;
}

.home-out-section .text-right .section-dtl {
  margin-left: auto;
}

/* Heading */
.home-out-section .section-heading {
  font-size: 50px !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  margin-bottom: 22px !important;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
  max-width: 560px;
  letter-spacing: -0.5px;
}

/* Description text */
.home-out-section .section-dtl {
  font-size: 17px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  margin-bottom: 36px !important;
  padding-right: 0 !important;
  max-width: 480px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* CTA Button */
.home-out-section .btn-prime {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 15px 40px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  box-shadow: 0 4px 25px rgba(79, 195, 247, 0.35);
  text-transform: none;
}

.home-out-section .btn-prime:hover {
  background: var(--text_blue_color, #039be5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 35px rgba(79, 195, 247, 0.5) !important;
}

/* Owl dots navigation */
.home-out-section-slider .owl-dots {
  position: absolute;
  bottom: 32px !important;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.home-out-section-slider .owl-dot {
  width: 10px !important;
  height: 10px !important;
  margin: 0 5px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  border: none !important;
  transition: all 0.3s !important;
  opacity: 1 !important;
}

.home-out-section-slider .owl-dot.active,
.home-out-section-slider .owl-dot:hover {
  background: var(--text_blue_color, #4fc3f7) !important;
  width: 32px !important;
  opacity: 1 !important;
  box-shadow: 0 0 12px rgba(79, 195, 247, 0.5);
}

/* Owl nav arrows */
.home-out-section-slider .owl-nav .owl-prev,
.home-out-section-slider .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  opacity: 0;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.home-out-section-slider:hover .owl-nav .owl-prev,
.home-out-section-slider:hover .owl-nav .owl-next {
  opacity: 1;
}

.home-out-section-slider .owl-nav .owl-prev:hover,
.home-out-section-slider .owl-nav .owl-next:hover {
  background: rgba(79, 195, 247, 0.25) !important;
  border-color: rgba(79, 195, 247, 0.5) !important;
  transform: translateY(-50%) scale(1.05);
}

.home-out-section-slider .owl-nav .owl-prev {
  left: 24px;
}

.home-out-section-slider .owl-nav .owl-next {
  right: 24px;
}

@media (max-width: 991px) {
  .home-out-section .section-heading {
    font-size: 36px !important;
  }
  .home-out-section .section-dtl {
    font-size: 15px !important;
    max-width: 400px;
  }
  .home-out-section-img img {
    min-height: 480px;
  }
}

@media (max-width: 767px) {
  .home-out-section .section-heading {
    font-size: 28px !important;
    max-width: 100%;
  }
  .home-out-section .section-heading:before {
    width: 36px;
    height: 3px;
    margin-bottom: 14px;
  }
  .home-out-section .section-dtl {
    font-size: 14px !important;
    max-width: 100%;
    margin-bottom: 24px !important;
  }
  .home-out-section .btn-prime {
    padding: 12px 28px !important;
    font-size: 14px !important;
  }
  .home-out-section-img img {
    min-height: 400px;
  }
  .home-out-section-dtl .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .home-out-section-slider .owl-dot {
    width: 8px !important;
    height: 8px !important;
  }
  .home-out-section-slider .owl-dot.active {
    width: 24px !important;
  }
}

/* ===== Payment / Subscribe Page ===== */
.stripe-content {
  padding: 40px 0 60px !important;
}

.stripe-content > .container-fluid {
  max-width: 1200px;
  margin: 0 auto;
}

/* Page title */
.stripe-content .payment-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 8px !important;
}

/* --- Left sidebar: Package / Rental Info --- */
.stripe-content .package_information {
  border: none !important;
  box-shadow: none !important;
  position: sticky;
  top: 100px;
}

.stripe-content .package_information .panel-default {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden;
}

.stripe-content .package_information .panel-heading {
  background: linear-gradient(135deg, rgba(79, 195, 247, 0.12), rgba(79, 195, 247, 0.04)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 20px 24px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.stripe-content .package_information .panel-body {
  padding: 0 !important;
  background: transparent !important;
}

.stripe-content .package_information .panel-body .table {
  margin-bottom: 0;
  border: none !important;
}

.stripe-content .package_information .panel-body .table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stripe-content .package_information .panel-body .table tr:last-child {
  border-bottom: none;
}

.stripe-content .package_information .panel-body .table th,
.stripe-content .package_information .panel-body .table td {
  padding: 14px 24px !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  vertical-align: middle;
}

.stripe-content .package_information .panel-body .table th {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55) !important;
  white-space: nowrap;
}

/* Rental info alert */
.stripe-content .rental-subs-msg {
  background: rgba(79, 195, 247, 0.08) !important;
  border: 1px solid rgba(79, 195, 247, 0.2) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
  line-height: 1.6;
  margin-bottom: 16px !important;
}

.stripe-content .rental-subs-msg i {
  color: var(--text_blue_color, #4fc3f7);
  margin-right: 6px;
}

/* --- Right side: Payment tabs & content --- */
.stripe-content .tabs-left {
  border-right: none !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stripe-content .tabs-left > li {
  float: none !important;
  margin: 0 !important;
}

.stripe-content .tabs-left > li > a {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 500;
  transition: all 0.2s ease !important;
  display: block;
  margin: 0 !important;
}

.stripe-content .tabs-left > li > a:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.stripe-content .tabs-left > li.active > a,
.stripe-content .tabs-left > li.active > a:hover,
.stripe-content .tabs-left > li.active > a:focus {
  background: linear-gradient(135deg, rgba(79, 195, 247, 0.15), rgba(79, 195, 247, 0.06)) !important;
  border: 1px solid rgba(79, 195, 247, 0.3) !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(79, 195, 247, 0.1);
}

.stripe-content .tabs-left > li.active > a::after {
  display: none !important;
}

/* Pay heading & total area */
.stripe-content .panel-setting-main-block .heading {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin-bottom: 6px;
}

.stripe-content .panel-setting-main-block .heading a {
  color: var(--text_blue_color, #4fc3f7) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}

.stripe-content .panel-setting-main-block hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
  margin: 16px 0 !important;
}

/* Coupon input area */
.stripe-content .form-group .form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  height: auto !important;
}

.stripe-content .form-group .form-control:focus {
  border-color: rgba(79, 195, 247, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.1) !important;
}

.stripe-content .form-group .form-control::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.stripe-content .applybutton {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
  transition: all 0.2s ease !important;
  height: auto !important;
}

.stripe-content .applybutton:hover {
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.4) !important;
  transform: translateY(-1px);
}

/* Coupon dropdown */
.stripe-content .dropdown-menu {
  background: rgba(20, 20, 30, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  margin-top: 4px !important;
}

.stripe-content .dropdown-menu li a {
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  transition: background 0.15s !important;
}

.stripe-content .dropdown-menu li a:hover {
  background: rgba(79, 195, 247, 0.12) !important;
  color: #fff !important;
}

/* Tab content area */
.stripe-content .tab-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 28px 24px;
  margin-top: 16px;
}

.stripe-content .tab-content label {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
  font-weight: 500;
  margin-bottom: 8px !important;
}

/* Card element (Stripe) */
.stripe-content #card-element {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}

/* Payment buttons */
.stripe-content .payment-btn {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 32px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(79, 195, 247, 0.3);
  transition: all 0.2s ease !important;
  cursor: pointer;
  margin-top: 16px !important;
}

.stripe-content .payment-btn:hover {
  box-shadow: 0 8px 30px rgba(79, 195, 247, 0.45) !important;
  transform: translateY(-2px);
}

.stripe-content .payment-btn .fa {
  display: inline-block !important;
  position: static !important;
  font-size: 16px !important;
  animation: none !important;
}

.stripe-content .payment-btn.load .fa {
  animation: spin 0.45s infinite !important;
}

/* Alert messages */
.stripe-content .alert-success {
  background: rgba(76, 175, 80, 0.12) !important;
  border: 1px solid rgba(76, 175, 80, 0.25) !important;
  border-radius: 12px !important;
  color: #81c784 !important;
  padding: 14px 18px !important;
}

.stripe-content .alert-danger {
  background: rgba(244, 67, 54, 0.12) !important;
  border: 1px solid rgba(244, 67, 54, 0.25) !important;
  border-radius: 12px !important;
  color: #ef9a9a !important;
  padding: 14px 18px !important;
}

/* Responsive */
@media (max-width: 991px) {
  .stripe-content .tabs-left {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .stripe-content .tabs-left > li > a {
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .stripe-content {
    padding: 24px 0 40px !important;
  }
  .stripe-content .package_information {
    position: static;
    margin-bottom: 24px;
  }
  .stripe-content .tab-content {
    padding: 20px 16px;
  }
}

/* ===== Auth Pages: Login / Register / Password Reset ===== */

/* Hide mobile logo bar that causes black gap at top */
.signup-thumbnail {
  display: none !important;
}

/* Center the container, kill the 140px top margin */
.signup__container.container {
  margin-top: 0 !important;
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Make the row flex so both columns stretch to equal height */
.signup__container.container > .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  min-height: 0;
}

.signup__container.container > .row > [class*="col-"] {
  float: none !important;
}

/* Left panel: stretch to match right, image covers full area */
.signup__thumbnail,
.sign-in-main-block .signup__thumbnail {
  height: 100% !important;
  min-height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  animation: none !important;
}

/* Right panel */
.signup__form,
.sign-in-main-block .signup__form {
  height: auto !important;
  min-height: 520px;
  background: var(--background_black_bg_color, #111) !important;
  padding: 40px 36px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Darker overlay on left panel */
.signup__overlay {
  background-color: rgba(0, 0, 0, 0.72) !important;
}

/* Left panel text - center it properly */
.thumbnail__content {
  height: auto !important;
  align-self: flex-end !important;
  padding-bottom: 10px;
}

.thumbnail__content p,
.thumbnail__content .heading--primary,
.thumbnail__content .heading--secondary {
  color: var(--text_white_color, #fff) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.thumbnail__content .heading--primary {
  font-size: 26px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.thumbnail__content .heading--secondary {
  font-size: 15px !important;
  color: var(--text_light_grey_color, #b1b1b1) !important;
  line-height: 1.6;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

@media (max-width: 767px) {
  .signup__container.container > .row {
    flex-wrap: wrap !important;
  }
  .signup__thumbnail,
  .sign-in-main-block .signup__thumbnail {
    min-height: 260px !important;
    height: 260px !important;
  }
}

/* Labels */
.signup__form label {
  color: var(--text_light_grey_color, #b1b1b1) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
}

/* Form inputs */
.signup__form .form-control {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: var(--text_white_color, #fff) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-right: 14px !important;
  padding-left: 14px;
  font-size: 14px !important;
  height: auto !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.signup__form .form-control:focus {
  border-color: var(--text_blue_color, #4fc3f7) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.1) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.signup__form .form-control::placeholder,
.signup__form .form-group ::-webkit-input-placeholder {
  color: var(--text_grey_color, #949494) !important;
}

.signup__form .form-group {
  margin-bottom: 16px !important;
}

/* Remember me */
.signup__form .remember label {
  color: var(--text_light_grey_color, #b1b1b1) !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.signup__form .remember input[type="checkbox"] {
  accent-color: var(--text_blue_color, #4fc3f7);
}

/* Terms checkbox */
.signup__form .form-check-label {
  color: var(--text_light_grey_color, #b1b1b1) !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5;
}

.signup__form .form-check-label a {
  color: var(--text_blue_color, #4fc3f7) !important;
}

/* Submit button - theme blue */
.signup__form .btn--form {
  background: var(--blue_bg_color, #4fc3f7) !important;
  color: var(--text_white_color, #fff) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.25);
}

.signup__form .btn--form:hover,
.signup__form .btn--form:focus {
  background: var(--text_blue_color, #039be5) !important;
  color: var(--text_white_color, #fff) !important;
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.4) !important;
}

.signup__form .btn--form-login {
  width: 100% !important;
  margin-bottom: 10px !important;
}

/* "Or Login with" divider */
.or-block {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px 0 !important;
  margin-bottom: 14px !important;
}

.or-block span {
  background: var(--background_black_bg_color, #111) !important;
  color: var(--text_grey_color, #949494) !important;
  font-size: 12px !important;
}

/* Social login buttons */
.social-login .btn--form {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: var(--text_white_color, #fff) !important;
  font-size: 13px !important;
  padding: 9px 14px !important;
  transition: all 0.2s !important;
}

.social-login .btn--form:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.social-login .fb-btn {
  background: rgba(59, 89, 152, 0.2) !important;
  border-color: rgba(59, 89, 152, 0.3) !important;
}

.social-login .fb-btn:hover {
  background: rgba(59, 89, 152, 0.35) !important;
}

.social-login .gplus-btn {
  background: rgba(219, 74, 57, 0.2) !important;
  border-color: rgba(219, 74, 57, 0.3) !important;
}

.social-login .gplus-btn:hover {
  background: rgba(219, 74, 57, 0.35) !important;
}

.social-login .amazon-btn {
  background: rgba(255, 153, 0, 0.15) !important;
  border-color: rgba(255, 153, 0, 0.25) !important;
}

.social-login .amazon-btn:hover {
  background: rgba(255, 153, 0, 0.3) !important;
}

/* Footer links */
.signup__link {
  color: var(--text_grey_color, #949494) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}

.signup__link:hover,
.signup__link:focus {
  color: var(--text_blue_color, #4fc3f7) !important;
  text-decoration: none !important;
}

/* OTP section */
.otp-container .or-block span {
  width: auto !important;
  padding: 0 12px;
}

.mobile-label {
  color: var(--text_light_grey_color, #b1b1b1) !important;
}

/* Alerts */
.signup__form .alert-danger {
  background: rgba(244, 67, 54, 0.1) !important;
  border: 1px solid rgba(244, 67, 54, 0.2) !important;
  border-radius: 8px !important;
  color: #ef9a9a !important;
  font-size: 13px;
}

.signup__form .alert-danger ul {
  margin: 0;
  padding-left: 16px;
}

.signup__form .alert-success {
  background: rgba(76, 175, 80, 0.1) !important;
  border: 1px solid rgba(76, 175, 80, 0.2) !important;
  border-radius: 8px !important;
  color: #81c784 !important;
  font-size: 13px;
}

.signup__form .help-block {
  color: #ef9a9a !important;
  font-size: 12px;
  margin-top: 4px;
}

/* Back button */
.login-back-button .btn-primary {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--text_white_color, #fff) !important;
  font-size: 14px !important;
}

.login-back-button .btn-primary:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Phone input dark theme */
.signup__form .iti {
  width: 100% !important;
}

.signup__form .iti__tel-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: var(--text_white_color, #fff) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-right: 14px !important;
  font-size: 14px !important;
  /* padding-left set dynamically by intl-tel-input plugin - do not override */
}

.signup__form .iti__tel-input:focus {
  border-color: var(--text_blue_color, #4fc3f7) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.1) !important;
}

.signup__form .iti__selected-flag {
  background: transparent !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.signup__form .iti__country-list {
  background: var(--background_black_bg_color, #111) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.signup__form .iti__country {
  color: rgba(255, 255, 255, 0.8) !important;
}

.signup__form .iti__country:hover {
  background: rgba(79, 195, 247, 0.1) !important;
}

/* ============================================================
   ADMIN PANEL OVERRIDES - Sidebar, Topbar, Footer, Dashboard
   ============================================================ */

/* --- Sidebar Dark Theme --- */
.leftbar {
  background: #0f1525 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.leftbar .sidebar {
  background: #0f1525 !important;
}

.leftbar .navigationbar {
  background: #0f1525 !important;
}

.leftbar .logobar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 18px 15px !important;
}

/* Sidebar search input */
.leftbar .search-input .form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

.leftbar .search-input .form-control::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.leftbar .search-input .input-group-text {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Sidebar section headers */
.vertical-menu li.header,
.sidebar .header {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 18px 15px 8px 15px !important;
  margin: 8px 0 4px !important;
}

/* Sidebar menu items */
.vertical-menu > li > a {
  color: rgba(255, 255, 255, 0.65) !important;
  padding: 9px 40px 9px 15px !important;
  border-radius: 8px !important;
  margin: 1px 10px !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
  position: relative !important;
  overflow: visible !important;
}

.vertical-menu > li > a > i {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 16px !important;
  width: 28px !important;
}

.vertical-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

.vertical-menu > li > a:hover > i {
  color: var(--text_blue_color, #4fc3f7) !important;
}

.vertical-menu > li.active > a {
  background: rgba(79, 195, 247, 0.12) !important;
  color: #fff !important;
}

.vertical-menu > li.active > a > i {
  color: var(--text_blue_color, #4fc3f7) !important;
}

/* Hide the original feather chevron icon completely */
.vertical-menu li > a > .icon-chevron-right,
.vertical-menu > li > a > .icon-chevron-right {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

/* Submenu arrow - target a.menu which ONLY exists on links with submenus */
.vertical-menu > li > a.menu::after {
  content: '' !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2.5px solid var(--text_blue_color, #4fc3f7) !important;
  border-bottom: 2.5px solid var(--text_blue_color, #4fc3f7) !important;
  transform: translateY(-50%) rotate(-45deg) !important;
  transition: transform 0.3s ease, border-color 0.2s ease !important;
  display: block !important;
}

/* Hover - arrow turns white */
.vertical-menu > li:hover > a.menu::after {
  border-color: #fff !important;
}

/* Open/active state - arrow rotates down */
.vertical-menu > li.active > a.menu::after {
  transform: translateY(-50%) rotate(45deg) !important;
  border-color: var(--text_blue_color, #4fc3f7) !important;
}

/* Hide the sub-menu truncate description text */
.vertical-menu .sub-menu.truncate {
  display: none !important;
}

/* Submenu styling - left accent border */
.vertical-menu .vertical-submenu {
  background: rgba(255, 255, 255, 0.03) !important;
  border-left: 2px solid var(--text_blue_color, #4fc3f7) !important;
  border-radius: 0 !important;
  margin: 2px 10px 4px 28px !important;
  padding: 4px 0 !important;
}

.vertical-menu .vertical-submenu > li > a {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
  padding: 7px 12px 7px 16px !important;
  transition: all 0.2s ease !important;
  border-radius: 0 6px 6px 0 !important;
  margin: 1px 0 !important;
  position: relative !important;
}

.vertical-menu .vertical-submenu > li > a:before {
  display: none !important;
}

.vertical-menu .vertical-submenu > li > a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding-left: 20px !important;
}

.vertical-menu .vertical-submenu > li > a.active,
.vertical-menu .vertical-submenu > li.active > a {
  color: var(--text_blue_color, #4fc3f7) !important;
  background: rgba(79, 195, 247, 0.08) !important;
  font-weight: 500 !important;
}

/* Sidebar link color override */
.vertical-menu a {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Toggle/collapsed sidebar adjustments */
.toggle-menu .leftbar {
  background: #0f1525 !important;
}

/* --- Topbar Dark Theme --- */
.topbar {
  background: #0f1525 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  min-height: 81px !important;
}

/* Make inner row stretch full height and center vertically */
.topbar > .row {
  width: 100% !important;
  min-height: 81px !important;
  display: flex !important;
  align-items: center !important;
}

/* Match logo section height to topbar */
.leftbar .logobar {
  padding: 15px 15px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  min-height: 81px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Left column - vertically center breadcrumb & title */
.topbar .togglebar {
  display: flex !important;
  align-items: center !important;
  height: 81px !important;
  padding: 0 !important;
}

.topbar .togglebar .breadcrumbbar {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.topbar .breadcrumbbar .page-title {
  color: #fff !important;
  margin: 0 0 2px 0 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
}

.topbar .breadcrumbbar .breadcrumb-list {
  margin: 0 !important;
}

.topbar .breadcrumbbar .breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
}

.topbar .breadcrumb-item,
.topbar .breadcrumb-item a,
.topbar .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Infobar - flex right, vertically centered */
.topbar .infobar {
  display: flex !important;
  align-items: center !important;
  float: right !important;
  height: 81px !important;
}

.topbar .infobar > ul {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: 100% !important;
}

.topbar .infobar > ul > li {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.topbar .infobar > ul > li.mt-2 {
  margin-top: 0 !important;
}

.topbar .infobar > ul > li.mr-2 {
  margin-right: 0 !important;
}

/* --- Topbar icon buttons (icon-only, no text) --- */
.topbar-icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  padding: 0 !important;
}

.topbar-icon-btn:hover {
  color: #fff !important;
  background: rgba(79, 195, 247, 0.12) !important;
}

.topbar-icon-btn i.feather {
  font-size: 17px !important;
  line-height: 1 !important;
  padding: 0 !important;
}

/* Language button with short text */
.topbar-icon-btn.dropdown-toggle {
  width: auto !important;
  padding: 0 12px !important;
  gap: 5px !important;
}

.topbar-lang-text {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.topbar-icon-btn:hover .topbar-lang-text {
  color: #fff !important;
}

/* Hide old infobar-icon styles - replaced by topbar-icon-btn */
.topbar .infobar .infobar-icon {
  display: none !important;
}

/* Profile dropdown */
.topbar .profilebar .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
}

.topbar .profilebar .dropdown-toggle img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  object-fit: cover !important;
  transition: border-color 0.2s ease !important;
}

.topbar .profilebar .dropdown-toggle:hover img {
  border-color: var(--text_blue_color, #4fc3f7) !important;
}

.topbar .profilebar .dropdown-toggle .live-icon {
  display: none !important;
}

.topbar .profilebar .dropdown-toggle .icon-chevron-down {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 12px !important;
}

/* All other topbar text links */
.topbar .infobar ul li a,
.topbar .infobar ul li .live-icon {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
}

.topbar .infobar ul li a:hover,
.topbar .infobar ul li a:hover .live-icon {
  color: var(--text_blue_color, #4fc3f7) !important;
}

.topbar .infobar .languagebar a {
  display: flex !important;
  align-items: center !important;
}

.topbar .infobar .languagebar a {
  color: rgba(255, 255, 255, 0.75) !important;
}

.topbar .infobar .languagebar .dropdown-menu {
  background: #1a2035 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.topbar .infobar .languagebar .dropdown-menu .dropdown-item {
  color: rgba(255, 255, 255, 0.7) !important;
}

.topbar .infobar .languagebar .dropdown-menu .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

/* Profile dropdown dark */
.topbar .profilebar .dropdown-menu {
  background: #1a2035 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.topbar .profilebar .dropdown-item {
  color: rgba(255, 255, 255, 0.7) !important;
}

.topbar .profilebar .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.topbar .profilebar .profilename h5 {
  color: #fff !important;
}

.topbar .profilebar .userbox .profile-icon {
  color: rgba(255, 255, 255, 0.7) !important;
}

.topbar .profilebar .userbox .profile-icon:hover {
  color: #fff !important;
}

/* --- AI Tool Offcanvas Sidebar Dark Theme --- */
.offcanvas-menu {
  background: #0f1525 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4) !important;
}

.offcanvas-menu .ai-title {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
}

.offcanvas-menu .ai-title img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.8 !important;
}

.offcanvas-menu .menu-close i {
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
}

.offcanvas-menu .menu-close i:hover {
  color: #fff !important;
}

.offcanvas-menu hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* AI Tool tabs */
.offcanvas-menu .nav-pills .nav-link {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.offcanvas-menu .nav-pills .nav-link.active,
.offcanvas-menu .nav-pills .nav-link:hover {
  background: var(--text_blue_color, #4fc3f7) !important;
  border-color: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
}

/* AI Tool form controls */
.offcanvas-menu label {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.offcanvas-menu .form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px !important;
  height: 42px !important;
}

.offcanvas-menu .form-control:focus {
  border-color: var(--text_blue_color, #4fc3f7) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.12) !important;
}

.offcanvas-menu .form-control::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

.offcanvas-menu select.form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.offcanvas-menu select.form-control option {
  background: #1a2035 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* AI Tool generate button */
.offcanvas-menu .ai-generate-btn .btn-primary {
  background: var(--text_blue_color, #4fc3f7) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px !important;
  letter-spacing: 0.3px !important;
  transition: all 0.2s ease !important;
}

.offcanvas-menu .ai-generate-btn .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(79, 195, 247, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* AI Tool result area */
.offcanvas-menu .ai-text-result {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.offcanvas-menu .ai-text-result p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* AI Tool overlay */
.offcanvas-overly.active {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Topbar mobile dark */
.topbar-mobile {
  background: #0f1525 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Breadcrumb bar */
.breadcrumbbar {
  background: transparent !important;
}

.breadcrumbbar .page-title {
  color: #fff !important;
}

.breadcrumbbar .breadcrumb {
  background: transparent !important;
}

.breadcrumbbar .breadcrumb-item,
.breadcrumbbar .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.6) !important;
}

.breadcrumbbar .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Footer --- */
.footerbar {
  background: #0f1525 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px 30px !important;
  /* keep base position: absolute; left: 250px; bottom: 0; right: 0 */
}

.footerbar .footer p {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 13px !important;
  margin: 0 !important;
  text-align: center !important;
}

.footerbar .footer p b,
.footerbar .footer p strong {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 500 !important;
}

.footerbar .footer .pull-right b {
  color: var(--text_blue_color, #4fc3f7) !important;
}

/* Page body & container dark bg to prevent light gaps */
body.vertical-layout {
  background: #111827 !important;
}

#containerbar {
  background: #111827 !important;
}

/* Switchery toggle dark in topbar */
.topbar .switchery,
.rightbar .switchery {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

/* --- Content Area Dark Background --- */
.rightbar {
  background: #111827 !important;
}

.contentbar {
  background: transparent !important;
}

/* --- Dashboard Stat Cards --- */
.contentbar .card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.contentbar .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2) !important;
}

.contentbar .card .card-body h4 {
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

.contentbar .card .card-body p {
  color: rgba(255, 255, 255, 0.55) !important;
}

.contentbar .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.contentbar .card .card-header .card-title {
  color: #fff !important;
}

/* Dashboard icon styling */
.icondashboard {
  font-size: 42px !important;
  width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Icon color backgrounds */
.icondashboard.text-info {
  background: rgba(23, 162, 184, 0.15) !important;
  color: #17a2b8 !important;
}

.icondashboard.text-warning {
  background: rgba(255, 193, 7, 0.15) !important;
  color: #ffc107 !important;
}

.icondashboard.text-success {
  background: rgba(40, 167, 69, 0.15) !important;
  color: #28a745 !important;
}

.icondashboard.ttext-primary {
  background: rgba(79, 195, 247, 0.15) !important;
  color: var(--text_blue_color, #4fc3f7) !important;
}

/* Revenue report table dark theme */
.contentbar .table {
  color: rgba(255, 255, 255, 0.75) !important;
}

.contentbar .table thead th {
  color: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.contentbar .table td {
  border-color: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.contentbar .table tbody tr {
  background: transparent !important;
}

.contentbar .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}

.contentbar .table-striped tbody tr:nth-of-type(even) {
  background: transparent !important;
}

.contentbar .table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.contentbar .table-bordered,
.contentbar .table-bordered th,
.contentbar .table-bordered td {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Stat card numbers */
.contentbar .card-body h2,
.contentbar .card-body h3 {
  color: #fff !important;
}

/* Action buttons dark theme */
.btn-warning-rgba {
  background: rgba(255, 167, 38, 0.12) !important;
  color: #ffa726 !important;
  border: 1px solid rgba(255, 167, 38, 0.25) !important;
}
.btn-warning-rgba:hover {
  background: rgba(255, 167, 38, 0.22) !important;
  color: #ffb74d !important;
}

.btn-danger-rgba {
  background: rgba(239, 83, 80, 0.12) !important;
  color: #ef5350 !important;
  border: 1px solid rgba(239, 83, 80, 0.25) !important;
}
.btn-danger-rgba:hover {
  background: rgba(239, 83, 80, 0.22) !important;
  color: #e57373 !important;
}

.btn-primary-rgba {
  background: rgba(79, 195, 247, 0.12) !important;
  color: #4fc3f7 !important;
  border: 1px solid rgba(79, 195, 247, 0.25) !important;
}
.btn-primary-rgba:hover {
  background: rgba(79, 195, 247, 0.22) !important;
  color: #81d4fa !important;
}

/* Badge dark theme */
.badge-info {
  background: rgba(79, 195, 247, 0.15) !important;
  color: #4fc3f7 !important;
}
.badge-warning {
  background: rgba(255, 167, 38, 0.15) !important;
  color: #ffa726 !important;
}
.badge-danger {
  background: rgba(239, 83, 80, 0.15) !important;
  color: #ef5350 !important;
}
.badge-success {
  background: rgba(102, 187, 106, 0.15) !important;
  color: #66bb6a !important;
}

/* Alert inside dark theme */
.contentbar .alert-danger {
  background: rgba(239, 83, 80, 0.1) !important;
  border-color: rgba(239, 83, 80, 0.2) !important;
  color: #ef5350 !important;
}

/* Text muted on dark */
.contentbar .text-muted {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* DataTable dark overrides */
.contentbar .dataTables_wrapper .dataTables_length label,
.contentbar .dataTables_wrapper .dataTables_filter label,
.contentbar .dataTables_wrapper .dataTables_info,
.contentbar .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: rgba(255, 255, 255, 0.6) !important;
}

.contentbar .dataTables_wrapper .dataTables_filter input,
.contentbar .dataTables_wrapper .dataTables_length select {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 6px !important;
}

/* All native select dropdowns & option elements - dark theme */
.contentbar select,
.contentbar select.form-control,
.rightbar select {
  background: #1a2035 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.contentbar select option,
.contentbar select.form-control option,
.rightbar select option {
  background: #1a2035 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 8px !important;
}

.contentbar select option:checked,
.rightbar select option:checked {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
}

/* Bootstrap dropdown menus in content area */
.contentbar .dropdown-menu {
  background: #1a2035 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.contentbar .dropdown-menu .dropdown-item,
.contentbar .dropdown-menu a {
  color: rgba(255, 255, 255, 0.7) !important;
}

.contentbar .dropdown-menu .dropdown-item:hover,
.contentbar .dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

.contentbar .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: 6px !important;
}

/* Admin form controls dark theme */
.contentbar .form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px !important;
}

.contentbar .form-control:focus {
  border-color: var(--text_blue_color, #4fc3f7) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15) !important;
}

.contentbar .form-control::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

.contentbar label {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Admin buttons */
.contentbar .btn-primary {
  background: var(--text_blue_color, #4fc3f7) !important;
  border-color: var(--text_blue_color, #4fc3f7) !important;
  border-radius: 8px !important;
}

.contentbar .btn-danger {
  border-radius: 8px !important;
}

.contentbar .btn-success {
  border-radius: 8px !important;
}

/* Select2 dark theme */
.contentbar .select2-container--default .select2-selection--single {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}

.contentbar .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: rgba(255, 255, 255, 0.8) !important;
}

.select2-dropdown {
  background: #1a2035 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.select2-results__option {
  color: rgba(255, 255, 255, 0.7) !important;
}

.select2-results__option--highlighted {
  background: rgba(79, 195, 247, 0.15) !important;
  color: #fff !important;
}

/* Admin general text colors */
.contentbar h1, .contentbar h2, .contentbar h3,
.contentbar h4, .contentbar h5, .contentbar h6 {
  color: #fff !important;
}

.contentbar p {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Switchery dark background fix */
.contentbar .switchery {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Admin page title / header area */
.page-title {
  color: #fff !important;
}

/* Dashboard chart containers — transparent bg for dark theme */
canvas {
  background: transparent !important;
}

.card .chart-container,
.card .chartjs-render-monitor,
.card canvas {
  background: transparent !important;
}

/* Chart card headers */
.card .card-header h5.card-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Highcharts container override (if any remain) */
.highcharts-background {
  fill: transparent !important;
}

.highcharts-title,
.highcharts-axis-title {
  fill: rgba(255, 255, 255, 0.6) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.highcharts-axis-labels text {
  fill: rgba(255, 255, 255, 0.45) !important;
}

.highcharts-grid-line {
  stroke: rgba(255, 255, 255, 0.06) !important;
}

/* Modal dark theme — all modals (delete, bulk delete, etc.) */

/* Hide ALL old per-page delete modals — centralized overlay replaces them */
.modal[id*="delete"],
.modal[id*="Delete"],
.modal.delete-modal,
.modal.bd-example-modal-sm {
  display: none !important;
  visibility: hidden !important;
}

/* Remove slide animation — appear instantly */
.modal.fade .modal-dialog {
  transform: none !important;
  transition: none !important;
}

.modal-content {
  background: #1a2035 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Dark backdrop */
.modal-backdrop.show {
  opacity: 0.7 !important;
  background: #000 !important;
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 16px 20px !important;
}

.modal-header .modal-title,
.modal-header h5 {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.modal-header .close {
  color: rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-size: 22px !important;
}

.modal-header .close:hover {
  color: #fff !important;
}

.modal-body {
  color: rgba(255, 255, 255, 0.75) !important;
  padding: 20px !important;
}

.modal-body h4 {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.modal-body p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  margin-bottom: 0 !important;
}

.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 14px 20px !important;
}

.modal-footer .btn-secondary,
.modal-footer .btn[data-dismiss="modal"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-weight: 500 !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn[data-dismiss="modal"]:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

.modal-footer .btn-primary,
.modal-footer .btn-danger {
  background: #dc3545 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.modal-footer .btn-primary:hover,
.modal-footer .btn-danger:hover {
  background: #c82333 !important;
}

/* Delete modal header accent */
.delete-modal .modal-header,
.bd-example-modal-sm .modal-header,
#deleteConfirmModal .modal-header {
  background: rgba(220, 53, 69, 0.08) !important;
  border-radius: 14px 14px 0 0 !important;
}

/* Hide old delete-icon circle decoration */
.delete-modal .delete-icon {
  display: none !important;
}

/* Delete modal heading color */
.delete-modal .modal-heading {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* Nav tabs dark theme for admin */
.contentbar .nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.contentbar .nav-tabs .nav-link {
  color: rgba(255, 255, 255, 0.6) !important;
}

.contentbar .nav-tabs .nav-link.active {
  background: transparent !important;
  color: var(--text_blue_color, #4fc3f7) !important;
  border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) transparent !important;
}

/* Pill tabs in admin */
.contentbar .nav-pills .nav-link {
  color: rgba(255, 255, 255, 0.6) !important;
  border-radius: 8px !important;
}

.contentbar .nav-pills .nav-link.active {
  background: var(--text_blue_color, #4fc3f7) !important;
  color: #fff !important;
}

/* Alert overrides in admin */
.contentbar .alert-success {
  background: rgba(40, 167, 69, 0.15) !important;
  border-color: rgba(40, 167, 69, 0.3) !important;
  color: #5dd27a !important;
}

.contentbar .alert-danger {
  background: rgba(220, 53, 69, 0.15) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
  color: #e87c86 !important;
}

.contentbar .alert-info {
  background: rgba(23, 162, 184, 0.15) !important;
  border-color: rgba(23, 162, 184, 0.3) !important;
  color: #5dd2e8 !important;
}

/* ========== GLOBAL WHITE BG FIX — catch all remaining white elements ========== */

/* Tab content / tab pane backgrounds */
.contentbar .tab-content,
.contentbar .tab-pane {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* V-pills vertical tabs */
.contentbar #v-pills-tab .nav-link {
  color: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

.contentbar #v-pills-tab .nav-link.active {
  background: rgba(79, 195, 247, 0.1) !important;
  color: #4fc3f7 !important;
  border-color: rgba(79, 195, 247, 0.3) !important;
}

/* Bootstrap tagsinput (white input box fix) */
.bootstrap-tagsinput {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 6px !important;
  width: 100% !important;
}

.bootstrap-tagsinput input {
  color: rgba(255, 255, 255, 0.8) !important;
  background: transparent !important;
}

.bootstrap-tagsinput .tag {
  background: rgba(79, 195, 247, 0.15) !important;
  color: #4fc3f7 !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
}

/* Fieldset / legend dark theme */
.contentbar fieldset {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
}

.contentbar legend {
  color: rgba(255, 255, 255, 0.7) !important;
  background: transparent !important;
  font-size: 14px !important;
  padding: 0 8px !important;
}

/* Switchery label text */
.contentbar label {
  color: rgba(255, 255, 255, 0.7);
}

/* Card body force transparent for ALL admin cards */
.contentbar .card .card-body {
  background: transparent !important;
}

/* Fix any inline white bg on card elements */
.contentbar .card .card-header {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Typeahead dropdown dark */
.typeahead.dropdown-menu,
.tt-menu {
  background: #1a2035 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.typeahead.dropdown-menu .active,
.tt-suggestion:hover,
.tt-cursor {
  background: rgba(79, 195, 247, 0.12) !important;
  color: #4fc3f7 !important;
}

/* Select2 container white fix */
.select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(79, 195, 247, 0.15) !important;
  color: #4fc3f7 !important;
  border-color: rgba(79, 195, 247, 0.3) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #4fc3f7 !important;
}

/* Any remaining white input backgrounds */
.contentbar input[type="text"],
.contentbar input[type="email"],
.contentbar input[type="password"],
.contentbar input[type="number"],
.contentbar input[type="url"],
.contentbar input[type="search"],
.contentbar input[type="tel"],
.contentbar input[type="date"],
.contentbar input[type="datetime-local"],
.contentbar input[type="time"],
.contentbar textarea,
.contentbar select,
.contentbar .form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.contentbar .form-control:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(79, 195, 247, 0.4) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.1) !important;
}

.contentbar .form-control::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Custom file input */
.contentbar .custom-file-label {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.contentbar .custom-file-label::after {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-left-color: rgba(255, 255, 255, 0.12) !important;
}

/* Jodit editor dark */
.jodit-container,
.jodit-workplace,
.jodit_toolbar,
.jodit-toolbar__box {
  background: #1a2035 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.jodit-wysiwyg {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Quill editor dark */
.ql-toolbar.ql-snow {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.ql-container.ql-snow {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.ql-editor {
  color: rgba(255, 255, 255, 0.8) !important;
}

.ql-toolbar .ql-stroke {
  stroke: rgba(255, 255, 255, 0.5) !important;
}

.ql-toolbar .ql-fill {
  fill: rgba(255, 255, 255, 0.5) !important;
}

.ql-toolbar .ql-picker-label {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Icon picker dark */
.iconpicker-popover {
  background: #1a2035 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.iconpicker-popover .popover-title {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.iconpicker-item {
  color: rgba(255, 255, 255, 0.6) !important;
}

.iconpicker-item:hover,
.iconpicker-item.iconpicker-selected {
  background: rgba(79, 195, 247, 0.12) !important;
  color: #4fc3f7 !important;
}