/*
 Theme Name:   The Data Lock
 Theme URI:    https://thedatalock.com/
 Description:  The Data Lock Child Theme
 Template:     spin
 Version:      1.0
 Tags:         flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
 Text Domain:  spin
*/



/* =Child-Theme customization starts here
------------------------------------------------------------ */
table.pick-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    position: relative;
    font-family: 'Liberation Sans', sans-serif;
    padding-top:33px;
}

/* Table Header */
.pick-history-table thead {
    background-color: #2EC39F;
}

.pick-history-table thead th {
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    padding: 12px 8px;
    color: white;
    border-bottom: 2px solid #dcdcdc;
    background-color: transparent;
}

/* Table Cells */
.pick-history-table tr td {
    text-align: center;
    background-color: transparent !important;
    padding: 10px 3px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 16px;
}

/* Set width on 3rd to 9th td only */
/* .pick-history-table tr td:nth-child(3),
.pick-history-table tr td:nth-child(4),
.pick-history-table tr td:nth-child(5),
.pick-history-table tr td:nth-child(6),
.pick-history-table tr td:nth-child(7),
.pick-history-table tr td:nth-child(8),
.pick-history-table tr td:nth-child(9) {
    width: 102px;
} */

/* Result Colors */
span.all-column-style.result-win {
    color: #3BD065;
    font-weight: 600;
}

span.all-column-style.result-lose {
    color: #E63034;
    font-weight: 600;
}

/* Date Column */
span.date-column-style.all-column-style {
    color: #343A4380;
    background-color: transparent;
}

/* Match Column */
span.match-column-style.all-column-style {
    background-color: transparent;
    text-align: left;
}

/* General Cell Content Styling */
span.all-column-style {
    display: inline-block;
    font-weight: 400;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    color: #1E2129;
    background-color: #F0F3F6;
    padding: 0px 10px;
    border-radius: 8px;
    width: 100%;
}

/* Optional: hide select container */
/* .select_container {
    display: none;
} */

/* Optional: table background decoration */
.pick-history-table:before {
    content: '';
    position: absolute;
    background-image: url(/wp-content/uploads/2025/07/Background-7.png);
    width: 100%;
    height: 33px;
    background-repeat: no-repeat;
    top: 0px;
    left: 0;
    background-size: cover;
}
.form-column #style-4.mc4wp-form .mc4wp-form-fields button {
    color: #1E2129 !important;
    background-color: #2EC39F !important;
    padding: 1px 26px !important;
    width:auto;
    height:auto;
    font-size: 18px;
    border:2px solid #2EC39F !important;
}
.form-column #style-4.mc4wp-form .mc4wp-form-fields button:hover {
    background-color: transparent !important;
    padding: 1px 26px !important;
    
}
.form-column #style-4.mc4wp-form .mc4wp-form-fields button:before {
    content:"";
    width:0px;
    height:0px;
}
.sc_blogger_default.sc_blogger_default_classic_time_2 .post_meta.sc_blogger_item_meta.post_meta_categories .post_meta_item.post_categories a {
    background-color: #2EC39F !important;
}
.post_layout_band .post_content_wrap .post_meta_item.post_categories a {
    background-color: #2EC39F !important;
}
.sc_blogger_list.sc_blogger_list_with_image .post_meta .post_meta_item.post_categories a{
    color: #2EC39F !important;
}
.footer_wrap .sc_layouts_column .form-column .form-full {
    width: 100% !important;
}
footer .form-column #style-4.mc4wp-form .mc4wp-form-fields button:hover {
    background-color: transparent!important;
    padding: 1px 26px!important;
    color:#fff !important;
} 
#style-4.mc4wp-form .mc4wp-form-fields input[type="email"] {
    border: 1px solid;
}
.home .top_panel, .home [class*="scheme_"].top_panel {
    background-color: transparent !important;
}
.top_panel, [class*="scheme_"].top_panel {
    background-color: #1E2129 !important;
}
select.fighter-row-switch.always-visible.filled.fill_inited {
    border: none;
    padding: 8px 0px;
    padding-right: 0px !important;
    text-align: center;
    color: #000;
    min-width: 110px;
}
.select_container:after {
    content: '\e828';
    font-family: "fontello";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 7px;
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
    margin-top: -0.5em;
    pointer-events: none;
    cursor: pointer;
    color: var(--theme-color-input_text);
}

.select_container {
    border: none;
    background: #F0F3F6;
    border-radius: 8px;
    outline: none;
}
.font-style span {
    margin: 0px;
    font-size: 24px;
}
.post_meta_item.post_date a {
    color: #2EC39F !important;
}

/* Mobile tweaks */
@media screen and (max-width: 768px) {
    .pick-history-table th,
    .pick-history-table td {
        font-size: 13px;
        padding: 8px 10px;
    }
.footer-style .elementor-icon-list-text {
    text-align: center;
}
.elementor-reverse-mobile>.elementor-container>:first-child {
    order: 1;
}
.form-column #style-4.mc4wp-form .mc4wp-form-fields button {
    padding: 1px 10px !important;

}
}
/* Wrapper for scroll on small devices */
.responsive-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table defaults */
.pick-history-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px; /* ensures it scrolls horizontally on mobile */
}

