/* ====================================================================================================
   UTILITY CLASSES
   ====================================================================================================
   Reusable utility classes for common styling needs
   ==================================================================================================== */

/* ===== DISPLAY UTILITIES ===== */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-grid {
    display: grid !important;
}

/* ===== FLEXBOX UTILITIES ===== */
.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-center {
    align-items: center !important;
}

.align-end {
    align-items: flex-end !important;
}

.align-stretch {
    align-items: stretch !important;
}

.gap-1 {
    gap: var(--space-1) !important;
}

.gap-2 {
    gap: var(--space-2) !important;
}

.gap-3 {
    gap: var(--space-3) !important;
}

.gap-4 {
    gap: var(--space-4) !important;
}

.gap-6 {
    gap: var(--space-6) !important;
}

.gap-8 {
    gap: var(--space-8) !important;
}

/* ===== SPACING UTILITIES ===== */

/* Margin */
.m-0 {
    margin: 0 !important;
}

.m-auto {
    margin: auto !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: var(--space-1) !important;
}

.mt-2 {
    margin-top: var(--space-2) !important;
}

.mt-3 {
    margin-top: var(--space-3) !important;
}

.mt-4 {
    margin-top: var(--space-4) !important;
}

.mt-6 {
    margin-top: var(--space-6) !important;
}

.mt-8 {
    margin-top: var(--space-8) !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: var(--space-1) !important;
}

.mb-2 {
    margin-bottom: var(--space-2) !important;
}

.mb-3 {
    margin-bottom: var(--space-3) !important;
}

.mb-4 {
    margin-bottom: var(--space-4) !important;
}

.mb-6 {
    margin-bottom: var(--space-6) !important;
}

.mb-8 {
    margin-bottom: var(--space-8) !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

/* Padding */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: var(--space-1) !important;
}

.p-2 {
    padding: var(--space-2) !important;
}

.p-3 {
    padding: var(--space-3) !important;
}

.p-4 {
    padding: var(--space-4) !important;
}

.p-6 {
    padding: var(--space-6) !important;
}

.p-8 {
    padding: var(--space-8) !important;
}

.px-4 {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
}

.py-4 {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
}

/* ===== WIDTH/HEIGHT UTILITIES ===== */
.w-full {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.h-full {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.h-screen {
    height: 100vh !important;
}

.min-h-screen {
    min-height: 100vh !important;
}

/* ===== POSITION UTILITIES ===== */
.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: sticky !important;
}

.top-0 {
    top: 0 !important;
}

.left-0 {
    left: 0 !important;
}

.right-0 {
    right: 0 !important;
}

.bottom-0 {
    bottom: 0 !important;
}

/* ===== Z-INDEX ===== */
.z-0 {
    z-index: 0 !important;
}

.z-10 {
    z-index: 10 !important;
}

.z-50 {
    z-index: 50 !important;
}

.z-100 {
    z-index: 100 !important;
}

.z-999 {
    z-index: 999 !important;
}

/* ===== OVERFLOW ===== */
.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

/* ===== BORDER RADIUS ===== */
.rounded-none {
    border-radius: 0 !important;
}

.rounded-sm {
    border-radius: var(--radius-sm) !important;
}

.rounded-md {
    border-radius: var(--radius-md) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

.rounded-full {
    border-radius: var(--radius-round) !important;
}

/* ===== SHADOWS ===== */
.shadow-none {
    box-shadow: none !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.shadow-xl {
    box-shadow: var(--shadow-xl) !important;
}

/* ===== COLOR UTILITIES ===== */
.text-primary-color {
    color: var(--color-primary) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

.text-secondary-color {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-light {
    color: var(--text-light) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-error {
    color: var(--color-error) !important;
}

/* Background Colors */
.bg-primary {
    background-color: var(--bg-primary) !important;
}

.bg-secondary {
    background-color: var(--bg-secondary) !important;
}

.bg-dark {
    background-color: var(--bg-dark) !important;
}

.bg-accent {
    background-color: var(--color-accent) !important;
}

.bg-overlay {
    background-color: var(--bg-overlay) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* ===== CURSOR ===== */
.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

/* ===== USER SELECT ===== */
.select-none {
    user-select: none !important;
}

.select-text {
    user-select: text !important;
}

.select-all {
    user-select: all !important;
}

/* ===== VISIBILITY ===== */
.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

/* ===== OPACITY ===== */
.opacity-0 {
    opacity: 0 !important;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

/* ===== TRANSITIONS ===== */
.transition-fast {
    transition: var(--transition-fast) !important;
}

.transition-base {
    transition: var(--transition-base) !important;
}

.transition-slow {
    transition: var(--transition-slow) !important;
}

.transition-all {
    transition: var(--transition-all) !important;
}

/* ===== CONTAINER ===== */
.doodeco-container {
    width: var(--container-width);
    max-width: var(--container-doodeco-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.doodeco-container-content {
    width: var(--container-content-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    box-sizing: border-box;
}

@media (max-width: 768px) {

    .doodeco-container,
    .doodeco-container-content {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
        width: 100% !important;
    }
}

.doodeco-section-primary {
    padding: var(--space-20) 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.doodeco-section-secondary {
    padding: var(--space-20) 0;
    background: var(--bg-secondary);
}

.web-content {
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
    padding-top: 100px !important;
}

/* ===== DIVIDERS ===== */
.line-end-section {
    border-bottom: 1px solid var(--color-gray-300);
    width: 50%;
    margin: 3rem auto !important;
}

.line-end {
    border-bottom: 1px solid var(--color-gray-300);
    width: 100%;
    margin: 1rem 0rem !important;
}

/* ===== BUTTON UTILITIES ===== */
.btn-doodeco {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.6rem 2rem !important;
    background-color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-round) !important;
    font-weight: var(--font-weight-medium) !important;
    text-decoration: none !important;
    transition: var(--transition-all) !important;
    cursor: pointer !important;
    gap: 0.5rem !important;
}

.btn-doodeco:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
    text-decoration: none !important;
}

.btn-doodeco-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.6rem 2rem !important;
    border: 1px solid var(--color-primary) !important;
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border-radius: var(--radius-round) !important;
    font-weight: var(--font-weight-medium) !important;
    text-decoration: none !important;
    transition: var(--transition-all) !important;
    cursor: pointer !important;
    gap: 0.5rem !important;
}

.btn-doodeco-outline:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    text-decoration: none !important;
}

.btn-doodeco-outline .arrow,
.btn-doodeco-outline i,
.btn-doodeco-outline svg {
    transition: var(--transition-all) !important;
}

.btn-doodeco-outline:hover .arrow {
    transform: translateX(5px) !important;
}

.btn-doodeco-outline:hover i,
.btn-doodeco-outline:hover svg {
    color: var(--color-white) !important;
    fill: var(--color-white) !important;
}

/* ===== reCAPTCHA RESPONSIVE FIX ===== */
.g-recaptcha {
    display: flex;
    justify-content: center;
    width: 100%;
    transform-origin: center top;
    -webkit-transform-origin: center top;
    margin-bottom: var(--space-4);
}

@media (max-width: 500px) {
    .g-recaptcha {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
    }
}

@media (max-width: 400px) {
    .g-recaptcha {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }
}

@media (max-width: 350px) {
    .g-recaptcha {
        transform: scale(0.72);
        -webkit-transform: scale(0.72);
    }
}