/* ============================================================================
   ITMZZ Service Marketplace - Theme Styles
   Theme-specific styles for OpenCart
   Imports general styles from general-styles.css

   This file imports all component stylesheets for modular organization.
   ============================================================================ */

/* Core styles with CSS variables */
@import url('general-styles.css');

/* Component Stylesheets */
@import url('components/navigation.css');
@import url('components/breadcrumbs-pagination.css');
@import url('components/products.css');
@import url('components/landing-page.css');
@import url('components/tabs.css');
@import url('components/cart.css');
@import url('components/account.css');
@import url('components/requests.css');
@import url('components/seller.css');
@import url('components/seller-theme.css');
@import url('components/forms.css');
@import url('components/checkout.css');
@import url('components/product-table-enhanced.css');

/* ============================================================================
   REGISTRATION PAGE STYLES (Direct include for reliability)
   ============================================================================ */
.registration-page {
    background: #f8fafc !important;
    padding: 40px 0 !important;
    min-height: calc(100vh - 200px) !important;
}

.registration-container {
    max-width: 800px !important;
    margin: 0 auto !important;
}

.registration-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    padding: 40px !important;
    margin-bottom: 30px !important;
}

.registration-header {
    text-align: center !important;
    margin-bottom: 30px !important;
}

.registration-header h1 {
    font-size: 2rem !important;
    color: #0f172a !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
}

.registration-header p {
    color: #64748b !important;
    font-size: 1rem !important;
}

/* Toggle Switch for Be a Talent */
.talent-toggle-section {
    background: linear-gradient(135deg, #f8fafc 0%, rgba(34, 197, 94, 0.1) 100%) !important;
    border: 2px solid #22C55E !important;
    border-radius: 16px !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}

.talent-toggle-section h3 {
    color: #0f172a !important;
    margin-bottom: 10px !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

.talent-toggle-section p {
    color: #64748b !important;
    margin-bottom: 20px !important;
    font-size: 0.9rem !important;
}

.toggle-switch {
    position: relative !important;
    display: inline-block !important;
    width: 60px !important;
    height: 34px !important;
}

.toggle-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.toggle-slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #ccc !important;
    transition: all 0.3s ease !important;
    border-radius: 34px !important;
}

.toggle-slider:before {
    position: absolute !important;
    content: "" !important;
    height: 26px !important;
    width: 26px !important;
    left: 4px !important;
    bottom: 4px !important;
    background-color: white !important;
    transition: all 0.3s ease !important;
    border-radius: 50% !important;
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, #22C55E, #38BDF8) !important;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(26px) !important;
}

.toggle-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 15px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

.toggle-status {
    font-weight: 500 !important;
    color: #64748b !important;
    min-width: 80px !important;
}

.toggle-status.active {
    color: #22C55E !important;
}

/* Seller Fields Section */
.seller-fields-section {
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 25px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    background: #f8fafc !important;
}

.seller-fields-section h4 {
    color: #0f172a !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #22C55E !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.seller-fields-section h4 i {
    color: #22C55E !important;
}

/* Form Group Enhancements */
.reg-form-group {
    margin-bottom: 20px !important;
}

.reg-form-group label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
}

.reg-form-group .form-control {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.reg-form-group .form-control:focus {
    border-color: #22C55E !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
    outline: none !important;
}

.reg-row {
    display: flex !important;
    gap: 20px !important;
}

.reg-col-6 {
    flex: 1 !important;
}

@media (max-width: 768px) {
    .reg-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .registration-card {
        padding: 20px !important;
    }
}

/* Required Field Indicator */
.reg-form-group.required label::after {
    content: " *" !important;
    color: #ef4444 !important;
}

/* File Upload Styling */
.file-upload-wrapper {
    position: relative !important;
}

.file-upload-wrapper input[type="file"] {
    display: block !important;
    width: 100% !important;
    padding: 10px !important;
    border: 2px dashed #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.file-upload-wrapper input[type="file"]:hover {
    border-color: #22C55E !important;
}

/* Terms Agreement */
.terms-section {
    background: #f8fafc !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin-top: 25px !important;
}

.terms-section label {
    display: flex !important;
    align-items: flex-start !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
}

.terms-section input[type="checkbox"] {
    margin-right: 10px !important;
    margin-top: 3px !important;
    width: 18px !important;
    height: 18px !important;
}

/* Submit Button */
.submit-section {
    margin-top: 30px !important;
    text-align: center !important;
}

.btn-register {
    background: linear-gradient(135deg, #22C55E, #38BDF8) !important;
    color: white !important;
    border: none !important;
    padding: 15px 50px !important;
    border-radius: 50px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn-register:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    color: white !important;
}

/* Breadcrumb styling for registration page */
.registration-page .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* Registration fieldset legends */
.registration-card fieldset {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

.registration-card legend {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.registration-card legend i {
    color: #22C55E !important;
}

/* ============================================================================
   FORM SECTION HEADERS - For Seller Store Configuration
   ============================================================================ */
.form-section-header {
    margin: 25px 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
}

.form-section-header:first-child {
    margin-top: 0;
}

.form-section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section-title i {
    color: var(--primary-green);
    font-size: 1.1rem;
}

.form-section-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Collapsible Section Styles */
.form-section-header.collapsible-section-header {
    user-select: none;
    transition: all 0.3s ease;
}

.form-section-header.collapsible-section-header:hover {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    padding: 0 8px;
    margin-left: -8px;
    margin-right: -8px;
}

.collapse-toggle-icon {
    display: inline-block !important;
    transition: transform 0.3s ease;
    margin-right: 5px;
    color: var(--primary-green);
    font-size: 1.1rem !important;
}

.form-section-header[aria-expanded="false"] .collapse-toggle-icon {
    transform: rotate(-90deg);
}

#professional-info-content.collapse {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

#professional-info-content.collapse:not(.show) {
    max-height: 0;
    opacity: 0;
}

#experience-expertise-content.collapse {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

#experience-expertise-content.collapse:not(.show) {
    max-height: 0;
    opacity: 0;
}

#education-certifications-content.collapse {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

#education-certifications-content.collapse:not(.show) {
    max-height: 0;
    opacity: 0;
}

#rates-availability-content.collapse {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

#rates-availability-content.collapse:not(.show) {
    max-height: 0;
    opacity: 0;
}

