/* Các font được giả định đã có sẵn trong thư thư mục 'fonts' */
@font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-Bold.woff2') format('woff2'), url('fonts/GoogleSans-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-Medium.woff2') format('woff2'), url('fonts/GoogleSans-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-Regular.woff2') format('woff2'), url('fonts/GoogleSans-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
    --primary-color: #06a955; /* Màu xanh lá chủ đạo */
    --secondary-color: #007bff; /* Màu xanh dương phụ */
    --background-light: #f9f9f9;
    --text-color: #111;
    --light-text-color: #555;
    --border-color: #ccc;
    --shadow-color: rgba(0,0,0,0.06);
    --border-radius-lg: 20px;
    --border-radius-md: 10px;
    --border-radius-sm: 8px;
}

body {
  margin: 0;
  font-family: 'Google Sans', 'Segoe UI', sans-serif;
  background: radial-gradient(circle at center, #eaf4ff, #f9f9f9);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  opacity: 0;
  transition: opacity 1s ease;
  font-size: 14px;
}
body.loaded {
  opacity: 1;
}
canvas#bgCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: transparent;
}
header {
  text-align: center;
  padding: 32px 20px 16px;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.6s ease;
}
body.loaded header {
  opacity: 1;
  transform: translateY(0);
}
header img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 16px;
}
header h1 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
}
.main-content { flex: 1; }
.grid {
  max-width: 1200px; /* Increased max-width for two columns */
  margin: 10px auto 40px auto;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
body.loaded .grid {
  opacity: 1;
  transform: translateY(0);
}

/* New styles for two-column layout */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 20px; /* Space between columns */
    align-items: start; /* Align items to the top of their cells */
}

.two-column-layout .tool-card {
    box-shadow: 0 5px 15px var(--shadow-color);
    background: rgba(255,255,255,0.95);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    text-align: center; /* Center content within each tool-card */
}

/* Ensure parameter column takes full width of its grid cell */
.two-column-layout .params-column {
    /* No specific width needed, it takes 1fr */
}

/* Ensure preview column takes full width of its grid cell */
.two-column-layout .preview-column {
    /* No specific width needed, it takes 1fr */
}

.tool-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
}
.tool-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px; /* More space below title */
}
.form-group {
    margin-bottom: 16px;
    text-align: left; /* Căn lề trái cho nhãn/input trong nhóm */
}
.form-group label {
    display: block; /* Đặt nhãn trên một dòng riêng */
    margin-bottom: 8px;
    font-weight: 500;
}
.form-group input[type="url"],
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"], /* Added password type */
.form-group textarea,
.form-group select {
  width: 100%; /* Điều chỉnh để có khoảng đệm */
  box-sizing: border-box;
  padding: 12px;
  font-size: 16px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
}
.form-group textarea {
    resize: vertical; /* Cho phép thay đổi kích thước theo chiều dọc */
    min-height: 80px;
}

/* Updated to use CSS Grid for inner sections */
.color-options-row, .shape-size-row, .logo-options-row { /* Added .logo-options-row */
  display: grid; /* Change to grid */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 20px; /* Gap between grid items */
  margin-bottom: 26px; /* Space below the row */
  align-items: start; /* Align items to the bottom of their cells */
}
/* New style for logo upload row */
.logo-upload-section { /* Renamed from .logo-upload-row for better semantic */
    margin-bottom: 20px;
    text-align: left; /* Align content to the left within this row */
}

.option-group {
  display: flex;
  flex-direction: column; /* Xếp chồng nhãn và input */
  align-items: flex-start; /* Căn nội dung theo chiều dọc */
  width: 100%; /* Ensure it fills the grid cell */
}
.option-group label {
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color);
}
.option-group input[type="color"], .option-group input[type="range"] {
    width: 100%;
    box-sizing: border-box;
}
/* Styles for circular color pickers */
.custom-color-picker-wrapper {
    position: relative;
    width: 48px; /* Fixed size for the circular swatch */
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    overflow: hidden; /* Ensure anything outside the circle is hidden */
}

.custom-color-picker-wrapper:hover {
    border-color: var(--primary-color);
}

.custom-color-picker-wrapper .color-swatch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none; /* Allows clicks to pass through to the input */
    /* Initial background color will be set by JS or inline style */
}

/* Fixed dropdown arrow */
select {
  flex: 1;
  padding: 12px;
  font-size: 16px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  width: 100%;
  appearance: none; /* Remove default arrow */
  background-color: white; /* Ensure background is white */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); /* Simple down arrow */
  background-repeat: no-repeat;
  background-position: right 12px center; /* Position the arrow */
  background-size: 10px; /* Size the arrow */
  padding-right: 30px; /* Make space for the arrow */
  cursor: pointer; /* Indicate it's clickable */
  font-family: 'Google Sans', 'Segoe UI', sans-serif;
}

/* Improved Slider Styles */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px; /* Thicker track */
    background: #e0e0e0; /* Lighter background for track */
    border-radius: 5px;
    outline: none;
    margin: 10px 0px 13px 0; /* Add some vertical margin */
    padding-top: 4px;
    transition: background 0.2s;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px; /* Larger thumb */
    height: 24px; /* Larger thumb */
    border-radius: 50%;
    background: var(--primary-color);
    cursor: grab; /* Better cursor */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for thumb */
    margin-top: -7px; /* Center thumb vertically on track: (track_height - thumb_height) / 2 = (10 - 24) / 2 = -7 */
    border: 2px solid #fff; /* White border for contrast */
    transition: background 0.3s, box-shadow 0.3s, width 0.3s, height 0.3s; /* Add transition for hover effect */
}
input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    background: #04824a; /* Darker when active */
    box-shadow: 0 4px 10px rgba(6, 169, 85, 0.4);
}
/* Hover effect for Webkit browsers */
input[type="range"]:hover::-webkit-slider-thumb {
    width: 35px; /* Slightly larger on hover */
    height: 35px; /* Slightly larger on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* More prominent shadow on hover */
}


