/* ==========================================================================
   Tibetan Art Elements - Authentic Ashtamangala (Eight Auspicious Symbols)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Endless Knot (Shrivatsa) - Symbol of Interconnectedness
   -------------------------------------------------------------------------- */
.endless-knot-decoration {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M50 15 L50 30 M50 70 L50 85'/%3E%3Cpath d='M15 50 L30 50 M70 50 L85 50'/%3E%3Cpath d='M30 30 Q50 20 70 30 Q80 50 70 70 Q50 80 30 70 Q20 50 30 30'/%3E%3Cpath d='M35 35 Q50 28 65 35 Q72 50 65 65 Q50 72 35 65 Q28 50 35 35'/%3E%3Cpath d='M40 40 L40 60 M60 40 L60 60'/%3E%3Cpath d='M40 40 L60 40 M40 60 L60 60'/%3E%3Ccircle cx='50' cy='50' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Dharma Wheel (Dharmachakra) - Symbol of Buddha's Teachings
   -------------------------------------------------------------------------- */
.dharma-wheel-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1.5'%3E%3Ccircle cx='60' cy='60' r='45'/%3E%3Ccircle cx='60' cy='60' r='35'/%3E%3Ccircle cx='60' cy='60' r='8'/%3E%3Cline x1='60' y1='15' x2='60' y2='52'/%3E%3Cline x1='60' y1='68' x2='60' y2='105'/%3E%3Cline x1='15' y1='60' x2='52' y2='60'/%3E%3Cline x1='68' y1='60' x2='105' y2='60'/%3E%3Cline x1='28' y1='28' x2='54' y2='54'/%3E%3Cline x1='66' y1='66' x2='92' y2='92'/%3E%3Cline x1='92' y1='28' x2='66' y2='54'/%3E%3Cline x1='54' y1='66' x2='28' y2='92'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Lotus Flower (Padma) - Symbol of Purity
   -------------------------------------------------------------------------- */
.lotus-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1'%3E%3Cpath d='M50 55 Q35 45 30 30 Q35 20 50 15 Q65 20 70 30 Q65 45 50 55'/%3E%3Cpath d='M50 55 Q40 50 35 40 Q40 32 50 28 Q60 32 65 40 Q60 50 50 55'/%3E%3Cpath d='M30 50 Q20 40 18 28 Q25 20 38 22'/%3E%3Cpath d='M70 50 Q80 40 82 28 Q75 20 62 22'/%3E%3Cpath d='M22 45 Q12 38 10 25 Q18 18 30 22'/%3E%3Cpath d='M78 45 Q88 38 90 25 Q82 18 70 22'/%3E%3Cellipse cx='50' cy='52' rx='12' ry='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Traditional Tibetan Border Pattern
   -------------------------------------------------------------------------- */
.tibetan-border-top {
    position: relative;
}

.tibetan-border-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background:
        linear-gradient(90deg,
            var(--color-gold) 0%,
            var(--color-gold) 2%,
            transparent 2%,
            transparent 4%,
            var(--color-maroon) 4%,
            var(--color-maroon) 6%,
            transparent 6%,
            transparent 8%
        );
    background-size: 40px 100%;
}

.tibetan-border-bottom {
    position: relative;
}

.tibetan-border-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background:
        repeating-linear-gradient(90deg,
            var(--color-gold) 0px,
            var(--color-gold) 15px,
            var(--color-maroon) 15px,
            var(--color-maroon) 30px,
            var(--color-gold) 30px,
            var(--color-gold) 45px,
            transparent 45px,
            transparent 60px
        );
}

/* --------------------------------------------------------------------------
   Ornate Corner Decorations
   -------------------------------------------------------------------------- */
.tibetan-corners::before,
.tibetan-corners::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1.5'%3E%3Cpath d='M5 5 L5 35 Q5 45 15 45 L45 45'/%3E%3Cpath d='M10 10 L10 30 Q10 38 18 38 L38 38'/%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Cpath d='M14 20 Q20 14 26 20 Q20 26 14 20'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.6;
}

.tibetan-corners::before {
    top: 0;
    left: 0;
}