.pick-history-table th,
.pick-history-table td {
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap; /* prevent line break inside cells */
}
/* pick card style */
.card-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.card {
  position: absolute;
  width: 69.2%;
  height: 94%;
  border-radius: 20px;
  padding: 50px;
  color: white;
  background-color: var(--bg, #2bbf9c);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
/*   z-index: 1;
  opacity: 1; */
  text-align: center;
  overflow: hidden;
  border: none !important;
}

.card h2 {
    font-family: "Inter", Sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 30px;
    letter-spacing: 1px;
    vertical-align: middle;
    text-transform: capitalize;
    color: #fff;
    text-align: left;
    margin-bottom: 25px;
}

.card .btn {
  background: transparent;
  border: 2px solid white;
  padding: 16px 32px;
  border-radius: 30px;
  color: white;
  transition: background 0.3s;
  text-decoration: none;
  display: inline-block;
  width: 220px;
  font-family: "Inter", Sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.card .btn:hover {
  background:#fff;
  color:#000;
}

/* State classes */
.card.left {
  transform: translateX(-320px);
/*   z-index: 0; */
/*   opacity: 0.7; */
}

.card.center {
  transform: translateX(0);
 z-index: 2;
/*   opacity: 1; */ 
}

.card.right {
  transform: translateX(320px);
/*   z-index: 0; */
/*   opacity: 0.7; */
}

/* Optional background colors by index */
.card:nth-child(1) {--bg: #365850;}
.card:nth-child(2) { --bg: #84f0da; }
.card:nth-child(3) { --bg: #2bbf9c; }

.fighter-fixer-overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 15, 0.95);
    border-radius: 20px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    transition: bottom 0.4s ease;
    z-index: 10;
}

.fighter-fixer-overlay.active {
    bottom: 0;
}

.fighter-fixer {
    display: flex;
    justify-content: space-evenly;
    gap: 40px;
}

.fighter-box {
    text-align: center;
}

.fighter-box .fighter-img {
    border: 2px solid var(--bg); /* Use the same CSS variable used in .card */
    border-radius: 50%;
    width: 130px;
    height: 130px;
    object-fit: cover;
}


.fighter-name {
    margin-top: 20px;
    margin-bottom: 50px;
    color: #fff;
    font-family: "Inter", Sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
}

.fighter-stat {
    color: #ccc;
    font-family: "Inter", Sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 1px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    margin-bottom: 15px;
}
.fighter-stat strong {
    color: #fff;
}

.close-fighter {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 80px;
    font-weight: 200;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}

/* pick card style end here  */


.same-col p {
    margin:0px;
}
.same-col .wpcf7-form-control{
    border: 1px solid #B9B9B9;
    padding: 16px 15px;
    border-radius: 0px;
}
.message-col .wpcf7-form-control {
    height: 105px;
}
.action .form-action .submit-btn {
    background-color: #2EC39F !important;
    padding: 21px 33px !important;
    font-size: 18px;
    border-radius: 300px;
    color: #1E2129;
}
.action .form-action .submit-style-in:before {
    display: none;
}
.menu-item a span {
    font-size: 16px !important;
}
.menu-item a {
    margin: 0px 15px;
}
/* Default: Hide both (just in case) */
.mobile-responsive-banner,
.desktop-banner {
  display: none;
}
/* hide notice */
.sbi-critical-notice {
    display: none;
}
/* Show mobile banner on 1024px and below */
@media (max-width: 784px) {
  .mobile-responsive-banner {
    display: block !important;
  }
}
/* Show desktop banner on above 1024px */
@media (min-width: 785px) {
  .desktop-banner {
    display: block !important;
  }
}
@media (max-width: 1744px) {
#rrzm_19483 rs-row-wrap.rs-parallax-wrap.slider-row-wrap {
    margin-left: 4% !important;
}
}
@media (max-width: 1536px) {
#rrzm_19483 rs-row-wrap.rs-parallax-wrap.slider-row-wrap {
    margin-left: 8% !important;
}
}
@media (max-width: 1280px) {
.card-container {
    max-width: 860px !important;
}
#rrzm_19483 rs-row-wrap.rs-parallax-wrap.slider-row-wrap {
    margin-left: 0% !important;
}
}
@media (max-width: 1024px) {
  .fighter-name {
      margin: 10px !important;
      font-size: 24px !important;
  }
  .fighter-stat {
      font-size: 14px !important;
  }
  .fighter-box .fighter-img {
      width: 100px !important;
      height: 100px !important;
  }
  .card-container {
      max-width: 500px !important;
      height: 500px !important;
  }
}
@media (max-width: 992px) {
  .card-container {
    flex-direction: column;
    height: 1500px !important;
    max-width: 100% !important;
  }

  .card {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    width: 100%;
    margin: 20px 0;
  }
}
@media (max-width: 767px) {
  .card h2 {
      font-size: 28px !important;
      text-align: center !important;
  }
  .card .btn {
      text-align: center !important;
      margin: 0 auto !important;
  }
  .card {
      justify-content: center !important;
  }
  .page-id-44490 .action .form-action .submit-btn {
      padding: 21px 33px !important;
  }
  .same-col {
    padding: 0px 15px 0px 0px;
    }
}