/**
 * DojKala Order System - Frontend Styles
 * Premium UI/UX - NO SCROLL - System Font
 * SEO/Speed Optimized - No external fonts
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --doj-primary: #006baf;
    --doj-primary-dark: #005694;
    --doj-primary-light: #0080d0;
    --doj-secondary: #10b981;
    --doj-secondary-dark: #059669;
    --doj-success: #22c55e;
    --doj-warning: #f59e0b;
    --doj-danger: #ef4444;
    --doj-white: #ffffff;
    --doj-gray-50: #f9fafb;
    --doj-gray-100: #f3f4f6;
    --doj-gray-200: #e5e7eb;
    --doj-gray-300: #d1d5db;
    --doj-gray-400: #9ca3af;
    --doj-gray-500: #6b7280;
    --doj-gray-600: #4b5563;
    --doj-gray-700: #374151;
    --doj-gray-800: #1f2937;
    --doj-gray-900: #111827;
    --doj-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    --doj-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.08);
    --doj-radius: 16px;
    --doj-radius-lg: 24px;
    --doj-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   BODY LOCK WHEN MODAL OPEN
   ============================================ */
body.dojkala-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================
   STICKY BUTTONS - MOBILE ONLY
   ============================================ */
.dojkala-sticky-buttons {
    display: none !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    padding: 16px 20px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)) !important;
    background: transparent !important;
    gap: 12px !important;
    box-shadow: none !important;
    border: none !important;
}

@media (max-width: 768px) {
    .dojkala-sticky-buttons {
        display: flex !important;
    }

    body {
        padding-bottom: 90px !important;
    }
}

@media (min-width: 769px) {
    .dojkala-sticky-buttons {
        display: none !important;
    }
}

@media (max-width: 400px) {
    .dojkala-sticky-buttons {
        gap: 8px !important;
        padding: 12px 12px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important;
    }

    #dojkala-sticky-buttons .dojkala-btn {
        gap: 8px !important;
        padding: 12px 8px !important;
        line-height: 1.2 !important;
        text-transform: none !important;
    }

    #dojkala-sticky-buttons .dojkala-btn span {
        font-size: 15px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #dojkala-sticky-buttons .dojkala-btn-consultation,
    #dojkala-sticky-buttons .dojkala-btn-testimonials {
        padding: 12px 16px !important;
    }

    #dojkala-sticky-buttons .dojkala-btn svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* Sticky Button Base */
.dojkala-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 16px 24px !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--doj-transition) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    min-height: 54px !important;
}

.dojkala-btn svg {
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
}

/* Order Button */
.dojkala-btn-order {
    background: linear-gradient(135deg, #006baf 0%, #0080d0 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 107, 175, 0.4) !important;
}

.dojkala-btn-order:hover,
.dojkala-btn-order:focus,
.dojkala-btn-order:active {
    background: linear-gradient(135deg, #005694 0%, #006baf 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 107, 175, 0.5) !important;
}

/* Consultation Button */
.dojkala-btn-consultation {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important;
}

.dojkala-btn-consultation:hover,
.dojkala-btn-consultation:focus,
.dojkala-btn-consultation:active {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.5) !important;
}

/* ============================================
   SHORTCODE BUTTON - DESKTOP
   ============================================ */
button.dojkala-btn-shortcode,
.dojkala-btn-shortcode,
.elementor-widget-container .dojkala-btn-shortcode,
.woodmart-product-summary .dojkala-btn-shortcode,
.summary .dojkala-btn-shortcode,
.product .dojkala-btn-shortcode {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 18px 36px !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--doj-transition) !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #006baf 0%, #0080d0 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 30px rgba(0, 107, 175, 0.35) !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 58px !important;
    outline: none !important;
    box-sizing: border-box !important;
}

button.dojkala-btn-shortcode:hover,
button.dojkala-btn-shortcode:focus,
.dojkala-btn-shortcode:hover,
.dojkala-btn-shortcode:focus {
    background: linear-gradient(135deg, #005694 0%, #006baf 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 40px rgba(0, 107, 175, 0.45) !important;
    text-decoration: none !important;
}

button.dojkala-btn-shortcode:active,
.dojkala-btn-shortcode:active {
    transform: translateY(-1px) !important;
}

.dojkala-btn-shortcode svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}

.dojkala-btn-shortcode span {
    color: #ffffff !important;
}

@media (max-width: 768px) {
    button.dojkala-btn-shortcode,
    .dojkala-btn-shortcode {
        display: none !important;
    }
}

/* ============================================
   MODAL - PREMIUM DESIGN, NO SCROLL
   ============================================ */
.dojkala-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dojkala-modal.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: dojFadeIn 0.3s ease !important;
}

@keyframes dojFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Desktop Modal Content */
.dojkala-modal-content {
    position: relative !important;
    width: calc(100% - 40px) !important;
    max-width: 460px !important;
    max-height: calc(100vh - 40px) !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2) !important;
    animation: dojSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