.tibetan-corners::after {
    top: 0;
    right: 0;
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Auspicious Cloud Pattern (Traditional Tibetan Clouds)
   -------------------------------------------------------------------------- */
.auspicious-clouds {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1' opacity='0.3'%3E%3Cpath d='M20 60 Q10 60 10 50 Q10 40 20 40 Q20 30 35 30 Q50 30 50 40 Q60 35 70 40 Q80 40 80 50 Q80 60 70 60 Z'/%3E%3Cpath d='M25 55 Q18 55 18 48 Q18 42 25 42 Q25 35 36 35 Q47 35 47 42 Q55 38 62 42 Q70 42 70 48 Q70 55 62 55 Z'/%3E%3Cpath d='M120 65 Q105 65 105 52 Q105 40 120 40 Q120 28 140 28 Q160 28 160 40 Q175 33 190 40 Q200 45 200 55 Q200 65 185 65 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
}

/* --------------------------------------------------------------------------
   Victory Banner Motif
   -------------------------------------------------------------------------- */
.victory-banner-accent {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 120'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1.5'%3E%3Cellipse cx='30' cy='15' rx='15' ry='8'/%3E%3Cpath d='M15 15 L15 100 M45 15 L45 100'/%3E%3Cpath d='M15 30 Q30 40 45 30'/%3E%3Cpath d='M15 50 Q30 60 45 50'/%3E%3Cpath d='M15 70 Q30 80 45 70'/%3E%3Cpath d='M15 100 L5 115 M45 100 L55 115'/%3E%3Cpath d='M15 100 L25 115 M45 100 L35 115'/%3E%3Ccircle cx='30' cy='15' r='5' fill='%23D4A843' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Conch Shell Decoration
   -------------------------------------------------------------------------- */
.conch-shell-motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1.5'%3E%3Cpath d='M40 10 Q60 20 65 45 Q65 70 50 85 Q35 95 25 85 Q15 75 20 55 Q25 35 40 10'/%3E%3Cpath d='M40 20 Q55 28 58 48 Q58 68 47 78'/%3E%3Cpath d='M40 30 Q50 36 52 50 Q52 64 44 72'/%3E%3Cpath d='M35 85 Q30 90 25 85'/%3E%3Cpath d='M25 55 Q20 50 25 45'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Combined Decorative Header with Multiple Symbols
   -------------------------------------------------------------------------- */
.tibetan-header-decoration {
    position: relative;
    overflow: visible;
}

.tibetan-header-decoration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%238B2332' stroke-width='0.8' opacity='0.12'%3E%3Cpath d='M50 15 L50 30 M50 70 L50 85 M15 50 L30 50 M70 50 L85 50'/%3E%3Cpath d='M30 30 Q50 20 70 30 Q80 50 70 70 Q50 80 30 70 Q20 50 30 30'/%3E%3Cpath d='M35 35 Q50 28 65 35 Q72 50 65 65 Q50 72 35 65 Q28 50 35 35'/%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%23D4A843' opacity='0.4'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='0.5' opacity='0.15'%3E%3Cpath d='M20 60 Q10 60 10 50 Q10 40 20 40 Q20 30 35 30 Q50 30 50 40 Q60 35 70 40 Q80 40 80 50 Q80 60 70 60 Z'/%3E%3Cpath d='M120 65 Q105 65 105 52 Q105 40 120 40 Q120 28 140 28 Q160 28 160 40 Q175 33 190 40 Q200 45 200 55 Q200 65 185 65 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px, 250px 100px;
    background-position: center, top;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Decorative Divider with Dharma Wheel
   -------------------------------------------------------------------------- */
.tibetan-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    position: relative;
}

.tibetan-divider::before,
.tibetan-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), var(--color-maroon));
}

.tibetan-divider::after {
    background: linear-gradient(90deg, var(--color-maroon), var(--color-gold), transparent);
}

.tibetan-divider-symbol {
    width: 50px;
    height: 50px;
    margin: 0 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1.5'%3E%3Ccircle cx='25' cy='25' r='20'/%3E%3Ccircle cx='25' cy='25' r='14'/%3E%3Ccircle cx='25' cy='25' r='4'/%3E%3Cline x1='25' y1='5' x2='25' y2='21'/%3E%3Cline x1='25' y1='29' x2='25' y2='45'/%3E%3Cline x1='5' y1='25' x2='21' y2='25'/%3E%3Cline x1='29' y1='25' x2='45' y2='25'/%3E%3Cline x1='11' y1='11' x2='22' y2='22'/%3E%3Cline x1='28' y1='28' x2='39' y2='39'/%3E%3Cline x1='39' y1='11' x2='28' y2='22'/%3E%3Cline x1='22' y1='28' x2='11' y2='39'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
}

