/* File: tabs.css */

.tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    margin-bottom: 0;
    border-bottom: none;
    gap: 2px;
}

.tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    background-color: blue;
    color: white;
    padding: 8px 14px 9px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    border-radius: 8px 8px 0 0;
    border: 1px solid white;
    border-bottom: none;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 0 0 auto;
    min-width: 72px;
    box-sizing: border-box;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
}

.tab[data-tab="postcard_ads"] {
    min-width: 90px;
}

.tab-my {
    display: block;
    font-size: 13px;
    line-height: 1.1;
}

.tab-label {
    display: block;
    font-size: 16px;
    line-height: 1.15;
}

.tab-active {
    background-color: white;
    color: black;
    border-color: blue;
    border-bottom: 2px solid white;
    position: relative;
    z-index: 2;
    margin-bottom: -1px;
}

/* Container for the tab bar */
.nav-tab-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  border-bottom: none; /* remove WP default line */
  gap: 0;
  margin-bottom: 0;
}

/* Tab buttons */
.nav-tab {
  background-color: #0073aa; /* WP blue */
  color: white;
  padding: 4px 7px;
  margin-left: .1em;
  font-size: 16px;
  font-weight: 300;
  border-radius: 10px 10px 0 0;
  border: 1px solid white;
  border-bottom: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  flex: 0 0 auto;
  text-align: center;
  white-space: nowrap;
}

/* Active tab override */
.nav-tab-active {
  background-color: white;
  color: black;
  border-color: #0073aa;
  border-bottom: 2px solid white;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}

/* Tab content wrapper */
.tab-contents {
  border: 1px solid lightgray;
  padding: 20px;
  border-radius: 0 0 10px 10px;
  background: white;
  margin-top: -1px;
  z-index: 1;
  position: relative;
}

/* Each content block */
.tab-content {
  display: none;
}

.tab-content.tab-content-active {
  display: block;
}


/* Shared tab-like subtabs that should NOT trigger main dashboard tab JS */
.ll-subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  margin-bottom: 0;
  gap: 0;

  border-bottom: 1px solid #111;
}

.ll-subtab {
  background-color: blue;
  color: white !important;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 10px 10px 0 0;
  border: 1px solid white;
  border-bottom: none;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 0 0 auto;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}

.ll-subtab.tab-active,
.ll-subtab.is-active {
  background-color: white;
  color: black !important;
  border-color: #111;
  border-bottom: 1px solid white;
  position: relative;
  z-index: 10;
}

.ll-subtab.tab-active::after,
.ll-subtab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: white;
  z-index: 20;
}

/* Bordered subtab panel */
.ll-subtab-panel {
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  border-top: none;

  padding: 28px 24px 32px;
  margin-bottom: 24px;
  margin-top: 0;

  position: relative;
  z-index: 1;
}

.tab:hover,
.tab:focus,
.tab:active {
    text-decoration: none;
}

.tab:not(.tab-active):hover,
.tab:not(.tab-active):focus,
.tab:not(.tab-active):active {
    color: white;
}

.tab:not(.tab-active):hover .tab-my,
.tab:not(.tab-active):hover .tab-label,
.tab:not(.tab-active):focus .tab-my,
.tab:not(.tab-active):focus .tab-label {
    color: white;
}

.tab.tab-active:hover,
.tab.tab-active:focus,
.tab.tab-active:active {
    color: black;
    background-color: white;
}

.tab.tab-active:hover .tab-my,
.tab.tab-active:hover .tab-label,
.tab.tab-active:focus .tab-my,
.tab.tab-active:focus .tab-label {
    color: black;
}