input[type="range"]::-moz-range-thumb {
    width: 24px; /* Larger thumb */
    height: 24px; /* Larger thumb */
    border-radius: 50%;
    background: var(--primary-color);
    cursor: grab; /* Better cursor */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for thumb */
    border: 2px solid #fff; /* White border for contrast */
    /* Removed margin-top for Firefox, as it generally centers the thumb vertically */
    transition: background 0.3s, box-shadow 0.3s, width 0.3s, height 0.3s; /* Add transition for hover effect */
}
input[type="range"]::-moz-range-thumb:active {
    cursor: grabbing;
    background: #04824a; /* Darker when active */
    box-shadow: 0 4px 10px rgba(6, 169, 85, 0.4);
}
/* Hover effect for Firefox */
input[type="range"]:hover::-moz-range-thumb {
    width: 28px; /* Slightly larger on hover */
    height: 28px; /* Slightly larger on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* More prominent shadow on hover */
}
/* Base styles for all "button-like" elements */
.btn-base {
  padding: 12px 20px;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  width: auto;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Thêm shadow cho nút */
}

/* Style for the main action button (Download) */
.btn-primary {
  background: var(--primary-color); /* Green */
}
.btn-primary:hover {
  background: #04824a; /* Darker Green */
  transform: translateY(-2px); /* Nâng nhẹ lên */
  box-shadow: 0 4px 10px rgba(6, 169, 85, 0.3); /* Shadow lớn hơn */
}

.btn-secondary {
    background-color: #6c757d; /* Màu xám */
    color: white;
}
.btn-secondary:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3);
}

/* File upload wrapper */
.file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px; /* Reduced margin here, moved to parent .logo-upload-section */
    width: 100%;
}

/* Styles for the integrated file upload input */
.file-upload-wrapper .file-upload-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: #fcfcfc;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
    cursor: pointer;
    overflow: hidden; /* Để xử lý text ellipsis */
    flex-grow: 1; /* Cho phép nó mở rộng */
    min-width: 150px; /* Đảm bảo chiều rộng tối thiểu */
}

.file-upload-wrapper .file-upload-input i {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.file-upload-wrapper .file-upload-input .file-name {
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--light-text-color);
}

.file-upload-wrapper .file-upload-input:hover {
    border-color: var(--primary-color);
}

/* Clear logo button specific style */
#clearLogoBtn {
    padding: 12px 12px;
    font-size: 1rem;
    /* Adjust margin-top if needed to align with other buttons/inputs */
    min-width: unset; /* Remove min-width inherited from btn-base */
    margin-top: 0;
    margin-bottom: 8px;
}


#qr-code {
  margin-top: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  text-align: center; /* Center the QR code and button */
}
#qr-code.show {
  opacity: 1;
  transform: translateY(0);
}
#qr-canvas {
  max-width: 368px;
  height: auto;
  border-radius: var(--qr-border-radius, 0px); /* Use CSS variable for dynamic border-radius */
  box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Add a subtle shadow to the QR code */
  border: 1px solid #d7d7d7;
}
footer {
  text-align: center;
  margin: 10px;
  border-top: 1px solid #ccc;
  font-size: 14px;
  padding: 15px 0px;
  line-height: 1;
   /* Add some space above the footer */
}
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-nav li {
  margin: 0 10px;
}
.footer-nav a {
  color: var(--light-text-color);
  text-decoration: none;
  font-weight: 500;
}
.footer-nav a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

/* Message styles */
.message {
    padding: 10px 15px;
    border-radius: var(--border-radius-sm);
    margin-top: 15px;
    font-size: 0.95rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease-out;
    text-align: center;
}
.message.show {
    opacity: 1;
    transform: translateY(0);
}
.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.message.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/* Hide content type divs by default */
.content-type-fields > div {
    display: none;
}
/* Icon animation for download button */
#downloadBtn i {
    transition: transform 0.3s ease;
}
#downloadBtn:hover i {
    transform: translateY(-3px);
}
footer a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

footer a:hover {
  color: #04824a;
  text-decoration: underline;
}

.footer-nav a {
  color: var(--light-text-color);
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
  font-weight: 500;
}

.footer-nav a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}
/* Responsive adjustments */
@media (max-width: 768px) { /* Adjust breakpoint for two-column layout */
    .two-column-layout {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
}
@media (max-width: 500px) { /* Existing breakpoint for inner two-column groups */
    .color-options-row, .shape-size-row { /* Apply to new rows as well */
        grid-template-columns: 1fr; /* Single column on small screens */
    }
    /* Make logo-options-row single column on smaller screens too */
    .logo-options-row {
        grid-template-columns: 1fr;
    }
    footer {
    padding: 15px 10px;
  }

  footer p {
    text-align: center;
    margin-bottom: 10px;
  }

  .footer-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .footer-nav li {
    margin: 5px 5px;
    padding: 0 5px;
    border-right: 1px solid var(--light-text-color);
  }

  .footer-nav li:last-child {
    border-right: none;
  }

  .footer-nav a {
    padding: 5px 0;
    font-size: 0.9rem;
  }
}

/* For logo size slider to be full width */
.logo-options-row {
    grid-template-columns: 1fr; /* Ensure it's always single column if only one item */
}