/* --------------------------------------------------------------------------
   Footer Ornate Border
   -------------------------------------------------------------------------- */
.tibetan-footer-border {
    position: relative;
}

.tibetan-footer-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background:
        repeating-linear-gradient(90deg,
            var(--color-gold) 0px,
            var(--color-gold) 8px,
            transparent 8px,
            transparent 12px,
            var(--color-maroon-light) 12px,
            var(--color-maroon-light) 20px,
            transparent 20px,
            transparent 24px,
            var(--color-gold) 24px,
            var(--color-gold) 32px,
            transparent 32px,
            transparent 40px
        );
}

/* --------------------------------------------------------------------------
   Treasure Vase Accent (for special sections)
   -------------------------------------------------------------------------- */
.treasure-vase-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1.5'%3E%3Cellipse cx='40' cy='20' rx='25' ry='12'/%3E%3Cpath d='M15 20 Q10 50 20 80 Q30 100 40 105 Q50 100 60 80 Q70 50 65 20'/%3E%3Cellipse cx='40' cy='105' rx='12' ry='5'/%3E%3Cpath d='M28 20 L28 35 M52 20 L52 35'/%3E%3Cpath d='M40 8 Q45 5 50 8 M40 8 Q35 5 30 8'/%3E%3Ccircle cx='40' cy='55' r='8' opacity='0.5'/%3E%3Cpath d='M32 55 Q40 45 48 55 Q40 65 32 55'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Golden Fish Pair (for prosperity sections)
   -------------------------------------------------------------------------- */
.golden-fish-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1.5'%3E%3Cpath d='M25 25 Q40 15 55 25 Q65 35 55 45 Q40 55 25 45 Q15 35 25 25'/%3E%3Cpath d='M55 25 L70 15 M55 45 L70 55'/%3E%3Ccircle cx='35' cy='32' r='3'/%3E%3Cpath d='M95 55 Q80 65 65 55 Q55 45 65 35 Q80 25 95 35 Q105 45 95 55'/%3E%3Cpath d='M65 55 L50 65 M65 35 L50 25'/%3E%3Ccircle cx='85' cy='48' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   Individual Auspicious Symbol Icons
   ========================================================================== */

/* --------------------------------------------------------------------------
   Endless Knot Icon
   -------------------------------------------------------------------------- */
.endless-knot-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M25 25 L25 75 L75 75 L75 25 L25 25'/%3E%3Cpath d='M35 35 L35 65 L65 65 L65 35 L35 35'/%3E%3Cpath d='M25 50 L35 50 M65 50 L75 50'/%3E%3Cpath d='M50 25 L50 35 M50 65 L50 75'/%3E%3Cpath d='M25 25 C25 15 35 15 50 15 C65 15 75 15 75 25'/%3E%3Cpath d='M25 75 C25 85 35 85 50 85 C65 85 75 85 75 75'/%3E%3Ccircle cx='50' cy='50' r='6' fill='%23D4A843'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --------------------------------------------------------------------------
   Dharma Wheel Icon
   -------------------------------------------------------------------------- */
.dharma-wheel-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='2.5'%3E%3Ccircle cx='50' cy='50' r='42'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23D4A843'/%3E%3Cline x1='50' y1='8' x2='50' y2='42'/%3E%3Cline x1='50' y1='58' x2='50' y2='92'/%3E%3Cline x1='8' y1='50' x2='42' y2='50'/%3E%3Cline x1='58' y1='50' x2='92' y2='50'/%3E%3Cline x1='20' y1='20' x2='43' y2='43'/%3E%3Cline x1='57' y1='57' x2='80' y2='80'/%3E%3Cline x1='80' y1='20' x2='57' y2='43'/%3E%3Cline x1='43' y1='57' x2='20' y2='80'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dharma-wheel-icon.large {
    width: 80px;
    height: 80px;
}

/* --------------------------------------------------------------------------
   Lotus Icon
   -------------------------------------------------------------------------- */
