/* ===== Custom overrides for bid input and alignment (dark theme) ===== */

/* Professional dark theme input styling */
.product-box__bottom .input-wrapper .form--control,
.product-details-card .product-box__bottom .form--control,
.blog-sidebar .input-wrapper .form--control {
  padding: 14px 18px;
  font-size: 1.05rem;
  font-weight: 600;
  border: 1px solid hsl(var(--white)/0.12) !important;
  background: hsl(var(--white)/0.03) !important; /* use theme darkness */
  color: hsl(var(--white)) !important;           /* ensure text is visible */
  border-radius: 8px;
  box-shadow: none !important;                   /* remove heavy glow */
}

.product-box__bottom .input-wrapper .form--control::placeholder,
.product-details-card .product-box__bottom .form--control::placeholder,
.blog-sidebar .input-wrapper .form--control::placeholder {
  color: hsl(var(--white)/0.65);
  font-weight: 600;
}

/* Focus state: subtle accent */
.product-box__bottom .input-wrapper .form--control:focus,
.product-details-card .product-box__bottom .form--control:focus,
.blog-sidebar .input-wrapper .form--control:focus {
  border-color: hsl(var(--base)) !important;
  box-shadow: 0 0 0 2px hsl(var(--base)/0.25) !important;
  background: hsl(var(--white)/0.04) !important;
}

/* Base inline layout */
.product-box__bottom .input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-box__bottom .input-wrapper .form--control {
  flex: 1;
  min-width: 0;
}

.product-box__bottom .input-wrapper .product-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  white-space: nowrap;
}

/* Override template absolute overlay on product details page */
.product-details .product-box__bottom .input-wrapper { position: static !important; }
.product-details .product-box__bottom .input-wrapper .product-btn { position: static !important; right: auto !important; top: auto !important; }
.product-details .product-box__bottom .input-wrapper .form--control { padding-right: 16px !important; }

/* ===== Global frontend form control refinements ===== */
.form--control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: hsl(var(--white)/0.03) !important;
  color: hsl(var(--white)) !important;
  border: 1px solid hsl(var(--white)/0.12) !important;
  box-shadow: none !important;
}

.form--control::placeholder,
input::placeholder,
textarea::placeholder {
  color: hsl(var(--white)/0.65) !important;
}

.form--control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: hsl(var(--base)) !important;
  box-shadow: 0 0 0 2px hsl(var(--base)/0.25) !important;
  background: hsl(var(--white)/0.04) !important;
}

/* Red border for required fields when focused */
.form--control.is-invalid:focus,
.form--control.is-invalid,
input.is-invalid:focus,
input.is-invalid,
textarea.is-invalid:focus,
textarea.is-invalid,
select.is-invalid:focus,
select.is-invalid,
.geoapify-autocomplete-input.is-invalid,
.geoapify-autocomplete-input.is-invalid:focus,
.is-invalid-editor {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
}

/* ===== Breadcrumb padding adjustment for desktop ===== */
@media (min-width: 992px) {
    .breadcumb {
        padding: 100px 0 50px !important;
    }
}

/* Label Error Color */
label.text-danger {
    color: #dc3545 !important;
}

/* Drag and Drop Visual Feedback */
.image.dragging {
    opacity: 0.5;
    border: 2px dashed #ccc;
}
.image.drag-over {
    border: 2px dashed hsl(var(--base));
    transform: scale(1.02);
}

/* ===== Professional pagination styling (refined) ===== */
.custom-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
}

.custom-pagination .page-number,
.custom-pagination .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  color: hsl(var(--white)/0.7);
  background: hsl(var(--white)/0.05);
  border: 1px solid hsl(var(--white)/0.1);
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}

.custom-pagination .page-number:hover,
.custom-pagination .page-btn:hover {
  background: hsl(var(--base)/0.15);
  color: hsl(var(--base));
  border-color: hsl(var(--base)/0.3);
}

.custom-pagination .page-number.active {
  background: hsl(var(--base));
  color: hsl(var(--white)); /* White text for contrast on base color */
  border-color: hsl(var(--base));
  box-shadow: 0 4px 12px hsl(var(--base)/0.3);
}

.custom-pagination .page-number.active:hover {
  background: hsl(var(--base)); /* Keep base color on hover for active item */
  color: hsl(var(--white));
  transform: translateY(-1px);
}

.custom-pagination .page-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: hsl(var(--white)/0.02);
}

.custom-pagination .page-dots {
  color: hsl(var(--white)/0.4);
  padding: 0 4px;
  font-size: 14px;
}

/* ===== Maintenance Mode Card Fix (Dark Theme) ===== */
.custom--card {
    background-color: hsl(var(--white)/0.05) !important;
    border: 1px solid hsl(var(--white)/0.1) !important;
    color: hsl(var(--white)) !important;
    box-shadow: 0 4px 15px hsl(var(--black)/0.2) !important;
}

.custom--card .card-body {
    background-color: transparent !important;
}

.custom--card .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid hsl(var(--white)/0.1);
}

.custom--card .card-title {
    color: hsl(var(--white)) !important;
}

.custom--card .maintenance-message {
    color: hsl(var(--white)/0.8) !important;
}

/* Ensure validation icon appears before the phone icon */
.input-group .validation-icon {
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    border-color: transparent !important; /* User requested transparent border */
}

/* Customize Mobile Code Prefix */
.input-group-text.mobile-code {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--white)) !important;
    border-color: transparent !important;
}

/* Fix for Country Select Dropdown Dimensions and Background */
select.form--control,
.form-group select.form--control {
    padding: 14px 18px !important;
    height: auto !important;
    min-height: 54px; /* Consistent height with inputs */
    background-color: hsl(var(--white)/0.03) !important;
    color: hsl(var(--white)) !important;
    border: 1px solid hsl(var(--white)/0.12) !important;
    border-radius: 8px !important;
    cursor: pointer;
}

/* Ensure options have dark background in dark theme */
select.form--control option,
.form-group select.form--control option {
    background-color: hsl(240, 11%, 14%);
    color: hsl(var(--white));
    padding: 10px;
}

/* Ensure general inputs match these dimensions */
input.form--control,
.form-group input.form--control {
    padding: 14px 18px !important;
    min-height: 54px;
}