@keyframes dojSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile Modal - FULL SCREEN, NO SCROLL */
@media (max-width: 768px) {
    .dojkala-modal {
        overflow: hidden !important;
    }

    .dojkala-modal.active {
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .dojkala-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        animation: dojSlideUpMobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow: hidden !important;
    }

    @keyframes dojSlideUpMobile {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Desktop with short viewport (1280x720 and similar) */
@media (min-width: 769px) and (max-height: 800px) {
    .dojkala-modal-content {
        max-height: calc(100vh - 24px) !important;
    }

    .dojkala-step {
        padding: 24px 28px !important;
    }

    .dojkala-modal-header {
        margin-bottom: 16px !important;
    }

    .dojkala-logo {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-logo svg {
        width: 28px !important;
        height: 28px !important;
    }

    .dojkala-title {
        font-size: 17px !important;
    }

    .dojkala-product-info {
        padding: 12px 16px !important;
        margin-bottom: 16px !important;
    }

    .dojkala-product-label {
        font-size: 12px !important;
    }

    .dojkala-product-name {
        font-size: 14px !important;
    }

    .dojkala-description {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }

    .dojkala-form {
        gap: 14px !important;
    }

    .dojkala-form-group input {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    .dojkala-extra-buttons {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-extra-btn {
        padding: 10px 12px !important;
        min-height: 44px !important;
        font-size: 13px !important;
    }

    .dojkala-submit-btn {
        padding: 14px 24px !important;
        min-height: 50px !important;
        font-size: 15px !important;
    }
}

/* Close Button */
.dojkala-modal-close {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: var(--doj-transition) !important;
    z-index: 10 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dojkala-modal-close:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #1f2937 !important;
    transform: rotate(90deg) !important;
}

/* ============================================
   STEP CONTAINERS - FIT CONTENT, NO SCROLL
   ============================================ */
.dojkala-step {
    display: none;
    flex-direction: column !important;
    padding: 36px 32px !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    overflow: hidden !important;
}

.dojkala-step[style*="display: block"],
.dojkala-step[style*="display:block"],
.dojkala-step[style*="flex"] {
    display: flex !important;
}

#dojkala-process-modal .dojkala-step {
    display: flex !important;
}

@media (max-width: 768px) {
    .dojkala-step {
        padding: 16px 20px !important;
        padding-top: 56px !important;
        height: 100% !important;
        justify-content: center !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Order form needs scroll due to many elements */
    #dojkala-step-form {
        justify-content: flex-start !important;
        padding-top: 52px !important;
        padding-bottom: 16px !important;
    }
}

/* Small mobile screens (360x720 and similar) */
@media (max-width: 400px) {
    .dojkala-step {
        padding: 14px 14px !important;
        padding-top: 50px !important;
    }

    #dojkala-step-form {
        padding-top: 48px !important;
        padding-bottom: 14px !important;
    }

    .dojkala-modal-close {
        top: 12px !important;
        left: 12px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 22px !important;
    }

    .dojkala-modal-header {
        margin-bottom: 10px !important;
    }

    .dojkala-logo {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 8px !important;
    }

    .dojkala-logo svg {
        width: 22px !important;
        height: 22px !important;
    }

    .dojkala-title {
        font-size: 14px !important;
    }

    .dojkala-product-info {
        padding: 8px 12px !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
    }

    .dojkala-product-label {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }

    .dojkala-product-name {
        font-size: 12px !important;
    }

    .dojkala-description {
        font-size: 11px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-form {
        gap: 10px !important;
    }

    .dojkala-form-group {
        gap: 4px !important;
    }

    .dojkala-form-group label {
        font-size: 11px !important;
    }

    .dojkala-form-group input {
        padding: 10px 12px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    .dojkala-extra-buttons {
        gap: 6px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .dojkala-extra-btn {
        padding: 8px 6px !important;
        min-height: 38px !important;
        border-radius: 10px !important;
        gap: 5px !important;
    }

    .dojkala-extra-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    .dojkala-extra-btn span {
        font-size: 11px !important;
    }

    .dojkala-submit-btn {
        padding: 12px 16px !important;
        min-height: 44px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
}

/* Very short mobile screens (height < 700px) */
@media (max-width: 768px) and (max-height: 700px) {
    .dojkala-step {
        padding-top: 56px !important;
    }

    .dojkala-modal-close {
        top: 12px !important;
        left: 12px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .dojkala-modal-header {
        margin-bottom: 10px !important;
    }

    .dojkala-logo {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 8px !important;
    }

    .dojkala-logo svg {
        width: 22px !important;
        height: 22px !important;
    }

    .dojkala-title {
        font-size: 15px !important;
    }

    .dojkala-product-info {
        padding: 8px 12px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-product-label {
        font-size: 10px !important;
    }

    .dojkala-product-name {
        font-size: 12px !important;
    }

    .dojkala-description {
        font-size: 11px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-form {
        gap: 10px !important;
    }

    .dojkala-form-group label {
        font-size: 11px !important;
    }

    .dojkala-form-group input {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .dojkala-extra-buttons {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        gap: 6px !important;
    }

    .dojkala-extra-btn {
        padding: 8px 6px !important;
        min-height: 40px !important;
        gap: 5px !important;
    }

    .dojkala-extra-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    .dojkala-extra-btn span {
        font-size: 11px !important;
    }

    .dojkala-submit-btn {
        padding: 12px 16px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   FORM STEP - HEADER
   ============================================ */
.dojkala-modal-header {
    text-align: center !important;
    margin-bottom: 28px !important;
    flex-shrink: 0 !important;
}

.dojkala-logo {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #006baf 0%, #0080d0 100%) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 107, 175, 0.3) !important;
}

.dojkala-logo svg {
    width: 36px !important;
    height: 36px !important;
}

.dojkala-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Product Info Box */
.dojkala-product-info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
    text-align: center !important;
    border: 1px solid #bae6fd !important;
    flex-shrink: 0 !important;
}

.dojkala-product-label {
    display: block !important;
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
}

.dojkala-product-name {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #006baf !important;
    line-height: 1.4 !important;
}

.dojkala-description {
    text-align: center !important;
    font-size: 14px !important;
    color: #64748b !important;
    margin-bottom: 24px !important;
    flex-shrink: 0 !important;
    line-height: 1.5 !important;
}

/* ============================================
   FORM STYLES - PREMIUM
   ============================================ */
.dojkala-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    flex: 1 !important;
}

.dojkala-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.dojkala-form-group label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dojkala-form-group input {
    width: 100% !important;
    padding: 16px 18px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    transition: var(--doj-transition) !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.dojkala-form-group input:focus {
    outline: none !important;
    border-color: #006baf !important;
    box-shadow: 0 0 0 4px rgba(0, 107, 175, 0.12) !important;
}

.dojkala-form-group input::placeholder {
    color: #9ca3af !important;
}

.dojkala-form-group input[type="tel"] {
    direction: ltr !important;
    text-align: left !important;
    letter-spacing: 1px !important;
}

/* Submit Button */
.dojkala-submit-btn {
    width: 100% !important;
    padding: 18px 28px !important;
    background: linear-gradient(135deg, #006baf 0%, #0080d0 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--doj-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    min-height: 58px !important;
    box-shadow: 0 8px 24px rgba(0, 107, 175, 0.35) !important;
}

.dojkala-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #005694 0%, #006baf 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 107, 175, 0.45) !important;
}

.dojkala-submit-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Loading State */
.dojkala-btn-loading {
    display: none;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.dojkala-spinner {
    animation: dojRotate 1s linear infinite !important;
    width: 22px !important;
    height: 22px !important;
}

.dojkala-spinner .path {
    stroke: #ffffff !important;
    stroke-linecap: round !important;
    animation: dojDash 1.5s ease-in-out infinite !important;
}

@keyframes dojRotate {
    100% { transform: rotate(360deg); }
}

@keyframes dojDash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* ============================================
   SUCCESS & PENDING STEPS
   ============================================ */
#dojkala-step-success,
#dojkala-step-pending {
    text-align: center !important;
    justify-content: center !important;
}

.dojkala-success-icon,
.dojkala-pending-icon {
    width: 90px !important;
    height: 90px !important;
    margin: 0 auto 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    animation: dojPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
}

.dojkala-success-icon {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    color: #22c55e !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2) !important;
}

.dojkala-success-icon svg {
    width: 48px !important;
    height: 48px !important;
}

.dojkala-pending-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    color: #f59e0b !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2) !important;
}

.dojkala-pending-icon svg {
    width: 48px !important;
    height: 48px !important;
}

@keyframes dojPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.dojkala-success-title,
.dojkala-pending-title {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 12px !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
}

.dojkala-success-message,
.dojkala-pending-message {
    font-size: 15px !important;
    color: #64748b !important;
    margin: 0 0 28px !important;
    line-height: 1.7 !important;
    flex-shrink: 0 !important;
}

/* Order Details Box */
.dojkala-order-details {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-bottom: 28px !important;
    border: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.dojkala-detail-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
}

.dojkala-detail-item:not(:last-child) {
    border-bottom: 1px solid #e2e8f0 !important;
}

.dojkala-detail-label {
    font-size: 14px !important;
    color: #64748b !important;
}

.dojkala-detail-value {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

/* Action Buttons */
.dojkala-success-actions,
.dojkala-pending-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

.dojkala-call-btn {
    width: 100% !important;
    padding: 18px 28px !important;
    background: linear-gradient(135deg, #006baf 0%, #0080d0 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--doj-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    min-height: 58px !important;
    box-shadow: 0 8px 24px rgba(0, 107, 175, 0.35) !important;
}

.dojkala-call-btn:hover {
    background: linear-gradient(135deg, #005694 0%, #006baf 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
}

.dojkala-back-btn {
    width: 100% !important;
    padding: 16px 28px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--doj-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 54px !important;
}

.dojkala-back-btn:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

/* ============================================
   ERROR MESSAGE
   ============================================ */
.dojkala-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
    display: none !important;
    flex-shrink: 0 !important;
    text-align: center !important;
}

.dojkala-error.show {
    display: block !important;
    animation: dojShake 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes dojShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

/* ============================================
   CONSULTATION MODAL - CONTACT CARDS
   ============================================ */

/* Consultation Modal Content - NO SCROLL */
.dojkala-consultation-content {
    padding: 32px 24px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    .dojkala-consultation-content {
        padding: 70px 20px 24px !important;
        justify-content: flex-start !important;
        padding-top: 70px !important;
    }
}

.dojkala-consultation-header {
    text-align: center !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
}

.dojkala-consultation-icon {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3) !important;
}

.dojkala-consultation-icon svg {
    width: 28px !important;
    height: 28px !important;
}

.dojkala-consultation-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 4px !important;
}

.dojkala-consultation-subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Consultation Cards Container */
.dojkala-consultation-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 360px !important;
    flex-shrink: 0 !important;
}

/* Consultation Back Button */
.dojkala-consultation-back {
    width: 100% !important;
    max-width: 360px !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #475569 !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 48px !important;
    margin-top: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.dojkala-consultation-back::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
    transition: left 0.5s ease !important;
}

.dojkala-consultation-back:hover::before {
    left: 100% !important;
}

.dojkala-consultation-back:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-color: #cbd5e1 !important;
    color: #1f2937 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

.dojkala-consultation-back:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.dojkala-consultation-back svg {
    transition: transform 0.3s ease !important;
}

.dojkala-consultation-back:hover svg {
    transform: translateX(4px) !important;
}

html[dir="rtl"] .dojkala-consultation-back:hover svg {
    transform: translateX(-4px) !important;
}

/* Card Content & Arrow Structure */
.dojkala-card-content {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

.dojkala-card-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.dojkala-card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    display: block !important;
    line-height: 1.3 !important;
}

.dojkala-card-subtitle {
    font-size: 11px !important;
    display: block !important;
    opacity: 0.8 !important;
}

.dojkala-card-arrow {
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    position: relative !important;
    z-index: 1 !important;
    transition: transform 0.3s ease !important;
}

.dojkala-card-arrow svg {
    width: 16px !important;
    height: 16px !important;
}

/* Card Avatar - Makes square images circular */
.dojkala-card-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
}

.dojkala-contact-card:hover .dojkala-card-avatar {
    transform: scale(1.05) !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18) !important;
}

/* Avatar Placeholder - when no image */
.dojkala-card-avatar-placeholder {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
}

.dojkala-card-avatar-placeholder svg {
    width: 22px !important;
    height: 22px !important;
}

.dojkala-contact-card:hover .dojkala-card-avatar-placeholder {
    transform: scale(1.05) !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Icon Wrapper for cards without avatar */
.dojkala-card-icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s ease !important;
}

.dojkala-card-icon-wrapper svg {
    width: 22px !important;
    height: 22px !important;
}

.dojkala-contact-card:hover .dojkala-card-icon-wrapper {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.dojkala-whatsapp-icon {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 4px 12px rgba(37, 211, 102, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.dojkala-instagram-icon {
    background: linear-gradient(135deg, #833AB4 0%, #E4405F 50%, #FCAF45 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 4px 12px rgba(228, 64, 95, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.dojkala-testimonials-icon {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 4px 12px rgba(245, 158, 11, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Person 1 Card - Specific Fixes */
.dojkala-card-person-1 .dojkala-card-avatar-placeholder {
    color: #1e40af !important;
}

.dojkala-card-person-1 .dojkala-card-title {
    color: #1e40af !important;
}

.dojkala-card-person-1 .dojkala-card-subtitle {
    color: #3b82f6 !important;
}

.dojkala-card-person-1 .dojkala-card-arrow {
    background: rgba(30, 64, 175, 0.15) !important;
    color: #1e40af !important;
}

/* Person 2 Card - Specific Fixes */
.dojkala-card-person-2 .dojkala-card-avatar-placeholder {
    color: #5b21b6 !important;
}

.dojkala-card-person-2 .dojkala-card-title {
    color: #5b21b6 !important;
}

.dojkala-card-person-2 .dojkala-card-subtitle {
    color: #7c3aed !important;
}

.dojkala-card-person-2 .dojkala-card-arrow {
    background: rgba(91, 33, 182, 0.15) !important;
    color: #5b21b6 !important;
}

/* WhatsApp Card - Specific Fixes */
.dojkala-card-whatsapp .dojkala-card-title {
    color: #166534 !important;
}

.dojkala-card-whatsapp .dojkala-card-subtitle {
    color: #22c55e !important;
}

.dojkala-card-whatsapp .dojkala-card-arrow {
    background: rgba(22, 101, 52, 0.15) !important;
    color: #166534 !important;
}

/* Instagram Card - Specific Fixes */
.dojkala-card-instagram .dojkala-card-title {
    color: #9d174d !important;
}

.dojkala-card-instagram .dojkala-card-subtitle {
    color: #db2777 !important;
}

.dojkala-card-instagram .dojkala-card-arrow {
    background: rgba(157, 23, 77, 0.15) !important;
    color: #9d174d !important;
}

/* Testimonials Card - Specific Fixes */
.dojkala-card-testimonials .dojkala-card-title {
    color: #92400e !important;
}

.dojkala-card-testimonials .dojkala-card-subtitle {
    color: #d97706 !important;
}

.dojkala-card-testimonials .dojkala-card-arrow {
    background: rgba(146, 64, 14, 0.15) !important;
    color: #92400e !important;
}

/* Legacy consult modal styles kept for compatibility */
.dojkala-consult-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dojkala-consult-modal.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: dojFadeIn 0.3s ease !important;
}

.dojkala-consult-content {
    position: relative !important;
    width: calc(100% - 40px) !important;
    max-width: 420px !important;
    max-height: calc(100vh - 40px) !important;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    border-radius: 28px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2) !important;
    animation: dojSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

@media (max-width: 768px) {
    .dojkala-consult-modal.active {
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .dojkala-consult-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        animation: dojSlideUpMobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
}

.dojkala-consult-close {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: var(--doj-transition) !important;
    z-index: 10 !important;
}

.dojkala-consult-close:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #1f2937 !important;
    transform: rotate(90deg) !important;
}

.dojkala-consult-inner {
    padding: 32px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .dojkala-consult-inner {
        padding: 80px 24px 32px !important;
    }
}

.dojkala-consult-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 8px !important;
    text-align: center !important;
}

.dojkala-consult-subtitle {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 28px !important;
    text-align: center !important;
}

/* Contact Cards Container */
.dojkala-contact-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 340px !important;
}

/* Individual Contact Cards - Unique Styles */
.dojkala-contact-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.dojkala-contact-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.dojkala-contact-card:hover::before {
    opacity: 1 !important;
}

.dojkala-contact-card:hover {
    transform: translateY(-3px) translateX(5px) !important;
}

/* Card Avatar */
.dojkala-card-avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
    z-index: 1 !important;
}

.dojkala-card-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
    font-size: 24px !important;
}

.dojkala-card-info {
    flex: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

.dojkala-card-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    display: block !important;
}

.dojkala-card-role {
    font-size: 12px !important;
    margin: 0 !important;
    display: block !important;
    opacity: 0.85 !important;
}

.dojkala-card-arrow {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    position: relative !important;
    z-index: 1 !important;
    transition: transform 0.3s ease !important;
}

.dojkala-contact-card:hover .dojkala-card-arrow {
    transform: translateX(-4px) !important;
}

/* Card Style 1 - Person (Blue Gradient) */
.dojkala-card-person-1 {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border: 1px solid #93c5fd !important;
}

.dojkala-card-person-1::before {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%) !important;
}

.dojkala-card-person-1 .dojkala-card-name {
    color: #1e40af !important;
}

.dojkala-card-person-1 .dojkala-card-role {
    color: #3b82f6 !important;
}

.dojkala-card-person-1 .dojkala-card-arrow {
    background: rgba(30, 64, 175, 0.15) !important;
    color: #1e40af !important;
}

.dojkala-card-person-1:hover {
    box-shadow: 0 12px 28px rgba(59, 130, 246, 0.3) !important;
}

/* Card Style 2 - Person (Purple Gradient) */
.dojkala-card-person-2 {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
    border: 1px solid #c4b5fd !important;
}

.dojkala-card-person-2::before {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%) !important;
}

.dojkala-card-person-2 .dojkala-card-name {
    color: #5b21b6 !important;
}

.dojkala-card-person-2 .dojkala-card-role {
    color: #7c3aed !important;
}

.dojkala-card-person-2 .dojkala-card-arrow {
    background: rgba(91, 33, 182, 0.15) !important;
    color: #5b21b6 !important;
}

.dojkala-card-person-2:hover {
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.3) !important;
}

/* Card Style 3 - WhatsApp (Green) */
.dojkala-card-whatsapp {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    border: 1px solid #86efac !important;
}

.dojkala-card-whatsapp::before {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%) !important;
}

.dojkala-card-whatsapp .dojkala-card-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4) !important;
}

.dojkala-card-whatsapp .dojkala-card-name {
    color: #166534 !important;
}

.dojkala-card-whatsapp .dojkala-card-role {
    color: #22c55e !important;
}

.dojkala-card-whatsapp .dojkala-card-arrow {
    background: rgba(22, 101, 52, 0.15) !important;
    color: #166534 !important;
}

.dojkala-card-whatsapp:hover {
    box-shadow: 0 12px 28px rgba(34, 197, 94, 0.35) !important;
}

/* Card Style 4 - Instagram (Gradient Pink/Orange) */
.dojkala-card-instagram {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 50%, #fef3c7 100%) !important;
    border: 1px solid #f9a8d4 !important;
}

.dojkala-card-instagram::before {
    background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 50%, #fde68a 100%) !important;
}

.dojkala-card-instagram .dojkala-card-icon {
    background: linear-gradient(135deg, #ec4899 0%, #f97316 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4) !important;
}

.dojkala-card-instagram .dojkala-card-name {
    color: #9d174d !important;
}

.dojkala-card-instagram .dojkala-card-role {
    color: #db2777 !important;
}

.dojkala-card-instagram .dojkala-card-arrow {
    background: rgba(157, 23, 77, 0.15) !important;
    color: #9d174d !important;
}

.dojkala-card-instagram:hover {
    box-shadow: 0 12px 28px rgba(236, 72, 153, 0.35) !important;
}

/* Card Style 5 - Testimonials (Gold/Yellow) */
.dojkala-card-testimonials {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: 1px solid #fcd34d !important;
}

.dojkala-card-testimonials::before {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%) !important;
}

.dojkala-card-testimonials .dojkala-card-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
}

.dojkala-card-testimonials .dojkala-card-name {
    color: #92400e !important;
}

.dojkala-card-testimonials .dojkala-card-role {
    color: #d97706 !important;
}

.dojkala-card-testimonials .dojkala-card-arrow {
    background: rgba(146, 64, 14, 0.15) !important;
    color: #92400e !important;
}

.dojkala-card-testimonials:hover {
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.35) !important;
}

/* ============================================
   EXTRA BUTTONS IN ORDER FORM
   ============================================ */
.dojkala-extra-buttons {
    display: flex !important;
    gap: 10px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
}

.dojkala-extra-btn {
    flex: 1 !important;
    padding: 10px !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 52px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.dojkala-extra-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
    transition: left 0.5s ease !important;
}

.dojkala-extra-btn:hover::before {
    left: 100% !important;
}

.dojkala-extra-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.dojkala-extra-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.dojkala-extra-btn span {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.dojkala-btn-process {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.35) !important;
}

.dojkala-btn-process:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.45) !important;
}

