/* Georgian Fonts admin styles */
:root {
  --primary-blue: #2f51e9;
  --dark-blue: #1a237e;
  --light-blue: #e8eaf6;
  --hover-blue: #3d5afe;
  --border-radius: 8px;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Main container styling */
.wrap {
  max-width: 1200px;
}

.wrap h1 {
  color: #1946F2;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Preview box styling */
.geofonts-preview-box {
  background-color: #fff;
  border-radius: var(--border-radius);
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: var(--box-shadow);
  border: none;
}

.geofonts-preview-box h3 {
  margin-top: 0;
  color: #1946F2;
  font-weight: 500;
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
}

.preview-content {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  border: 1px solid #eee;
}

.preview-controls {
  margin-bottom: 15px;
}

#geofonts-preview-text {
  line-height: 1.6;
}

/* Select inputs styling */
#geofonts-preview-font,
.geofonts-element-select {
  min-width: 300px;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  border: 1px solid #ddd;
  height: 40px;
}

#geofonts-preview-font:focus,
.geofonts-element-select:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 1px var(--primary-blue);
  outline: none;
}

/* Table styling */
.form-table th {
  padding-top: 15px;
  padding-bottom: 15px;
  color: #333;
  font-weight: 500;
}

.form-table td {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Description text */
p.description {
  color: #666;
  font-style: normal;
  margin-top: 8px;
}

/* Submit button styling */
.wp-core-ui .button-primary {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
  border-radius: var(--border-radius);
  padding: 6px 15px;
  height: auto;
  font-weight: 500;
  text-shadow: none;
  box-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
  background-color: var(--hover-blue);
  border-color: var(--hover-blue);
  box-shadow: var(--box-shadow);
}

/* Radio buttons styling */
input[type=radio] {
  border: 1px solid #ddd;
}

input[type=radio]:checked::before {
  background-color: var(--primary-blue);
}

/* Element preview panel */
.geofonts-element-preview-panel {
  margin-top: 30px;
  padding: 24px;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  border: none;
}

.geofonts-element-preview-panel h2 {
  margin-top: 0;
  color: #1946F2;
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.geofonts-element-preview {
  margin-bottom: 24px;
  padding: 15px;
  border-radius: var(--border-radius);
  background-color: #f9f9f9;
  border: 1px solid #eee;
}

.geofonts-element-preview label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}

/* Settings tabs (if needed) */
.nav-tab-wrapper {
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}

.nav-tab {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  margin-right: 6px;
  padding: 10px 15px;
  font-weight: 500;
}

.nav-tab-active {
  background-color: white;
  border-bottom: 1px solid white;
  color: var(--primary-blue);
}

/* Settings error/notice styling */
.notice,
div.error,
div.updated {
  border-radius: var(--border-radius);
  border-left-width: 4px;
}

.notice-success,
div.updated {
  border-left-color: #46b450;
}

.notice-error,
div.error {
  border-left-color: #dc3232;
}

/* Mobile responsiveness */
@media screen and (max-width: 782px) {
  .form-table td input[type=text],
  .form-table td select {
    width: 100%;
  }
}