#portfolio-links-content.collapse {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

#portfolio-links-content.collapse:not(.show) {
    max-height: 0;
    opacity: 0;
}

#work-preferences-content.collapse {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

#work-preferences-content.collapse:not(.show) {
    max-height: 0;
    opacity: 0;
}

#official-documents-content.collapse {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

#official-documents-content.collapse:not(.show) {
    max-height: 0;
    opacity: 0;
}

/* Small helper text under form inputs */
.form-text.text-muted {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.form-text.text-muted i {
    color: var(--primary-blue);
    margin-right: 4px;
}

.form-text.text-muted strong {
    color: var(--text-secondary);
    font-weight: 600;
}

/* ==========================================
   HEADER LOGIN BUTTON - Official Green
   ========================================== */
.header-login-btn {
    background: var(--primary-green) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    transition: background 0.2s;
}

.header-login-btn:hover {
    background: #16a34a !important; /* Slightly darker green for hover */
    color: #fff !important;
}

/* ==========================================
   SIMPLE BUTTON GROUP - Clean & Consistent
   ========================================== */
.btn-group.btn-block {
  display: flex;
  width: 100%;
  border-radius: 32px;
  border: 1px solid var(--border-color);
  background: #fff;
  overflow: hidden;
  margin: 24px 0;
}

.btn-group.btn-block .btn {
  flex: 1 1 0%;
  min-width: 0;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 700;
  background: transparent;
  color: var(--text-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 0;
  transition: background 0.2s, color 0.2s;
}

.btn-group.btn-block .btn:first-child {
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
}

.btn-group.btn-block .btn:last-child {
  border-top-right-radius: 32px;
  border-bottom-right-radius: 32px;
}

.btn-group.btn-block .btn + .btn {
  border-left: 1px solid var(--border-color);
}

.btn-group.btn-block .btn i {
  font-size: 1.1em;
  margin-right: 6px;
}

.btn-group.btn-block .btn:hover, .btn-group.btn-block .btn:focus {
  background: var(--bg-secondary);
  color: var(--primary-blue);
}

.btn-group.btn-block .btn:active {
  background: var(--bg-secondary);
  color: var(--primary-green);
}

@media (max-width: 768px) {
  .btn-group.btn-block {
    flex-direction: column;
    border-radius: 16px;
  }
  .btn-group.btn-block .btn {
    font-size: 0.95rem;
    padding: 14px 0;
    border-radius: 0 !important;
  }
  .btn-group.btn-block .btn + .btn {
    border-left: none;
    border-top: 1px solid var(--border-color);
  }
  .btn-group.btn-block .btn:first-child {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
  .btn-group.btn-block .btn:last-child {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}

/* ==========================================
   HEADER ACTION BUTTONS - Find a task / Post a Request
   ========================================== */
#cart.btn-group {
    width: auto !important;
    display: inline-flex !important;
    flex-shrink: 0;
}

.header-action-btns {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-color);
  border-radius: 32px;
  background: #fff;
  overflow: hidden;
  height: 44px;
  width: auto%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.header-action-btn {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 100%;
  padding: 0 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  background: transparent;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
  font-family: var(--font-secondary);
  letter-spacing: 0.01em;
}

.header-action-btn i {
  font-size: 0.95em;
  opacity: 0.75;
}

.header-action-btn--find {
  border-right: 1.5px solid var(--border-color);
}

.header-action-btn--post {
  color: var(--primary-teal);
  font-weight: 700;
}

.header-action-btn--post i {
  opacity: 1;
  color: var(--primary-teal);
}

.header-action-btn:hover,
.header-action-btn:focus {
  background: var(--bg-secondary);
  color: var(--primary-blue);
  text-decoration: none;
}

.header-action-btn--post:hover,
.header-action-btn--post:focus {
  background: var(--bg-secondary);
  color: var(--primary-green);
}

@media (max-width: 992px) {
  .header-action-btn span {
    display: none;
  }
  .header-action-btns {
    width: auto;
    min-width: 80px;
  }
  .header-action-btn {
    padding: 0 14px;
    flex: none;
  }
  .header-action-btn i {
    font-size: 1.1em;
    opacity: 1;
  }
}

@media (max-width: 768px) {
    .header-action-btns {
        border-radius: 22px;
        height: 40px;
    }
    .header-action-btn {
        flex: 0 0 40px;
    }
}