.lotus-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='2'%3E%3Cpath d='M50 70 Q30 55 25 35 Q30 20 50 10 Q70 20 75 35 Q70 55 50 70' fill='%23D4A843' fill-opacity='0.2'/%3E%3Cpath d='M50 70 Q38 60 35 45 Q38 32 50 25 Q62 32 65 45 Q62 60 50 70'/%3E%3Cpath d='M25 60 Q12 48 10 30 Q18 18 35 22'/%3E%3Cpath d='M75 60 Q88 48 90 30 Q82 18 65 22'/%3E%3Cpath d='M15 55 Q5 45 5 28 Q12 18 28 22'/%3E%3Cpath d='M85 55 Q95 45 95 28 Q88 18 72 22'/%3E%3Cellipse cx='50' cy='68' rx='18' ry='6' fill='%23D4A843' fill-opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --------------------------------------------------------------------------
   Conch Shell Icon
   -------------------------------------------------------------------------- */
.conch-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='2'%3E%3Cpath d='M40 5 Q65 20 70 50 Q70 80 50 92 Q30 98 20 85 Q10 72 18 50 Q28 25 40 5' fill='%23D4A843' fill-opacity='0.15'/%3E%3Cpath d='M40 15 Q58 28 62 50 Q62 72 48 82'/%3E%3Cpath d='M40 25 Q52 35 55 52 Q55 68 45 76'/%3E%3Cpath d='M40 35 Q48 42 50 54 Q50 65 43 70'/%3E%3Cpath d='M30 88 Q22 92 18 85'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --------------------------------------------------------------------------
   Victory Banner Icon
   -------------------------------------------------------------------------- */
.victory-banner-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='2'%3E%3Cellipse cx='30' cy='12' rx='18' ry='8' fill='%23D4A843' fill-opacity='0.2'/%3E%3Cpath d='M12 12 L12 85 M48 12 L48 85'/%3E%3Cpath d='M12 28 Q30 38 48 28'/%3E%3Cpath d='M12 48 Q30 58 48 48'/%3E%3Cpath d='M12 68 Q30 78 48 68'/%3E%3Cpath d='M12 85 L4 98 M12 85 L20 98'/%3E%3Cpath d='M48 85 L40 98 M48 85 L56 98'/%3E%3Ccircle cx='30' cy='12' r='4' fill='%23D4A843'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --------------------------------------------------------------------------
   Treasure Vase Icon
   -------------------------------------------------------------------------- */
.treasure-vase-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='2'%3E%3Cellipse cx='40' cy='18' rx='22' ry='10' fill='%23D4A843' fill-opacity='0.2'/%3E%3Cpath d='M18 18 Q12 45 22 72 Q32 90 40 95 Q48 90 58 72 Q68 45 62 18'/%3E%3Cellipse cx='40' cy='95' rx='10' ry='4'/%3E%3Cpath d='M30 18 L30 32 M50 18 L50 32'/%3E%3Cpath d='M40 5 Q46 2 52 5 M40 5 Q34 2 28 5'/%3E%3Ccircle cx='40' cy='50' r='10' fill='%23D4A843' fill-opacity='0.3'/%3E%3Cpath d='M33 50 Q40 40 47 50 Q40 60 33 50'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --------------------------------------------------------------------------
   Golden Fish Icon
   -------------------------------------------------------------------------- */
.golden-fish-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='2'%3E%3Cpath d='M25 20 Q45 8 65 20 Q78 35 65 50 Q45 62 25 50 Q12 35 25 20' fill='%23D4A843' fill-opacity='0.15'/%3E%3Cpath d='M65 20 L82 8 M65 50 L82 62'/%3E%3Ccircle cx='38' cy='30' r='4' fill='%23D4A843'/%3E%3Cpath d='M75 60 Q55 72 35 60 Q22 45 35 30 Q55 18 75 30 Q88 45 75 60' fill='%23D4A843' fill-opacity='0.15'/%3E%3Cpath d='M35 60 L18 72 M35 30 L18 18'/%3E%3Ccircle cx='62' cy='50' r='4' fill='%23D4A843'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --------------------------------------------------------------------------
   Parasol Icon
   -------------------------------------------------------------------------- */
.parasol-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='2'%3E%3Cpath d='M10 40 Q50 5 90 40' fill='%23D4A843' fill-opacity='0.2'/%3E%3Cpath d='M10 40 Q50 25 90 40'/%3E%3Cpath d='M50 40 L50 95'/%3E%3Cellipse cx='50' cy='95' rx='8' ry='3'/%3E%3Cpath d='M25 40 Q50 20 75 40'/%3E%3Cpath d='M10 42 L10 50 M30 38 L30 48 M50 35 L50 45 M70 38 L70 48 M90 42 L90 50'/%3E%3Ccircle cx='50' cy='8' r='4' fill='%23D4A843'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ==========================================================================
   Auspicious Symbols Row
   ========================================================================== */
