.fp-checkbox-container {

  margin-bottom: 10px;

}



textarea {

  height: 100%;

  width: 250px;

  min-height: 650px;

  max-height: 650px;

}



td textarea {

  height: 100px;

  min-height: 100px;

}



button {

  margin-top: 20px;

}



h2 {

  margin-bottom: 20px;

}



#rContainer {

  display: flex;

  flex-direction: column;

}



.keywordContainer {

  display: flex;

  flex-direction: row;

}



input[type='button'] {

  width: auto;

  margin-right: 15px;

}



#loading {

  display: none;

}



#blogInputs {

  display: flex;

  flex-direction: row;

}



#blogInputs input {

  margin-right: 15px;

}



#newBlog {

  padding: 15px;

}



.err-msg{

   color:red;

}

.empty_data{

  justify-content: space-around;

  display: flex

}



.pagination {

    text-align: center;

    padding: 20px;

    margin-top: 40px;

    border-top: 1px solid #ccc;

    width: 100%;

    clear: both;

    display: flex;

    justify-content: flex-end;

    flex-direction: row;

}



.pagination .page-numbers {

    display: inline-block;

    padding: 5px 10px;

    margin: 0 5px;

    border: 1px solid #ccc;

    border-radius: 3px;

    background-color: #f9f9f9;

}



.pagination .page-numbers.current {

    background-color: #0073aa;

    color: #fff;

}

#loader {
   display: none; 
   position: fixed; 
   top: 60%; 
   left: 50%;
}
.characterCount {
  display: flex; 
  flex-direction: row-reverse;
}
.cancelBtnCss {
  display: flex;
  flex-direction: row;
}

.submitBtnCss{
  margin-top: 20px;
  width: auto;
  margin-right: 15px;
}

.editor-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.editor {
  flex: 1;
  padding: 20px;
  height: 100%;
}
.preview {
  flex: 1;
  padding: 20px;
  border-left: 1px solid #ccc; /* Add a border between editor and preview */
}
.preview img {
  max-width: 100%; /* Ensure images don't exceed their container width */
  height: auto; /* Maintain aspect ratio */
}
.editor-controls {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.editor-controls select {
  flex: 1;
  margin-right: 10px;
}
.editor-controls button {
  flex-shrink: 0;
}
#editor {
  height: 300px;
}
#ImgEditorTag{
  width: 70px;
  height:70px;
}
#imgEditor{
   width: 70px;
  height:70px;
}
#seoDataTable {
    border-collapse: collapse;
}

.ppc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.ppc-header h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a2e;
}
.ppc-header .badge-live {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.ppc-date-range {
    font-size: 0.85rem;
    color: #666;
}
.ppc-date-range span {
    font-weight: 600;
    color: #333;
}

/* Metric Cards */
.metric-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 32px;
}
.metric-card {
    background: #fff;
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.metric-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
.metric-card .card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 14px;
}
.metric-card .card-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #888;
    margin-bottom: 6px;
}
.metric-card .card-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1;
    margin-bottom: 8px;
}
.metric-card .card-change {
    font-size: 0.8rem;
    font-weight: 500;
    color: #888;
}
.metric-card .card-change.positive { color: #2e7d32; }
.metric-card .card-change.negative { color: #c62828; }

.icon-clicks    { background: #e3f2fd; color: #1565c0; }
.icon-conv      { background: #f3e5f5; color: #6a1b9a; }
.icon-cpc       { background: #fff3e0; color: #e65100; }
.icon-cpa       { background: #e8f5e9; color: #2e7d32; }

/* Campaign Table */
.section-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #f0f0f0;
    margin-bottom: 24px;
}
.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1565c0;
    display: inline-block;
}

.ppc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.ppc-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    border-bottom: 2px solid #f0f0f0;
    white-space: nowrap;
}
.ppc-table tbody tr {
    border-bottom: 1px solid #f7f7f7;
    transition: background 0.15s;
}
.ppc-table tbody tr:hover {
    background: #fafafa;
}
.ppc-table tbody td {
    padding: 12px 14px;
    color: #333;
    vertical-align: middle;
}
.ppc-table tbody td:first-child {
    font-weight: 600;
    color: #1a1a2e;
}
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.status-enabled  { background: #e8f5e9; color: #2e7d32; }
.status-paused   { background: #fff8e1; color: #f57f17; }
.status-removed  { background: #ffebee; color: #c62828; }

.metric-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.metric-bar {
    flex: 1;
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
    max-width: 120px;
}
.metric-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #1565c0, #42a5f5);
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 6px;
    display: inline-block;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text  { height: 14px; width: 80px; }
.skeleton-value { height: 32px; width: 100px; }
.skeleton-row td { padding: 12px 14px; }

/* Load button */
#btn-load-ppc {
    font-size: 0.9rem;
    font-weight: 600;
}
#btn-load-ppc:hover { background: #0d47a1; }
#btn-load-ppc:disabled { background: #90afd4; cursor: not-allowed; }
#btn-load-ppc .spinner-border {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.no-data-state {
    text-align: center;
    padding: 48px 24px;
    color: #aaa;
}
.no-data-state .icon { font-size: 2.5rem; margin-bottom: 12px; }
.no-data-state p { margin: 0; font-size: 0.9rem; }

.error-alert {
    display: none;
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.875rem;
}

/* marketing performance report */

 .report-output-wrap {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 32px 36px;
    margin-top: 24px;
}
.report-output-wrap h1 { font-size: 1.6rem; margin-bottom: 16px; }
.report-output-wrap h2 { font-size: 1.25rem; margin-top: 24px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 6px; }
.report-output-wrap h3 { font-size: 1.05rem; margin-top: 16px; margin-bottom: 8px; }
.report-output-wrap table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.report-output-wrap th, .report-output-wrap td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; font-size: 0.9rem; }
.report-output-wrap th { background: #f5f5f5; font-weight: 600; }
.report-output-wrap ul { padding-left: 20px; }
.report-output-wrap li { margin-bottom: 4px; }
.report-output-wrap p { margin-bottom: 10px; line-height: 1.6; }
.report-empty-state { text-align: center; padding: 60px 20px; color: #888; }
.report-empty-state .icon { font-size: 3rem; margin-bottom: 12px; }
.report-generated-at { font-size: 0.85rem; color: #888; margin-top: 8px; }