/* Generel container */
.pb-calculator { 
    max-width: 600px; 
    margin: 20px auto; 
    padding: 20px; 
    border: 1px solid #ccc; 
    font-family: sans-serif; 
    box-sizing: border-box;
}

/* Rækker */
.pb-calculator .pb-row {
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 10px; 
    gap: 10px;
}

/* Venstre kolonne: checkbox, counter osv. */
.pb-calculator .pb-col-left {
    flex: 1;
}

/* Højre kolonne: prisfelt */
.pb-calculator .pb-col-right {
    flex: 0 0 150px; 
}

/* Alle prisfelter */
.pb-calculator .pb-price-input {
    width: 100%;
    max-width: 150px;  /* fast bredde, begrænser udvidelse */
    padding: 6px 10px;
    box-sizing: border-box;
    font-size: 14px;
    text-align: right;  /* tal justeres til højre */
}

/* Read-only felter */
.pb-calculator input[readonly] {
    background-color: #f0f0f0;
    color: #555;
    cursor: not-allowed;
}

/* SEO specifikt */
.pb-calculator .seo-controls {
    display: none; /* skjules indtil checkbox aktiveres */
    margin-top: 5px;
}

/* SEO count span */
.pb-calculator #seo-count {
    margin: 0 5px;
}

/* Besparelse */
.pb-calculator .seo-savings {
    color: green;
    margin-top: 3px;
}

/* H3 og overskrifter */
.pb-calculator h3 {
    margin-top: 20px;
}

/* Formular input generelt */
.pb-calculator input[type=text], 
.pb-calculator input[type=email], 
.pb-calculator input[type=number] {
    width: 100%;
    margin-bottom: 8px;
    padding: 5px;
    box-sizing: border-box;
}

/* Buttons for SEO counter */
.pb-calculator .seo-controls button {
    padding: 2px 8px;
    margin: 0 2px;
    cursor: pointer;
    font-size: 14px;
}
/* Reuse SEO styles for all ads */
.pb-calculator .ad-controls {
    display: none; /* skjules indtil checkbox aktiveres */
    margin-top: 5px;
}

.pb-calculator .ad-count {
    margin: 0 5px;
}

.pb-calculator .ad-savings {
    color: green;
    margin-top: 3px;
}

/* Organiske opslag controls */
.pb-calculator .ad-controls {
    display: none;
    margin-top: 5px;
}
.pb-calculator .ad-count {
    margin: 0 5px;
}

/* Ad controls (Meta / Google Ads) */
.pb-calculator .ad-controls {
  display: none; /* skjult indtil checkbox er aktiv */
  margin-top: 5px;
}

.pb-calculator .ad-count {
  margin: 0 5px;
}


/* Checkbox label styling */
.pb-calculator label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal;
}


/*DIVI MODULE*/
$inline = sprintf(
  'background:%1$s; --pb-hr-color:%2$s; --pb-hr-thickness:%3$s;
   --pb-input-text:%4$s; --pb-input-bg:%5$s;
   --pb-fields-bg:%6$s; --pb-fields-border:%7$s;',
  esc_attr( $this->props['module_background'] ),
  esc_attr( $this->props['hr_color'] ),
  esc_attr( $this->props['hr_thickness'] ),
  esc_attr( $this->props['input_text_color'] ),
  esc_attr( $this->props['input_bg_color'] ),
  esc_attr( $this->props['fields_background'] ),
  esc_attr( $this->props['fields_border_color'] )
);

.pb-calculator {
  background: var(--pb-background);
}

/* HR styling */
.pb-calculator hr {
  border: none;
  border-top: var(--pb-hr-thickness) solid var(--pb-hr-color);
}

/* Alle tekst- og prisfelter */
.pb-calculator .pb-price-input,
.pb-calculator input[type=text],
.pb-calculator input[type=email],
.pb-calculator input[type=number] {
  color: var(--pb-input-text);
  background: var(--pb-input-bg);
  border: 1px solid var(--pb-fields-border);
}

/* Sektion baggrund bag felterne */
.pb-calculator .pb-row {
  background: var(--pb-fields-bg);
}