.auspicious-symbols-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 0;
}

.auspicious-symbols-row.small {
    gap: 1rem;
    padding: 1rem 0;
}

.auspicious-symbols-row.small .auspicious-symbol {
    width: 30px;
    height: 30px;
}

.auspicious-symbol {
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.auspicious-symbol:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ==========================================================================
   Unified Tibetan Frame System - Connected Corners & Borders
   Like traditional thangka painting frames
   ========================================================================== */

/* Main frame container */
.tibetan-frame {
    position: relative;
    padding: 8px;
}

/* Corner pieces with extending lines */
.tibetan-frame::before,
.tibetan-frame::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

/* Top border line connecting corners */
.tibetan-frame::before {
    top: 3px;
    left: 50px;
    right: 50px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-gold) 0%,
        var(--color-gold) 30%,
        var(--color-maroon) 50%,
        var(--color-gold) 70%,
        var(--color-gold) 100%
    );
}

/* Bottom border line connecting corners */
.tibetan-frame::after {
    bottom: 3px;
    left: 50px;
    right: 50px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-gold) 0%,
        var(--color-gold) 30%,
        var(--color-maroon) 50%,
        var(--color-gold) 70%,
        var(--color-gold) 100%
    );
}

/* Frame inner element for side borders */
.tibetan-frame-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

/* Left side border */
.tibetan-frame-inner::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 50px;
    bottom: 50px;
    width: 2px;
    background: linear-gradient(180deg,
        var(--color-gold) 0%,
        var(--color-gold) 30%,
        var(--color-maroon) 50%,
        var(--color-gold) 70%,
        var(--color-gold) 100%
    );
}

/* Right side border */
.tibetan-frame-inner::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 50px;
    bottom: 50px;
    width: 2px;
    background: linear-gradient(180deg,
        var(--color-gold) 0%,
        var(--color-gold) 30%,
        var(--color-maroon) 50%,
        var(--color-gold) 70%,
        var(--color-gold) 100%
    );
}

/* Corner decorations - self-contained decorative squares */
.corner {
    position: absolute;
    width: 40px;
    height: 40px;
    /* SVG: Self-contained corner square with ornament inside */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='2'%3E%3C!-- Outer square border --%3E%3Crect x='2' y='2' width='36' height='36' rx='2'/%3E%3C!-- Inner square border --%3E%3Crect x='6' y='6' width='28' height='28' rx='1'/%3E%3C!-- Corner ornament circle --%3E%3Ccircle cx='20' cy='20' r='8'/%3E%3C!-- Diamond inside circle --%3E%3Cpath d='M20 12 L28 20 L20 28 L12 20 Z' fill='%23D4A843' fill-opacity='0.3'/%3E%3C!-- Center dot --%3E%3Ccircle cx='20' cy='20' r='3' fill='%23D4A843'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

.corner-tl {
    top: 0;
    left: 0;
}

.corner-tr {
    top: 0;
    right: 0;
    transform: scaleX(-1);
}

.corner-bl {
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
}

.corner-br {
    bottom: 0;
    right: 0;
    transform: scale(-1, -1);
}

/* Simplified frame - top/bottom only (for headers) */
.tibetan-frame-horizontal {
    position: relative;
}

.tibetan-frame-horizontal::before,
.tibetan-frame-horizontal::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    pointer-events: none;
}

.tibetan-frame-horizontal::before {
    top: 0;
    background:
        /* Left corner ornament */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 4'%3E%3Crect fill='%23D4A843' x='0' y='0' width='40' height='4'/%3E%3Ccircle cx='35' cy='2' r='3' fill='%238B2332'/%3E%3C/svg%3E") left center no-repeat,
        /* Right corner ornament */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 4'%3E%3Crect fill='%23D4A843' x='0' y='0' width='40' height='4'/%3E%3Ccircle cx='5' cy='2' r='3' fill='%238B2332'/%3E%3C/svg%3E") right center no-repeat,
        /* Center line */
        linear-gradient(90deg, var(--color-gold), var(--color-maroon) 50%, var(--color-gold));
    background-size: 40px 4px, 40px 4px, 100% 4px;
}