.dojkala-btn-trust {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35) !important;
}

.dojkala-btn-trust:hover {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
}

/* ============================================
   STEP HEADER - SHARED STYLES
   ============================================ */
.dojkala-step-header {
    text-align: center !important;
    margin-bottom: 24px !important;
    flex-shrink: 0 !important;
}

.dojkala-step-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #ffffff !important;
}

.dojkala-step-icon svg {
    width: 32px !important;
    height: 32px !important;
}

.dojkala-step-icon-process {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4) !important;
}

.dojkala-step-icon-trust {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important;
}

.dojkala-step-icon-testimonials {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4) !important;
}

.dojkala-step-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    margin: 0 0 6px !important;
}

.dojkala-step-subtitle {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* ============================================
   STEP BACK BUTTON
   ============================================ */
.dojkala-step-back-btn {
    width: 100% !important;
    max-width: 360px !important;
    margin: 20px auto 0 !important;
    padding: 14px 24px !important;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    color: #475569 !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    flex-shrink: 0 !important;
}

.dojkala-step-back-btn:hover {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%) !important;
    color: #1f2937 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.dojkala-step-back-btn svg {
    width: 20px !important;
    height: 20px !important;
}

/* ============================================
   PROCESS STEP - 4 STEP CARDS
   ============================================ */
