/* ================================================================
   DESTINY MATRIX CHART — index.css v2.0
   Upload to: wp-content/plugins/destiny-matrix-chart/assets/styles/
   NOTE: Calculator form styling now lives entirely in dm-premium.css.
   This file only styles the chart output, chakra table, and SVG.
   ================================================================ */

/* ── CHART OUTPUT (scoped — legacy panels only, never override plugin cards) ── */
.dm-embed .show-charts {
    width: 100%;
    margin: 0;
    padding: 0;
}

.dm-embed .show-charts.display-none {
    display: none !important;
}

/* Legacy panel wrappers only — do NOT blanket all descendants */
.dm-embed #panel1,
.dm-embed #panel2,
.dm-embed #panelX,
.dm-embed .personal-calculator,
.dm-embed .output2,
.dm-embed .info-txt {
    background: transparent !important;
    background-color: transparent !important;
}

/* Chart text inside the matrix SVG and chakra table */
.dm-embed .dm-chart-area,
.dm-embed .dm-chart-area .chakra-table,
.dm-embed .dm-chart-area .chakra-table td,
.dm-embed .dm-chart-area .chakra-table th {
    background: transparent;
    background-color: transparent;
}

/* ================================================================
   CHAKRA TABLE
   ================================================================ */
.chakra-table {
    border-spacing: 0;
    border-radius: 10px;
    width: 100%;
    max-width: 50em;
    display: block;
}

.chakra-table td:first-child, .chakra-table th:first-child { border-left: 1px solid #fff; }
.chakra-table tr:first-child th, .chakra-table tr:last-child td { border-top: 1px solid #fff; }
.chakra-table td, .chakra-table th { border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
.chakra-name__bottom td:first { border-bottom-left-radius: 10px; }
.chakra-table__result { margin-top: 1em; }

.chakra-name {
    width: 16.25em; height: 3.0625em;
    padding: .3125em; text-align: left;
}

.chakra-name-left {
    justify-content: center;
    flex-direction: column-reverse;
    align-items: flex-start;
    padding-left: 2.9375em;
}

.chakra-name-flex { display: flex; align-items: baseline; }

/* Chakra circles */
#circle-sahastrara:before {
    font-family: gfs didot; font-size: 1.375em; content: "7";
    width: 1.25em; border-radius: 50%; height: 1.25em;
    display: inline-flex; background: #b653f7;
    justify-content: center; margin-right: 1.25em;
    box-shadow: 0 0 .625em .625em #b653f7;
}
#circle-ajna:before {
    font-family: gfs didot; font-size: 1.375em; content: "6";
    width: 1.25em; border-radius: 50%; height: 1.25em;
    display: inline-flex; background: #3d54f5;
    justify-content: center; margin-right: 1.25em;
    box-shadow: 0 0 .625em .625em #3d54f5;
}
#circle-vishuddha:before {
    font-family: gfs didot; font-size: 1.375em; content: "5";
    width: 1.25em; border-radius: 50%; height: 1.25em;
    display: inline-flex; color: #000; background: #74e0f8;
    justify-content: center; margin-right: 1.25em;
    box-shadow: 0 0 .625em .625em #74e0f8;
}
#circle-anahata:before {
    font-family: gfs didot; font-size: 1.375em; content: "4";
    width: 1.25em; border-radius: 50%; height: 1.25em;
    display: inline-flex; color: #000; background: #b6fd57;
    justify-content: center; margin-right: 1.25em;
    box-shadow: 0 0 .625em .625em #b6fd57;
}
#circle-manipura:before {
    font-family: gfs didot; font-size: 1.375em; content: "3";
    width: 1.25em; border-radius: 50%; height: 1.25em;
    display: inline-flex; color: #000; background: #fbe49d;
    justify-content: center; margin-right: 1.25em;
    box-shadow: 0 0 .625em .625em #fbe49d;
}
#circle-svadhishtana:before {
    font-family: gfs didot; font-size: 1.375em; content: "2";
    width: 1.25em; border-radius: 50%; height: 1.25em;
    display: inline-flex; color: #f5f5f5; background: #ed7233;
    justify-content: center; margin-right: 1.25em;
    box-shadow: 0 0 .625em .625em #ed7233;
}
#circle-muladhara:before {
    font-family: gfs didot; font-size: 1.375em; content: "1";
    width: 1.25em; border-radius: 50%; height: 1.25em;
    display: inline-flex; color: #f5f5f5; background: #ea4631;
    justify-content: center; margin-right: 1.25em;
    box-shadow: 0 0 .625em .625em #ea4631;
}