.tibetan-frame-horizontal::after {
    bottom: 0;
    background:
        /* Left corner ornament */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 4'%3E%3Crect fill='%23D4A843' x='0' y='0' width='40' height='4'/%3E%3Ccircle cx='35' cy='2' r='3' fill='%238B2332'/%3E%3C/svg%3E") left center no-repeat,
        /* Right corner ornament */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 4'%3E%3Crect fill='%23D4A843' x='0' y='0' width='40' height='4'/%3E%3Ccircle cx='5' cy='2' r='3' fill='%238B2332'/%3E%3C/svg%3E") right center no-repeat,
        /* Center line */
        linear-gradient(90deg, var(--color-gold), var(--color-maroon) 50%, var(--color-gold));
    background-size: 40px 4px, 40px 4px, 100% 4px;
}

/* Card corners (smaller, for cards/panels) */
.card-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1.5'%3E%3Crect x='1' y='1' width='18' height='18' rx='1'/%3E%3Ccircle cx='10' cy='10' r='4'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23D4A843'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.7;
}

.card-corner.corner-tl { top: 0; left: 0; }
.card-corner.corner-tr { top: 0; right: 0; transform: scaleX(-1); }
.card-corner.corner-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.card-corner.corner-br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* ==========================================================================
   Tibetan Clouds Background
   ========================================================================== */
.tibetan-clouds-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1' opacity='0.15'%3E%3Cpath d='M40 120 Q20 120 20 100 Q20 80 40 80 Q40 60 70 60 Q100 60 100 80 Q120 70 140 80 Q160 80 160 100 Q160 120 140 120 Z'/%3E%3Cpath d='M50 110 Q35 110 35 95 Q35 82 50 82 Q50 68 75 68 Q95 68 95 82 Q110 75 125 82 Q140 85 140 98 Q140 110 125 110 Z'/%3E%3Cpath d='M240 130 Q210 130 210 105 Q210 80 240 80 Q240 55 280 55 Q320 55 320 80 Q350 65 380 80 Q400 90 400 110 Q400 130 370 130 Z'/%3E%3Cpath d='M250 120 Q225 120 225 100 Q225 80 250 80 Q250 60 285 60 Q315 60 315 80 Q340 68 365 80 Q385 88 385 105 Q385 120 360 120 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 400px 200px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Tibetan Panel (Card with decorative border)
   ========================================================================== */
.tibetan-panel {
    position: relative;
    border: 2px solid var(--color-gold);
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.03) 0%, transparent 100%);
}

.tibetan-panel::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 1px solid rgba(212, 168, 67, 0.3);
    border-radius: 6px;
    pointer-events: none;
}

/* ==========================================================================
   Tibetan Card Styling
   ========================================================================== */
.tibetan-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(251, 248, 241, 0.95) 100%);
    border: 1px solid rgba(212, 168, 67, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.tibetan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-maroon), var(--color-gold), var(--color-maroon));
}

/* ==========================================================================
   Tibetan Title Underline
   ========================================================================== */