.dojkala-step-process {
    text-align: center !important;
}

.dojkala-process-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.dojkala-process-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    text-align: right !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.dojkala-process-card:hover {
    transform: translateX(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    border-color: transparent !important;
}

.dojkala-process-number {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.dojkala-process-num-1 {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    color: #ffffff !important;
}

.dojkala-process-num-2 {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    color: #ffffff !important;
}

.dojkala-process-num-3 {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    color: #ffffff !important;
}

.dojkala-process-num-4 {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    color: #ffffff !important;
}

.dojkala-process-info {
    flex: 1 !important;
    text-align: right !important;
}

.dojkala-process-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 4px !important;
    display: block !important;
}

.dojkala-process-card-desc {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* Process Step responsive for small screens */
@media (max-width: 400px) {
    .dojkala-step-process {
        padding: 60px 14px 14px !important;
    }

    .dojkala-step-process .dojkala-step-header {
        margin-bottom: 12px !important;
    }

    .dojkala-step-process .dojkala-step-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-step-process .dojkala-step-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .dojkala-step-process .dojkala-step-title {
        font-size: 15px !important;
    }

    .dojkala-step-process .dojkala-step-subtitle {
        font-size: 11px !important;
    }

    .dojkala-process-cards {
        gap: 8px !important;
        margin-bottom: 12px !important;
        max-width: 100% !important;
    }

    .dojkala-process-card {
        padding: 12px 12px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }

    .dojkala-process-number {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 15px !important;
    }

    .dojkala-process-card-title {
        font-size: 13px !important;
    }

    .dojkala-process-card-desc {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .dojkala-step-process .dojkala-step-back-btn {
        max-width: 100% !important;
        margin: 10px auto 0 !important;
        padding: 10px 16px !important;
        min-height: 42px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}

/* Process Step for short viewport */
@media (max-width: 768px) and (max-height: 750px) {
    .dojkala-step-process .dojkala-step-header {
        margin-bottom: 10px !important;
    }

    .dojkala-step-process .dojkala-step-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 8px !important;
    }

    .dojkala-process-cards {
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-process-card {
        padding: 10px 10px !important;
    }

    .dojkala-process-number {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 14px !important;
    }

    .dojkala-process-card-title {
        font-size: 12px !important;
    }

    .dojkala-process-card-desc {
        font-size: 10px !important;
    }
}

/* Desktop short viewport for Process */
@media (min-width: 769px) and (max-height: 800px) {
    .dojkala-step-process .dojkala-step-header {
        margin-bottom: 14px !important;
    }

    .dojkala-step-process .dojkala-step-icon {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-process-cards {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .dojkala-process-card {
        padding: 12px 14px !important;
    }

    .dojkala-process-number {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .dojkala-step-process .dojkala-step-back-btn {
        padding: 10px 20px !important;
        min-height: 46px !important;
    }
}

/* ============================================
   TRUST STEP - LICENSE & CARDS
   ============================================ */
.dojkala-step-trust {
    text-align: center !important;
}

/* License Image */
.dojkala-license-wrapper {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 20px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    border: 3px solid #e2e8f0 !important;
}

.dojkala-license-img {
    width: 100% !important;
    height: auto !important;
    max-height: 45vh !important;
    object-fit: contain !important;
    display: block !important;
}

@media (max-width: 768px) {
    .dojkala-step-trust {
        padding: 56px 18px 16px !important;
        justify-content: center !important;
    }

    .dojkala-step-trust .dojkala-step-header {
        margin-bottom: 12px !important;
    }

    .dojkala-step-trust .dojkala-step-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-step-trust .dojkala-step-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .dojkala-step-trust .dojkala-step-title {
        font-size: 16px !important;
    }

    .dojkala-step-trust .dojkala-step-subtitle {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .dojkala-step-trust .dojkala-license-wrapper {
        max-width: 70vw !important;
        margin: 0 auto 12px !important;
    }

    .dojkala-step-trust .dojkala-license-img {
        max-height: 28vh !important;
    }

    .dojkala-address-card {
        padding: 10px 12px !important;
        gap: 10px !important;
        margin: 0 auto 10px !important;
        max-width: 300px !important;
    }

    .dojkala-address-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .dojkala-address-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .dojkala-address-text {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .dojkala-trust-links {
        gap: 6px !important;
        margin-bottom: 10px !important;
        max-width: 300px !important;
    }

    .dojkala-trust-link {
        padding: 10px 10px !important;
        gap: 8px !important;
    }

    .dojkala-trust-link-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .dojkala-trust-link-title {
        font-size: 12px !important;
        margin: 0 0 2px !important;
    }

    .dojkala-trust-link-desc {
        font-size: 11px !important;
    }

    .dojkala-trust-link-arrow {
        width: 26px !important;
        height: 26px !important;
    }

    .dojkala-step-trust .dojkala-step-back-btn {
        max-width: 320px !important;
        margin: 12px auto 0 !important;
        padding: 10px 16px !important;
        min-height: 44px !important;
        font-size: 13px !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    .dojkala-step-trust .dojkala-license-img {
        max-height: 28vh !important;
    }

    .dojkala-trust-link-title {
        font-size: 12px !important;
    }

    .dojkala-trust-link-desc {
        font-size: 10px !important;
    }

    .dojkala-step-trust .dojkala-step-title {
        font-size: 15px !important;
    }
}

@media (max-width: 768px) and (max-height: 640px) {
    .dojkala-step-trust {
        padding: 16px 16px 12px !important;
    }

    .dojkala-step-trust .dojkala-license-img {
        max-height: 24vh !important;
    }
}

/* Trust page on 360x720 and similar small screens */
@media (max-width: 400px) {
    .dojkala-step-trust {
        padding: 60px 14px 14px !important;
    }

    .dojkala-step-trust .dojkala-step-header {
        margin-bottom: 10px !important;
    }

    .dojkala-step-trust .dojkala-step-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 8px !important;
    }

    .dojkala-step-trust .dojkala-step-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .dojkala-step-trust .dojkala-step-title {
        font-size: 14px !important;
    }

    .dojkala-step-trust .dojkala-step-subtitle {
        font-size: 11px !important;
    }

    .dojkala-step-trust .dojkala-license-wrapper {
        max-width: 80vw !important;
        margin: 0 auto 10px !important;
        border-radius: 12px !important;
        border-width: 2px !important;
    }

    .dojkala-step-trust .dojkala-license-img {
        max-height: 26vh !important;
    }

    .dojkala-step-trust .dojkala-address-card {
        padding: 10px 10px !important;
        gap: 8px !important;
        margin: 0 auto 10px !important;
        max-width: 100% !important;
        border-radius: 12px !important;
    }

    .dojkala-step-trust .dojkala-address-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .dojkala-step-trust .dojkala-address-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .dojkala-step-trust .dojkala-address-text {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .dojkala-step-trust .dojkala-trust-links {
        gap: 6px !important;
        margin-bottom: 10px !important;
        max-width: 100% !important;
    }

    .dojkala-step-trust .dojkala-trust-link {
        padding: 10px 10px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }

    .dojkala-step-trust .dojkala-trust-link-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .dojkala-step-trust .dojkala-trust-link-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .dojkala-step-trust .dojkala-trust-link-title {
        font-size: 11px !important;
    }

    .dojkala-step-trust .dojkala-trust-link-desc {
        font-size: 9px !important;
    }

    .dojkala-step-trust .dojkala-trust-link-arrow {
        width: 22px !important;
        height: 22px !important;
    }

    .dojkala-step-trust .dojkala-trust-link-arrow svg {
        width: 12px !important;
        height: 12px !important;
    }

    .dojkala-step-trust .dojkala-step-back-btn {
        max-width: 100% !important;
        margin: 8px auto 0 !important;
        padding: 8px 14px !important;
        min-height: 40px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }
}

/* Trust page for very short viewport (720px height on mobile) */
@media (max-width: 768px) and (max-height: 750px) {
    .dojkala-step-trust .dojkala-license-img {
        max-height: 22vh !important;
    }

    .dojkala-step-trust .dojkala-license-wrapper {
        margin-bottom: 8px !important;
    }

    .dojkala-step-trust .dojkala-address-card {
        margin-bottom: 8px !important;
    }

    .dojkala-step-trust .dojkala-trust-links {
        margin-bottom: 8px !important;
    }
}

/* Desktop with short viewport for Trust page */
@media (min-width: 769px) and (max-height: 800px) {
    .dojkala-step-trust .dojkala-step-header {
        margin-bottom: 12px !important;
    }

    .dojkala-step-trust .dojkala-step-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-step-trust .dojkala-step-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .dojkala-step-trust .dojkala-step-title {
        font-size: 16px !important;
    }

    .dojkala-step-trust .dojkala-license-wrapper {
        max-width: 260px !important;
        margin-bottom: 12px !important;
    }

    .dojkala-step-trust .dojkala-license-img {
        max-height: 30vh !important;
    }

    .dojkala-step-trust .dojkala-address-card {
        padding: 10px 14px !important;
        margin-bottom: 12px !important;
    }

    .dojkala-step-trust .dojkala-trust-links {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .dojkala-step-trust .dojkala-trust-link {
        padding: 10px 14px !important;
    }

    .dojkala-step-trust .dojkala-step-back-btn {
        padding: 10px 20px !important;
        min-height: 44px !important;
    }
}

/* Address Card */
.dojkala-address-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #7dd3fc !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: right !important;
    max-width: 360px !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.15) !important;
}

.dojkala-address-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
}

.dojkala-address-icon svg {
    width: 22px !important;
    height: 22px !important;
}

.dojkala-address-text {
    font-size: 14px !important;
    color: #1e40af !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
}

/* Trust Links */
.dojkala-trust-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.dojkala-trust-link {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.dojkala-trust-link:hover {
    transform: translateX(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    border-color: transparent !important;
}

.dojkala-trust-link-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.dojkala-trust-link-video .dojkala-trust-link-icon {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
}

.dojkala-trust-link-instagram .dojkala-trust-link-icon {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%) !important;
}

.dojkala-trust-link-info {
    flex: 1 !important;
    text-align: right !important;
}

.dojkala-trust-link-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 4px !important;
    display: block !important;
}

.dojkala-trust-link-desc {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
    display: block !important;
}

.dojkala-trust-link-arrow {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    color: #64748b !important;
    transition: all 0.3s ease !important;
}

.dojkala-trust-link:hover .dojkala-trust-link-arrow {
    background: #e2e8f0 !important;
    color: #1f2937 !important;
}

/* ============================================
   TESTIMONIALS STICKY BUTTON
   ============================================ */
.dojkala-btn-testimonials {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4) !important;
}

.dojkala-btn-testimonials:hover,
.dojkala-btn-testimonials:focus,
.dojkala-btn-testimonials:active {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.5) !important;
}

/* ============================================
   MENU CARDS - TESTIMONIALS MODAL
   ============================================ */
.dojkala-menu-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    max-width: 360px !important;
}

.dojkala-menu-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    text-align: right !important;
}

.dojkala-menu-card:hover {
    transform: translateX(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    border-color: transparent !important;
}

.dojkala-menu-card-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.dojkala-menu-card-video .dojkala-menu-card-icon {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
}

.dojkala-menu-card-process .dojkala-menu-card-icon {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
}

.dojkala-menu-card-trust .dojkala-menu-card-icon {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
}

.dojkala-menu-card-info {
    flex: 1 !important;
    text-align: right !important;
}

.dojkala-menu-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 4px !important;
    display: block !important;
}

.dojkala-menu-card-desc {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
    display: block !important;
}

.dojkala-menu-card-arrow {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    color: #64748b !important;
    transition: all 0.3s ease !important;
}

.dojkala-menu-card:hover .dojkala-menu-card-arrow {
    background: #e2e8f0 !important;
    color: #1f2937 !important;
}

/* Step Testimonials */
.dojkala-step-testimonials {
    text-align: center !important;
}

/* Testimonials Modal responsive for small screens */
@media (max-width: 400px) {
    .dojkala-step-testimonials {
        padding: 60px 14px 14px !important;
    }

    .dojkala-step-testimonials .dojkala-step-header {
        margin-bottom: 14px !important;
    }

    .dojkala-step-testimonials .dojkala-step-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-step-testimonials .dojkala-step-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .dojkala-step-testimonials .dojkala-step-title {
        font-size: 15px !important;
    }

    .dojkala-step-testimonials .dojkala-step-subtitle {
        font-size: 11px !important;
    }

    .dojkala-menu-cards {
        gap: 8px !important;
        margin-bottom: 14px !important;
        max-width: 100% !important;
    }

    .dojkala-menu-card {
        padding: 12px 12px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }

    .dojkala-menu-card-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .dojkala-menu-card-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .dojkala-menu-card-title {
        font-size: 13px !important;
    }

    .dojkala-menu-card-desc {
        font-size: 11px !important;
    }

    .dojkala-menu-card-arrow {
        width: 26px !important;
        height: 26px !important;
    }

    .dojkala-menu-card-arrow svg {
        width: 14px !important;
        height: 14px !important;
    }

    .dojkala-step-testimonials .dojkala-step-back-btn {
        max-width: 100% !important;
        margin: 10px auto 0 !important;
        padding: 10px 16px !important;
        min-height: 42px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}

/* Testimonials Modal for short viewport */
@media (max-width: 768px) and (max-height: 750px) {
    .dojkala-step-testimonials .dojkala-step-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 8px !important;
    }

    .dojkala-menu-cards {
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-menu-card {
        padding: 10px 10px !important;
    }

    .dojkala-menu-card-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .dojkala-menu-card-title {
        font-size: 12px !important;
    }

    .dojkala-menu-card-desc {
        font-size: 10px !important;
    }
}

/* Consultation Modal responsive for small screens */
@media (max-width: 400px) {
    .dojkala-consultation-content {
        padding: 56px 14px 14px !important;
    }

    .dojkala-consultation-header {
        margin-bottom: 12px !important;
    }

    .dojkala-consultation-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 8px !important;
    }

    .dojkala-consultation-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .dojkala-consultation-title {
        font-size: 15px !important;
    }

    .dojkala-consultation-subtitle {
        font-size: 11px !important;
    }

    .dojkala-consultation-cards {
        gap: 8px !important;
        margin-bottom: 12px !important;
        max-width: 100% !important;
    }

    .dojkala-contact-card {
        padding: 10px 12px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }

    .dojkala-card-avatar,
    .dojkala-card-avatar-placeholder,
    .dojkala-card-icon-wrapper {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .dojkala-card-avatar-placeholder svg,
    .dojkala-card-icon-wrapper svg {
        width: 18px !important;
        height: 18px !important;
    }

    .dojkala-card-title {
        font-size: 12px !important;
    }

    .dojkala-card-subtitle {
        font-size: 10px !important;
    }

    .dojkala-card-arrow {
        width: 24px !important;
        height: 24px !important;
    }

    .dojkala-card-arrow svg {
        width: 14px !important;
        height: 14px !important;
    }

    .dojkala-consultation-back {
        max-width: 100% !important;
        margin-top: 8px !important;
        padding: 10px 16px !important;
        min-height: 42px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}

/* Consultation Modal for short viewport */
@media (max-width: 768px) and (max-height: 750px) {
    .dojkala-consultation-header {
        margin-bottom: 10px !important;
    }

    .dojkala-consultation-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 6px !important;
    }

    .dojkala-consultation-cards {
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .dojkala-contact-card {
        padding: 8px 10px !important;
    }

    .dojkala-card-avatar,
    .dojkala-card-avatar-placeholder,
    .dojkala-card-icon-wrapper {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    .dojkala-card-title {
        font-size: 11px !important;
    }

    .dojkala-card-subtitle {
        font-size: 9px !important;
    }
}

/* Desktop short viewport for Consultation */
@media (min-width: 769px) and (max-height: 800px) {
    .dojkala-consultation-content {
        padding: 24px 20px !important;
    }

    .dojkala-consultation-header {
        margin-bottom: 12px !important;
    }

    .dojkala-consultation-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 8px !important;
    }

    .dojkala-consultation-cards {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .dojkala-contact-card {
        padding: 10px 14px !important;
    }

    .dojkala-consultation-back {
        padding: 10px 20px !important;
        min-height: 44px !important;
    }
}

/* ============================================
   PROCESS SHORTCODE BUTTON
   ============================================ */
button.dojkala-btn-process-shortcode,
.dojkala-btn-process-shortcode,
.elementor-widget-container .dojkala-btn-process-shortcode,
.woodmart-product-summary .dojkala-btn-process-shortcode,
.summary .dojkala-btn-process-shortcode,
.product .dojkala-btn-process-shortcode {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 18px 36px !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--doj-transition) !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 30px rgba(14, 165, 233, 0.35) !important;
    line-height: 1.4 !important;
    min-height: 58px !important;
    width: 100% !important;
}

button.dojkala-btn-process-shortcode:hover,
.dojkala-btn-process-shortcode:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 40px rgba(14, 165, 233, 0.45) !important;
}

.dojkala-btn-process-shortcode svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}

@media (max-width: 768px) {
    button.dojkala-btn-process-shortcode,
    .dojkala-btn-process-shortcode {
        display: none !important;
    }
}

/* Make order shortcode full width */
@media (min-width: 769px) {
    button.dojkala-btn-shortcode,
    .dojkala-btn-shortcode,
    button.dojkala-btn-process-shortcode,
    .dojkala-btn-process-shortcode {
        width: 100% !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */
html[dir="rtl"] .dojkala-modal-close,
html[dir="rtl"] .dojkala-consult-close {
    left: auto !important;
    right: 20px !important;
}

html[dir="rtl"] .dojkala-back-btn svg {
    transform: rotate(180deg) !important;
}

html[dir="rtl"] .dojkala-contact-card:hover {
    transform: translateY(-3px) translateX(-5px) !important;
}

html[dir="rtl"] .dojkala-contact-card:hover .dojkala-card-arrow {
    transform: translateX(4px) !important;
}

/* ============================================
   THEME COMPATIBILITY
   ============================================ */
.single-product .dojkala-btn-shortcode,
.woodmart-product-summary .dojkala-btn-shortcode {
    margin-top: 16px !important;
}

.elementor-widget-container button.dojkala-btn-shortcode {
    margin: 0 !important;
}

/* ============================================
   FORM SPACING OVERRIDES
   ============================================ */
.dojkala-extra-buttons {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

@media (max-width: 400px) {
    .dojkala-extra-buttons {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }
}

.dojkala-form {
    gap: 12px !important;
}

@media (max-width: 400px) {
    #dojkala-step-form {
        padding-top: 20px !important;
        padding-bottom: 10px !important;
    }
}

.dojkala-product-info {
    padding: 5px 15px !important;
    margin-bottom: 5px !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .dojkala-sticky-buttons,
    .dojkala-btn-shortcode,
    .dojkala-modal,
    .dojkala-consult-modal {
        display: none !important;
    }
}