.tw-card{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    padding:16px 18px;

    border-radius:24px;
    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 15px 40px rgba(0,0,0,.25);

    overflow:hidden;
    position:relative;
}

/* LEFT SIDE */
.tw-left{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* LABEL */
.tw-label{
    font-size:11px;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:#ff9800;
    font-weight:700;
}

/* TITLE */
.tw-title{
    margin:0;
    font-size:24px;
    font-weight:800;
    color:#fff;
    line-height:1.1;
}

/* META */
.tw-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:10px;
    padding-top:12px;

    font-size:13px;
    color:#d8d8d8;

    border-top:none;
	position:relative;
}

.tw-meta::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:25%;

    height:1px;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,.04),
        transparent
    );
}

.tw-meta span{
    display:inline-flex;
    align-items:center;
    gap:4px;
}

/* PROGRESS */
/* PROGRESS CONTAINER */
.tw-progress{
    height:12px;
    border-radius:30px;
    background:#1d1d1d;
    overflow:hidden;
}

/* PROGRESS BAR */
.tw-progress-bar{
    height:100%;
    width:0%;
    border-radius:30px;

    background:linear-gradient(90deg,#00c853,#64dd17);
    transition:width .4s ease;

    position:relative;
    overflow:hidden;
}

/* SHINE EFFECT */
.tw-progress-bar::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-60%;
    width:60%;
    height:200%;

    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.35) 50%,
        transparent 100%
    );

    transform:skewX(-20deg);
    animation:tw-shine 2.2s linear infinite;
}

/* SOFT PULSE */
.tw-progress-bar::after{
    content:'';
    position:absolute;
    inset:0;

    background:radial-gradient(
        circle at 50% 50%,
        rgba(255,255,255,0.20),
        transparent 70%
    );

    opacity:.25;
    animation:tw-pulse 1.8s ease-in-out infinite;
}

/* ANIMATIONS */
@keyframes tw-shine{
    0%   { left:-60%; }
    100% { left:140%; }
}

@keyframes tw-pulse{
    0%,100% { opacity:.15; }
    50%     { opacity:.35; }
}

/* IMPORTANT FIX (removes fake button look) */
#tw-places,
#tw-countdown{
    all: unset;
    display:block;
    font-size:13px;
    color:#ddd;
    line-height:1.2;
}

/* RIGHT SIDE */
.tw-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    min-width:150px;
}

/* STATUS */
.tw-status{
    padding:6px 12px;
    border-radius:40px;
    font-size:12px;
    font-weight:700;
    background:rgba(0,200,83,.15);
    color:#7cff9b;
}

/* BUTTON */
/* PREMIUM BUTTON */
.tw-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:42px;
    padding:0 20px;

    border-radius:999px;

    font-size:13px;
    font-weight:700;
    letter-spacing:.2px;
    line-height:1;

    text-decoration:none;
    color:#111;

    background:linear-gradient(
        180deg,
        #ffd54f 0%,
        #ffb300 100%
    );

    border:1px solid rgba(255,255,255,.18);

    box-shadow:
        0 8px 22px rgba(255,179,0,.22),
        inset 0 1px 0 rgba(255,255,255,.45);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
		
	outline:none;
	-moz-outline-style:none;
	-webkit-tap-highlight-color: transparent;
    user-select:none;
}

.tw-button:hover{
    transform:translateY(-1px);
    filter:brightness(1.03);

    box-shadow:
        0 12px 28px rgba(255,179,0,.30),
        inset 0 1px 0 rgba(255,255,255,.55);
}

.tw-button:active{
    transform:translateY(1px);
    box-shadow:
        0 4px 12px rgba(255,179,0,.20);
}

.tw-button:focus,
.tw-button:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 3px rgba(255,179,0,.35),
        0 8px 22px rgba(255,179,0,.22),
        inset 0 1px 0 rgba(255,255,255,.45);
}

	.tw-button br{
    display:none !important;
	}

/* MOBILE */
@media(max-width:768px){

    .tw-card{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    /* LEFT SIDE */
    .tw-left{
        width:100%;
        gap:8px;
    }

    /* TITLE по-компактен */
    .tw-title{
        font-size:20px;
        line-height:1.2;
    }

    /* META по-стегнато */
    .tw-meta{
        gap:8px;
        font-size:12px;
    }

    /* PROGRESS по-тънък */
    .tw-progress{
        height:8px;
    }

    /* BOTTOM (places + countdown) */
    #tw-places,
    #tw-countdown{
        font-size:12px;
    }

    /* RIGHT SIDE става хоризонтален блок */
    .tw-right{
        width:100%;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        gap:10px;
        padding-top:6px;
        border-top:1px solid rgba(255,255,255,.08);
    }

    .tw-status{
        font-size:11px;
        padding:5px 10px;
        white-space:nowrap;
    }

	.tw-button{
		display:inline-flex;
		align-items:center;
		justify-content:center;

		flex:1;

		height:38px;
		padding:0 16px;

		border-radius:999px;

		font-size:13px;
		font-weight:700;
		line-height:1;

		text-align:center;
		white-space:nowrap;
		vertical-align:middle;

		box-sizing:border-box;
		
	}	
	
}

@media (max-width:768px) and (orientation:landscape){
    .tw-button{
        position:relative;
        top:-1px;
    }
}

#tw-countdown{
    display:none;
    align-items:center;
    gap:6px;

    padding:6px 10px;
    border-radius:999px;

    font-size:12px;
    font-weight:600;

    background:rgba(255,152,0,.12);
    color:#ffb74d;

    border:1px solid rgba(255,152,0,.25);
}