.tibetan-title-underline {
    width: 200px;
    height: 20px;
    margin: 1rem auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1.5'%3E%3Cpath d='M0 10 L70 10'/%3E%3Ccircle cx='85' cy='10' r='6'/%3E%3Cpath d='M85 4 Q90 10 85 16 Q80 10 85 4' fill='%23D4A843'/%3E%3Ccircle cx='100' cy='10' r='4' fill='%23D4A843'/%3E%3Ccircle cx='115' cy='10' r='6'/%3E%3Cpath d='M115 4 Q120 10 115 16 Q110 10 115 4' fill='%23D4A843'/%3E%3Cpath d='M130 10 L200 10'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ==========================================================================
   Page Header Decorations
   ========================================================================== */
.tibetan-page-header {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 2rem;
    overflow: hidden;
}

.tibetan-page-header .tibetan-corners {
    z-index: 1;
}

.page-title-decoration {
    text-align: center;
    margin-bottom: 1rem;
}

.page-title-decoration .dharma-wheel-icon {
    width: 50px;
    height: 50px;
    opacity: 0.7;
}

/* ==========================================================================
   Section Decorations
   ========================================================================== */
.tibetan-section {
    position: relative;
    background: linear-gradient(180deg, rgba(251, 248, 241, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.tibetan-section-alt {
    position: relative;
    background: linear-gradient(180deg, rgba(139, 35, 50, 0.02) 0%, rgba(251, 248, 241, 0.5) 100%);
}

.tibetan-section-border {
    height: 8px;
    margin-top: 4rem;
    background: repeating-linear-gradient(90deg,
        var(--color-gold) 0px,
        var(--color-gold) 20px,
        transparent 20px,
        transparent 25px,
        var(--color-maroon) 25px,
        var(--color-maroon) 45px,
        transparent 45px,
        transparent 50px
    );
    opacity: 0.6;
}

.section-header-decorated {
    text-align: center;
    padding: 1rem 0;
}

.section-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.section-title-wrap .tibetan-divider {
    flex: 0 1 100px;
    padding: 0;
}

/* ==========================================================================
   Hero Section Tibetan Styling
   ========================================================================== */
.tibetan-hero {
    position: relative;
    min-height: 40vh;
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.tibetan-hero .hero-corners {
    z-index: 1;
}

.hero-pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%238B2332' stroke-width='0.5' opacity='0.08'%3E%3Cpath d='M25 25 L25 75 L75 75 L75 25 L25 25'/%3E%3Cpath d='M35 35 L35 65 L65 65 L65 35 L35 35'/%3E%3Cpath d='M25 50 L35 50 M65 50 L75 50'/%3E%3Cpath d='M50 25 L50 35 M50 65 L50 75'/%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 150px 150px;
    pointer-events: none;
    z-index: 0;
}

.hero-symbol {
    text-align: center;
    margin-bottom: 1.5rem;
}

.hero-symbol .dharma-wheel-icon.large {
    width: 100px;
    height: 100px;
    opacity: 0.8;
}

.endless-knot-decoration {
    width: 120px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
}

/* ==========================================================================
   CTA Section Tibetan Styling
   ========================================================================== */
.tibetan-cta {
    position: relative;
    overflow: hidden;
}

.cta-pattern-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='0.5' opacity='0.1'%3E%3Cpath d='M100 30 L100 60 M100 140 L100 170'/%3E%3Cpath d='M30 100 L60 100 M140 100 L170 100'/%3E%3Cpath d='M50 50 Q100 30 150 50 Q170 100 150 150 Q100 170 50 150 Q30 100 50 50'/%3E%3Cpath d='M65 65 Q100 50 135 65 Q150 100 135 135 Q100 150 65 135 Q50 100 65 65'/%3E%3Ccircle cx='100' cy='100' r='15'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Content Decorations
   ========================================================================== */
.content-decoration {
    position: absolute;
    top: 2rem;
    width: 30px;
    bottom: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 100'%3E%3Cg fill='none' stroke='%23D4A843' stroke-width='1' opacity='0.3'%3E%3Cpath d='M15 0 L15 100'/%3E%3Ccircle cx='15' cy='20' r='5'/%3E%3Ccircle cx='15' cy='50' r='5'/%3E%3Ccircle cx='15' cy='80' r='5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 30px 100px;
    background-repeat: repeat-y;
    pointer-events: none;
}

.left-decoration {
    left: -50px;
}

.right-decoration {
    right: -50px;
}

.page-bottom-decoration {
    padding: 2rem 0;
    text-align: center;
}

/* ==========================================================================
   Footer Tibetan Styling
   ========================================================================== */
.tibetan-footer-decoration {
    position: relative;
    overflow: visible;
}

.tibetan-footer-decoration .tibetan-border-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--color-maroon),
        var(--color-gold),
        var(--color-maroon),
        var(--color-gold),
        var(--color-maroon)
    );
}

.footer-corners {
    z-index: 1;
}

/* Top border for header */
.tibetan-top-border {
    height: 4px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-gold) 20%,
        var(--color-maroon) 50%,
        var(--color-gold) 80%,
        transparent
    );
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .corner {
        width: 40px;
        height: 40px;
    }

    .auspicious-symbols-row {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .endless-knot-icon,
    .dharma-wheel-icon,
    .lotus-icon,
    .conch-icon,
    .victory-banner-icon,
    .treasure-vase-icon,
    .golden-fish-icon,
    .parasol-icon {
        width: 32px;
        height: 32px;
    }

    .dharma-wheel-icon.large {
        width: 60px;
        height: 60px;
    }

    .hero-symbol .dharma-wheel-icon.large {
        width: 70px;
        height: 70px;
    }

    .tibetan-title-underline {
        width: 150px;
    }

    .content-decoration {
        display: none;
    }
}