/*
 * The link picker (#tvModal, modules #31) in the UI-UX design language — CSS only (Tomer 21.10: "don't change anything,
 * just the UI UX"). Nothing in the picker's markup or behaviour changes; this file only re-skins it.
 * Tokens: ink #191512, sand #D5B398, light text #F7F7F7, line #E6DFD6, muted #7A7166, soft #FBF6F1 / #F0E3D8,
 * Heebo, 20px corners, 50px buttons and fields, one sand button per screen, black only on hover.
 * Many picker elements carry inline styles, so the rules below use !important where they must win.
 */

/* the sheet: no scrollbar strip on the side (it still scrolls), 20px corners */
#tvModal{scrollbar-width:none;-ms-overflow-style:none}
#tvModal::-webkit-scrollbar{display:none;width:0;height:0}
#tvModal .tv-dialog{border-radius:20px!important;font-family:"Heebo",sans-serif!important;color:#191512}
#tvModal .tv-dialog *{scrollbar-width:none}
#tvModal .tv-dialog *::-webkit-scrollbar{display:none}

/* type: one family, ink + muted */
#tvModal .tv-title,#tvModal #tvModalTitle{font-family:"Heebo",sans-serif!important;font-weight:700!important;color:#191512!important;letter-spacing:0!important;text-align:center}
#tvModal .tv-subtitle,#tvModal #tvModalSub,#tvModal #ptSubtitle{color:#7A7166!important;text-align:center}
#tvModal .tv-input-label{color:#191512!important;font-weight:600!important}

/* close */
#tvModal button.tv-close,#tvModal button.tv-close:focus{width:36px;height:36px;border-radius:20px!important;background:transparent!important;color:#7A7166!important;box-shadow:none!important}
#tvModal button.tv-close:hover{background:#F0E3D8!important;color:#191512!important}

/* fields: 50px, 20px corners, sand focus (the theme's pink focus ring is gone) */
#tvModal input.tv-input,#tvModal .tv-input,#tvModal input[type=text],#tvModal input[type=url],#tvModal input[type=tel],#tvModal input[type=email]{min-height:50px;border:1px solid #E6DFD6!important;border-radius:20px!important;background:#fff!important;color:#191512!important;font-family:"Heebo",sans-serif!important;box-shadow:none!important}
#tvModal input:focus,#tvModal input:focus-visible,#tvModal textarea:focus{border-color:#D5B398!important;outline:2px solid #D5B398!important;outline-offset:0!important;box-shadow:none!important}
#tvModal input::placeholder{color:#A39A8F!important}
#tvModal gmp-place-autocomplete{border-radius:20px;color-scheme:light}

/* main button = sand (one per screen): paste, search, confirm */
#tvModal button#igPasteBtn,#tvModal button#igPasteBtn:focus,
#tvModal button.tv-primary-btn,#tvModal button.tv-primary-btn:focus,
#tvModal button.tv-ig-search-btn,#tvModal button.tv-ig-search-btn:focus{min-height:50px;border:0!important;border-radius:20px!important;background:#D5B398!important;color:#F7F7F7!important;font-family:"Heebo",sans-serif!important;font-weight:700!important;text-align:center;box-shadow:none!important;transition:background .3s,color .3s}
#tvModal button#igPasteBtn:hover,#tvModal button.tv-primary-btn:hover,#tvModal button.tv-ig-search-btn:hover{background:#111!important;color:#fff!important}

/* secondary buttons = white with a sand line */
#tvModal button.pxlk-qr-btn,#tvModal button.pxlk-qr-btn:focus,
#tvModal button.tv-url-check-btn,#tvModal button.tv-url-check-btn:focus,
#tvModal button.tv-open-btn,#tvModal button.tv-open-btn:focus,
#tvModal button.tv-ig-profile-btn,#tvModal button.tv-ig-profile-btn:focus,
#tvModal button.tv-copy-btn,#tvModal button.tv-copy-btn:focus{min-height:50px;border:1px solid #D5B398!important;border-radius:20px!important;background:#fff!important;color:#1E1B17!important;font-family:"Heebo",sans-serif!important;font-weight:700!important;text-align:center;box-shadow:none!important;transition:background .3s,color .3s,border-color .3s}
#tvModal button.pxlk-qr-btn:hover,#tvModal button.tv-url-check-btn:hover,#tvModal button.tv-open-btn:hover,#tvModal button.tv-ig-profile-btn:hover,#tvModal button.tv-copy-btn:hover{background:#111!important;border-color:#111!important;color:#fff!important}
#tvModal button.tv-copy-btn{min-height:36px}

/* link-type choice = choice buttons: white, the chosen one sand */
#tvModal button.tv-type-btn,#tvModal button.tv-type-btn:focus{border:1px solid #E6DFD6!important;border-radius:20px!important;background:#fff!important;color:#191512!important;font-family:"Heebo",sans-serif!important;box-shadow:none!important;transition:background .3s,border-color .3s}
#tvModal button.tv-type-btn:hover{border-color:#D5B398!important;background:#FBF6F1!important;color:#191512!important}
#tvModal button.tv-type-btn.tv-active{border-color:#D5B398!important;background:#F0E3D8!important;color:#191512!important}

/* the small "clear" x inside fields: quiet, never pink */
#tvModal button.tv-input-clear-btn,#tvModal button.tv-input-clear-btn:focus,#tvModal button.tv-input-clear-btn:hover{background:transparent!important;color:#A39A8F!important;box-shadow:none!important}

/* any other plain button inside the picker: never the theme's pink on hover / focus */
#tvModal .tv-dialog button:not(.tv-type-btn):not(.tv-close):not(.tv-input-clear-btn):hover{box-shadow:none!important}
#tvModal .tv-dialog button:focus{box-shadow:none!important}

/* the "how do I get the link" box + result cards: soft surface, 20px corners */
#tvModal #igHowto{border:1px solid #E6DFD6!important;border-radius:20px!important;background:#FBF6F1!important}
#tvModal #igHowto > div:first-child{color:#191512!important}
#tvModal #igResult > div,#tvModal #urlResult > div,#tvModal #mapsResult > div{border-radius:20px!important}
