:root {
  --main-text: #333;
  --color-bad:Crimson;
  --color-good:#8FFF8F;
  --form-border:#777;
  --col-width:640px;
}

.first-section {
    min-height:0 !important;;
    text-align:center;
}

#copy, #email {cursor:pointer;}

.ucard,.ucard * {
    all: unset;
    display: revert; /* чтобы div остался block/grid, а не превратился в inline */
}

.ucard {
    opacity: 0;
    transition: opacity 0.4s;
    &.visible {opacity: 1;}
    display: inline-grid;
    grid-template-columns: max-content 1fr;
    font-size:16px;
    margin:-15px auto 0;
    gap:5px 0;
    height:auto;
    .ufull {
        grid-column: 1 / -1;
    }
    > div {
        display: flex;
        align-items:flex-end;
        padding:0;
        &.right {justify-content:flex-end;}
        &.icons p {
            display:flex;
            flex-flow:column;
            align-items:center;
            gap:0;
            padding:0 10px 5px;
            &:empty {flex-grow:3;}

            label {
                font-size:2.2em;
                margin:0 0 -5px 15px;
            }
            span {
                font-size:.85em;
                font-weight:300;
            }
        }
    }
}

.labels {
    display: inline-flex;
    flex-wrap: nowrap;
    font:bold 18px courier new, monospace;
    color:#000;
    padding:0 5px;
    label {
		&.bright {color:red}
        font:inherit;
        white-space:nowrap;
        padding:.15em 1px 0;
        color:var(--text-primary);
        &[rel]{
            background: #e0f0ff;
        }
    }
}

h1.labels {
	font-size: 30px;
	letter-spacing: 1px;
	outline: 1px solid #666;
	flex-wrap: wrap;
	border-radius: var(--radius-small);
	label[rel] {
		
		&:nth-of-type(2n) {background: #f7e0df;}
		&:empty {display:none;}/* [class] */
		&.gap:not(:empty) {
			 padding-left:.25em;
		}
		&.defis:not(:empty):before {
			content:'-';
			color:currentColor;
		}
		&.slash:not(:empty):before {
			content:'/';
			color:currentColor;
		}
	}       
}




form#order {
    .design input,
    .target input {
        height:unset;
        width:unset;
        margin-right:2px;
    }
    option.hidden {display:none;}

    label {font-weight:500;}

    a[id].help:before {
      display:inline-block;
      height:1.4em;
      width:1.4em;
      outline: 1px solid #666;
      border-radius:1em;
      text-align:center;
      content:'?';
      cursor:pointer;
      margin-left:.3em;
    }

    .h2 { /* заголовки разделов */
      padding:0;
      text-align:left;
      font-weight:normal;
      display:inline-block;
      margin:1em 0 .5em;
      text-decoration:underline;
    }
    ul li:before {
        content:unset !important;
    }

    ul {
        list-style:none;
        display:flex;
        flex-wrap:nowrap;
    }
	.bright{color:red;}

    select:not(:has(option:not(.hidden) ~ option:not(.hidden))) {
        opacity: 0.3;
        pointer-events: none; /* чтобы нельзя было открыть список кликом */
    }
}

form#order ul.design {
	display:grid;
    flex-flow:row wrap;
    justify-content:space-evenly;
    grid-template-columns: repeat(auto-fill, 200px);
    gap: 0;
    list-style:none;
    margin: 0 0 30px;

    li {
        overflow:hidden;
        padding:5px 0px;
        text-align:center;
        border-radius: .5em;
        border:solid 1px transparent;
        cursor:pointer;
        img {width:180px;
            margin:0 auto;
            display:block;
            aspect-ratio:1;
            object-fit:contain;
            object-position:center top;
        }
        &:has(input:checked){
           outline: 1px solid #666;
        }
    }
}


.target {
    display:flex;
    gap:15px;
    flex-flow:column nowrap;
    li {
        text-align:left;
        max-width:600px;
        font-size:15px;
    }
}

.selectors {
    display:flex;
    gap:10px;
    flex-flow:column nowrap;
    margin:15px 0;

    button{
        width:330px;
        padding:3px 5px;
        font-size:15px;
    }
    li {
        display:flex;
        flex-flow:row nowrap;
        align-items:center;
        gap:.5em;
    }
    label {
        text-align:right;
        width:220px;
        flex: 0 0 220px;
    }
    select[id] {
        padding:1px 5px;
        text-align:left;
    }
    select[id],
    input[type=text] {
        width:330px;
    }
    &.btn {
        padding:10px 0;
        background-color:#eed;
    }
}

.gland_inputs{
    display:flex;
    flex-flow:column;
    gap:15px;
    max-width:var(--col-width);
    p {
        font-size:15px;
        margin:0 10% 10px;
    }
    div {border-bottom: solid 1px #eee;}
}


button {
    font-size:13px;
    display:inline-block;
    padding:0 .7em 0.15em;
    border-radius:1em;
    border-width:1px;
    background:#efefef;
}


#tabs {
    padding-top:15px !important;
    .tab_item__content{
        display:flex;
        justify-content:center;
        min-height:200px;
        width:98%;
        max-width:700px;
        margin:0 auto;
        min-height:400px;
    }
    li[aria-controls=tab-5] {display:none;}
}


#tab-5 .tab_item__content {
    all: unset;
    display: flex;
    flex-direction: column;
    margin:0 auto;
    gap: 15px;
    padding:15px;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    height: 840px;
    width: 94%;
    overflow-x: auto;
    overflow-y: hidden;
    border:var(--tt-border);
    background:#f5f5f5;
    &:empty {visibility:hidden;}
}


#tab-5  .tab_item__content > table {
    all:unset;
    font-size:14px;
    border-collapse:collapse;
    flex: 0 0 auto;
    td,th{
        border: 1px solid #ccc;
        vertical-align: middle;
        padding:2px 3px;
        line-height:1;
        hyphens:none;
    }
    td:first-child {width:3em;}
    td:last-child {width:15em;}
    th {
        font-weight:500;
        background: gold;
    }
}

table.fine {
    max-width:94%;
    width:900px;
    margin:15px auto 50px;
    img {
        max-height:150px;
        display:block;
        margin:0 auto 5px;
    }
    tr > *{
        white-space:normal;

    }
    td {
        &:first-child{text-align:left;}
        padding:5px 10px;
        width:33%;
        hyphens:none;
        a[href]{padding: 5px 10px; min-width: 99%;}
        &:has(a[href]):hover {
            outline:solid 3px blue;
            outline-offset: -3px;
            color:blue;
        }
        &.diagonal {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='gray' stroke-width='0.5'/></svg>");
            vertical-align:bottom;
            text-align:center;
        }
        sup {
            position:absolute;
            padding-left:2px;
        }
        i {
            &:before{
                display:inline-block;
                font-style:normal;
                font-size:22px;
                width:1.4em;
                border-radius:1em;
                color:white;
            }
            &.yes:before{
                content:'✔';
                background:green;
                color:white;
            }
            &.no:before{
                content:'✘';
                background:#f33;
            }
            &.partial:before{
                content:'✔';
                background:gold;
            }
        }
    }
}

@media only screen and (max-width: 600px) {
    .ucard *, .ucard .tram.labels{
        font-size: 16px;
        letter-spacing:-0.3px;
    }
    table.fine {
        max-width:98%;
        td {
            font-size:14px;
            position:relative;
            min-width:0;
            padding:2px;
            hyphens:auto;
        }
        a {min-width: 99%;}
        img {height:80px;}
     }
}