.chakra-td { padding: .3125em; text-align: center; width: 12.5em; }
.chakra-tr {
    font-family: inter; text-align-last: center;
    padding: .3125em; text-align: center; background-color: #050215;
}
.chakra-name__bottom { box-shadow: none; }
.chakra-name__radius-left { background-color: #827d78; border-top-left-radius: 10px; }
.chakra-name__radius-right { background-color: #827d78; border-top-right-radius: 10px; }
.chakra-name__radius-left-bottom { background-color: #050215; border-bottom-left-radius: 10px; border-top-left-radius: 10px; }
.chakra-name__radius-right-bottom { background-color: #050215; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.chakra-name__radius-right-bottom2 { border-bottom-right-radius: 10px; }
.chakra-table-header > :nth-child(2), .chakra-table-header > :nth-child(3) { background-color: #827d78; }
.chakra-table-header { font-family: inter; text-transform: uppercase; }

/* ================================================================
   CHART LAYOUT
   ================================================================ */
.personal-calculator {
    display: flex;
    justify-content: center;
    font-size: 3.375em;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
}

.output-personal-date, .output2 { text-align: center; font-size: 1.25em; font-family: Inter; }
.gray { color: #827d78; }
.smoky-white { color: #f9f9f8; }
.smoky-white2 { color: #fff8db; }

#decode-matrix-btn { max-width: 20em; margin-top: 6.5em; margin-bottom: 6.5em; }

.dm-embed .matrix-container,
.dm-embed .compatibility-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
}

.dm-embed .pento { width: 100%; height: auto; display: flex; justify-content: center; }
.display-none { display: none !important; }

.dm-embed #matrix {
  float: none;
  margin: 0 auto;
  width: 100%;
  max-width: var(--dm-chart-size, min(826px, 100%));
  min-width: 0;
  height: auto;
  aspect-ratio: 680 / 600;
  overflow: visible;
}

.dm-embed :not(svg):not(path):not(circle):not(text):not(g):not(rect):not(line):not(polyline):not(polygon) { transform-origin: 0 0; }
svg:not(:root) { overflow-clip-margin: content-box; overflow: visible; }
text { cursor: default; }

/* ================================================================
   SVG CHART CLASSES
   ================================================================ */
.cls-4 { stroke-dasharray: 0,49,10,10,10,10,10,10,10,10,10,10,10,10,10,41; }
.cls-3, .cls-4, .cls-18 { stroke-width: 1.5px; }
.cls-5, .cls-7 { stroke-width: 1px; }
.cls-18 { stroke-dasharray: 0,25,10,50,10,50,10,25; }
.cls-18, .cls-3, .cls-4 { stroke-miterlimit: 10; stroke: #fff; fill: none; }
.cls-5, .cls-6 { stroke: #b653f7; fill: #b653f7; }
.cls-7, .cls-8 { stroke: #ea4631; fill: #ea4631; }
.cls-10 { fill: #b653f7; }
.cls-13 { fill: #3d54f5; }
.cls-15 { fill: #74e0f8; }
.cls-19 { fill: #ea4631; }
.cls-22 { fill: #ed7233; }
.cls-25 { fill: #ffed47; }
.cls-26 { fill: #b6fd57; }
.cls-24, .cls-21, .cls-23, .cls-53 { fill: #fffcf0; }
path.cls-53 { fill: red; }
.matrix-value-point { text-anchor: middle; alignment-baseline: middle; }
.cls-28 { font-size: 12.9501px; line-height: 11px; }
.cls-29 { font-size: 12.0251px; line-height: 10px; }
.cls-33 { font-size: 12px; line-height: 81.9%; }
.cls-43 { font-size: 5.76471px; line-height: 81.9%; }
.cls-44 { font-size: 11.5587px; line-height: 81.9%; }
.cls-54, .cls-55, .cls-56 { font-size: 29.7851px; line-height: 37px; }
.cls-57, .cls-58 { font-size: 17.2946px; line-height: 22px; }
.cls-59, .cls-60 { font-size: 21.1378px; line-height: 26px; }
.cls-61 { font-size: 6px; line-height: 81.9%; }
.cls-28, .cls-29, .cls-33, .cls-43, .cls-44, .cls-54, .cls-57, .cls-59, .cls-61 { fill: #f5f5f5; }
.cls-55, .cls-58, .cls-60 { fill: #000; }
.cls-56 { fill: #d2b154; }

/* ================================================================
   TABLE BASE
   ================================================================ */
.dm-embed tbody { font-family: inter; font-size: 1.25em; }
.dm-embed tr { text-align: center; }
.font-size16 { font-family: inter; font-size: 1em; }
.table-padding { padding-bottom: 1.25em; }
.table-padding-top { padding-top: 1.25em; }
.font-size18 { font-family: inter; font-size: 1.125em; }
#chakra_table { position: relative; }

/* ================================================================
   BASE CIRCLE
   ================================================================ */
.base-circle {
    border: 2px solid rgba(255,255,255,0.8);
    border-radius: 50%;
    width: 2.5em; height: 2.5em;
    display: inline-flex;
    align-items: center; justify-content: center;
    text-align: center; line-height: 1;
    color: #fff; font-weight: 600;
}

/* ================================================================
   COMPATIBILITY TABLE
   ================================================================ */
.compatibility-table__adaptiv { display: none; }

/* ================================================================
   PERSONAL CHART — PURPOSES SECTION
   ================================================================ */
.dm-embed .info-txt {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 10px;
}

.dm-embed #purposes {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
}

.dm-embed #purposes .smoky-white2 h3,
.dm-embed #purposes h3 {
    font-size: 1.05em !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: center !important;
    border-bottom: 2px solid rgba(154, 122, 46, 0.5) !important;
    padding-bottom: 8px !important;
    margin: 0 0 8px 0 !important;
}

.dm-embed #purposes .font-size16 td,
.dm-embed #purposes tr.font-size16 td,
.dm-embed #purposes tr.trade td {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.95em !important;
    text-align: center !important;
    line-height: 1.65 !important;
    padding: 8px 12px !important;
}

.dm-embed #purposes tr.font-size18 td:first-child {
    color: rgba(255,255,255,0.6) !important;
    font-size: 1em !important;
    text-align: right !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
}

.dm-embed #skypoint, .dm-embed #earthpoint, .dm-embed #perspurpose,
.dm-embed #malepoint, .dm-embed #femalepoint, .dm-embed #socialpurpose,
.dm-embed #generalpurpose, .dm-embed #planetarypurpose {
    border: 2px solid rgba(154, 122, 46, 0.85) !important;
    border-radius: 50% !important;
    width: 48px !important; height: 48px !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    text-align: center !important; line-height: 1 !important;
    color: #ffffff !important;
    font-size: 1.1em !important; font-weight: 700 !important;
    background: rgba(154, 122, 46, 0.12) !important;
    box-shadow: 0 0 14px rgba(154, 122, 46, 0.35) !important;
    margin: 4px !important;
}

.dm-embed #blom { text-align: center !important; padding-top: 10px !important; }
.dm-embed #blom2 { text-align: center !important; padding-top: 10px !important; }

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */
@media screen and (max-width: 479px) {
    .desteny-container p, .personal-calculator { font-size: 28px; text-align: center; }
    .dm-embed .footer p { margin-bottom: 25px; font-size: 18px; }
    .desteny-container, .personal-calculator p { padding: 40px 0; }
    .output-personal-date, .output2 { font-size: 16px; text-align: center; }
    .personal-calculator p { margin: 0; }
    .dm-embed tbody { font-size: 10px; }
    .chakra-table { max-width: 100%; }
    .star__wrap1, .star__wrap2, .star__wrap3, .star__wrap4,
    .star__wrap5, .star__wrap6, .star__wrap7, .star__wrap8,
    .star__wrap9, .star__wrap10, .star__wrap11, .star__wrap12,
    .star__wrap13, .star__wrap14, .star__wrap15, .star__wrap16,
    .star__wrap17, .star__wrap18 { display: none; }
    #decode-matrix-btn { margin: 2.5em 0; width: 300px; height: 70px; padding: 5px; font-size: 16px; }
    .cls-54, .cls-55, .cls-56 { font-size: 32px; }
    .cls-57, .cls-58 { font-size: 20px; }
    .cls-59, .cls-60 { font-size: 22px; }
}